これは便利!PCからでも、スマホからでも外部からローカル環境にアクセス可能な「Vagrant Share」を使う方法

自分のPCでWeb制作環境(ローカル環境)を構築するツールとしてVagrant(「ベイグラント」と読みます)を使っている方もいらっしゃると思います。

ローカル環境を外部からアクセス可能にする「Vagrant Share」

ところで、Vagrantを起動しているローカル環境にPCやスマホなどで外部から感覚的にアクセスできることを知りました。「Vagrant Share」を使う方法です。

「そんな方法を知って、一体何の役に立つんだ?」と思う方もいらっしゃるかもしれませんが、ローカル環境の段階で別のPCやスマホの実機から動作確認や表示崩れのチェックなどができるのは便利です。

以下に手順を書きましたので、機会がありましたらご参考ください。

アカウントを作成しよう

Vagrant Shareを使うにはAtlasアカウントが必要です。アカウントを持っていない場合はアカウント作成画面にアクセスして、ユーザー名、メールアドレス、パスワードを入力して「Create account」を押してアカウントを作成します。

アカウント作成後、メールアドレス宛に登録確認用のメールが届くので、メール文中にある本登録完了用リンクからアクセスをすれば登録完了です。

ログインしよう

アカウントを作ったら、ログインしましょう。Windowsを使用している方はコマンドプロンプト(Macの場合はターミナル)を起動して、以下のコマンドを実行します。

vagrant login

アカウントを作成した時に使用したユーザー名とパスワードを入力してログインしてください。上の画像にあるように「You are now logged in.」と表示されればログインはできています。

ローカル環境にアクセスできるURLを取得しよう

ログインできたら、Vagrant upでローカル環境を立ち上げた状態で以下のコマンドを実行します。

vagrant share

コマンドを実行すると、外部からローカル環境にアクセスできるURLを取得できます(下の画像中の赤線が引いてある箇所です)。

このURLはVagrant Shareを起動している間のみ一時的にアクセスできるURLです。Vagrant Shareを中断(Ctrl+c)したりVagrant haltなどでローカル環境を終了してしまえばアクセスできなくなります。

また、1度中断したURLは同じURLで再びアクセスすることはできないです。再度Vagrant Shareのコマンドを実行してURLを取得しましょう。

URLを知らせる範囲は限定しています

Vagrant Shareは一時的にアクセスできるURLになっているとはいえ、不特定多数にURLを公開してアクセスできる状態にするのはローカル環境のPCのリソースの消費にも影響しますね。

例えば「制作に関わる人」に限定してURLを知らせて、目的が達成できたら速やかにVagrant Shareを中断し、アクセスできないようにしたほうがよさそうです。私はそうしています。

著者:bouya Imamura