ローカル環境を Docker にて開発しているアプリケーションを iPhone で確認したい

ローカル環境を Docker にて開発している時に、
スマホで実機確認がしたくなった。時のメモ。

環境

MacOS Sonoma 14.6
Docker v28
Docker Desktop v4.41
iPhone v16.7

アプリケーションサンプル

http://sample.test と http://localhost:8080 にアクセスできるようにする
- jwilder/nginx-proxy - Docker Hub
index.html の1ファイルがあるだけ

/etc/hosts

下記追加。

127.0.0.1 sample.test

docker-compose.yaml

services:
    sample-app:
        image: nginx:1
        volumes:
            - ./app:/var/www/html
            - ./nginx/default.conf:/etc/nginx/conf.d/default.conf
        ports:
            - 8080:80
        tty: true
        working_dir: /var/www/html
        networks:
            - sample-network
        environment:
            - VIRTUAL_HOST=sample.test
    sample-nginx-proxy:
        image: jwilder/nginx-proxy
        ports:
            - 80:80
        volumes:
            - /var/run/docker.sock:/tmp/docker.sock:ro
        networks:
            - sample-network

networks:
    sample-network:
        name: sample_network

nginx/default.conf

server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;

    root /var/www/html/public;

    index index.php index.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }


    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    location ~ /\.ht {
        deny  all;
    }
}

app/public/index.html

内容は適当。

hello, world

iPhone で確認する

Safari + Wi-Fi 以外の条件を試してないので、
一旦 Safari + Wi-Fi 環境の条件下ですすめる。

条件

Safari を使う
作業している PC と iPhone を同じ Wi-Fi に接続する

PC 側の IPアドレスを確認

「システム設定」→「ネットワーク」→「ネットワーク」→ 繋いでる Wi-Fi の「詳細」→「IPアドレス」をメモ

アクセスする

iPhone の Safari で、
http://メモしたIPアドレス:8080 にアクセスする。

iPhone で確認中の画面を Webインスペクタで確認できるようにする

条件

Safari を使う
作業している PC と iPhone を同じ Wi-Fi に接続する
PC と iPhone をケーブルで繋ぐ

iPhone 側の設定

「設定」→「Safari」→「詳細」→「Webインスペクタ」をオンにする

Webインスペクタを開く

Safari を使う。

「開発」→ ケーブルで繋いだ iPhone を選択 → 確認したいページを選択