前回仮想マシン(CentOS)に LAMP 環境を構築するの続きとして、Virtual Box 上で立ち上げた Web サーバに外部(スマートフォン等)から接続できるようにする。
- VirtualBox マネージャーから CentOS の環境の設定を開く
- ネットワークタブから高度を展開し、ポートフォワーディングを選択する。
必要なのは 80 番ポートに接続することだが、CentOS の GUI で操作するのは面倒なので TeraTerm からも動かせるように 22 番ポートを追加している。
任意の名前に、ホスト OS から接続するポート、ゲスト OS の接続したいポートを入力する。
次にゲスト OS の 80 番ポートを開放する。
今回は CentOS なのでターミナルから次のように入力する。
sudo firewall-cmd --permanent --add-service=http
sudo firewall-com --reloadゲスト OS の 80 番ポートが開放できたので、ホスト OS のブラウザから[localhost:8888(ホストポート)]にアクセスすることで CentOS の 80 番ポートに繋がり、Web サイトが表示される。
ホスト OS からゲスト OS への接続だけならばここまでで良い。
最後にホスト OS のホストポートを開放する。
ホスト OS は Windows なので、
- コントロールパネル → Windows Defender ファイアーウォールを選択
- 詳細設定 → 受信規則 → 新しい規則
- ポートを選択し、TCP で適用
- ポートフォワーディングに 8888 を利用しているので、特定のローカルポートに 8888 接続を許可し、環境によって接続可能範囲を指定
- 今回はローカルでの開発なので、プライベートだけにチェック
- あとで編集しやすいように分かり易い名前をつけて完了
スマートフォンのブラウザから[ホストOSのIPアドレス:8888]にアクセスするとホスト OS と同様に Web サイトが表示されるはず。
ホスト OS の IP アドレスを確認するにはコマンドプロンプトに ipconfig と入力し、IPv4 アドレスの欄を参照する。
PWA の開発をする上で、SSL/TLS 対応または localhost でしか ServiceWorker が動作しないため、スマートフォンからテストを行う際には別途 SSL/TLS 化が必要になる。
〈参考〉
他の PC から VirtualBox 上の環境にアクセスする
VirtualBox に CentOS をインストールして Web サーバー構築 4 – ホスト OS からゲスト OS に接続するための設定
〈追記〉
Chrome の機能で Android でも localhost 接続が可能であると分かったので、まとめておく。
Service Worker 開発するときのデバッグ方法 を読むと更に機能が追加できる。
Android で USB デバッグを有効にし、アドレスバーに chrome://inspect/#devices と入力する。
Discorver USB devices にチェックを入れ、Port forwarding...にポートとアドレスを設定する。
今回 8888 番ポートを使っているので、 8888 localhost:8888 と入力し、Enable port forwarding にチェックを入れる。
スマートフォン側で Chrome を開き、localhost:8888 に接続すると PC 側にスマートフォンが接続しているサイトが表示されるようになる。
inspect をクリックするとデベロッパーツールと同期されたデバイスの画面が表示される。
localhost で動作しているため、もちろん Service Worker は動作し、更新や破棄が簡単にできるようになる。
