Virtualbox上で開発したアプリをスマホ実機で動作確認する手順

仮想環境で開発したアプリは、Chomeのディベロッパーツールだけでなく、スマホ実機で動作確認しておきたいところです。同じWiFi(ネットワーク)内にPCとモバイルが接続している状態なら簡単に、スマホの動作確認が可能になります。今回は、そんなVirtualbox上のnginxで動作するアプリをスマホで動作させる手順を解説していきます。

 

【環境】

Virtualbox

vagrant

ubuntu18 or CentOS

nginx

 

【今回動作させるアプリ】

Laravel 5.6

PHP 7.1

 

※ Laravelを使用する場合は、仮想環境に以下が必要です

Laravel Installer 2.0.1

Composer

PHP 7.0.0以上

OpenSSL PHP拡張

PDO PHP拡張

Mbstring PHP拡張

Tokenizer PHP拡張

XML PHP拡張

PHP-fpm

nginx

 

【接続の仕組み】

Laravel(フレームワーク)

php-fpm(Web サーバー上でPHP を動作せるための仕組み)

nginx(Web サーバー)

 

nginxドキュメントルート変更する

nginxドキュメントルートをLaravelアプリのデキュメントルートに変更します。以下のファイルを編集してください。

 

/etc/nginx/sites-available/default

// デフォルト
/var/www/html
↓
// アプリのドキュメントルート先
/var/www/html/[プロジェクト名]/public

 

 

Vagrantfileのipアドレスの設定

Vagrantfileを開きipアドレスを設定します。(192.168.33.〇〇がvagrantのipアドレス

// 追加する
config.vm.network "private_network", ip: "192.168.33.[好きな番号]"

 

 

Virtualboxの設定

以下の手順で、WiFi環境のipアドレスでnginxが起動できるようなネットワークを作成していきます。

  1. 構築したvagrant環境を選択し、「設定」をクリック
  2. 「ネットワーク」を選択し、「ブリッジアダプター」のアダプターを追加

 

これで、接続しているWiFiのipアドレスでnginxが起動可能になります。すなわち、同一WiFi環境に接続しているデバイスはそのipアドレスでアプリの動作確認が可能になるということです。

 

vagrantを起動

Vagrantfileがあるディレクトリに移動し以下のコマンドで起動

$ vagrant up

 

vagrant環境内に接続

$ vagrant ssh

 

接続できるipアドレスを確認

$ ip a s

192.168.33.〇〇以外に192.168で接続できるネットワークが存在するはずです。それが、WiFi環境で接続できるipアドレスです。

 

スマホのブラウザで動作確認

WiFi環境のipアドレスをブラウザに入力して、動作確認できます!