Dockerで立ち上げたローカル環境のWebサイトにスマホからアクセスする方法

弊社では原則、Dockerでローカル環境を立ち上げてWebサイトの開発をおこなっています。

開発中、スマホの実機で動作確認をしたいケースが多く、実機確認する方法が見つかったので備忘録としてまとめておきます。

前提条件

Docker環境とスマホ実機は必ず、同一ネットワークに繋がっていることが条件です。

また、今回はDocker環境をMacで立ち上げているとします。

事前準備

まず、Docker環境を立ち上げているPCのローカルIPアドレスを確認します。
ターミナルで以下のコマンドを実行してください。

$ ifconfig en0

長い結果が返ってきますが、inet 192.168.24.xxx とローカルIPが書かれている箇所があるはずなので、IPアドレスを覚えておきましょう。
※今回は 192.168.24.238とします。

続いてポートの確認です。
ターミナルで該当するDockerコンテナのポートを確認します。

$ docker ps

現在立ち上がっているコンテナのリストが返ってきます。
今回確認するのは一番下のコンテナです。最下行のPORTSを見ると、80番ポートにマッピングされているのが8097番ポートであることがわかります。

スマホ実機での確認

先ほど確認したIPアドレスとポート番号を組み合わせて、スマホのブラウザで確認します。

http://192.168.24.238:8097

このURLを使うことで、Macで動作しているDocker環境と全く同じ環境をスマホ実機で確認することができます。