さいごうの技術メモ集

Dockerで配信して実機確認｜スマホでレスポンシブ表示をチェックする手順

はじめに

レスポンシブデザインを作っても、PCの開発者ツールだけだと「実機での見え方」とズレることがあります。
たとえば以下は実機で気づきやすいポイントです。

  • フォントの見え方（OS/ブラウザ差）
  • タップ領域の狭さ、押しづらさ
  • 100vh/スクロール挙動、アドレスバーの影響
  • 画像の拡大縮小や余白の出方
  • 回線速度や読み込み体感

そこで便利なのが Dockerでローカル配信 → スマホ実機でアクセス する方法です。
NginxをDockerで立ち上げれば、環境依存なくサクッと「実機確認用のURL」を作れます。

この記事でできること（ゴール）

  • Docker + NginxでHTML/CSSをローカル配信
  • 同一Wi-Fiのスマホからアクセスして実機確認
  • 編集→即反映の開発フロー（ボリュームマウント）
  • よくある接続トラブルの解消

前提条件

  • Docker がインストール済み（Docker DesktopでもOK）
  • PCとスマホが 同じWi-Fi（同一ネットワーク） に接続
  • index.html と style.css などの静的ファイルがある（レスポンシブでも通常ページでもOK）

【ハンズオン】Dockerで配信 → スマホ実機で確認

ステップ1：プロジェクト構成を作る

以下のように配置します（例）。

device-check/
├─ site/
│  ├─ index.html
│  └─ style.css
└─ docker-compose.yml

site/ 配下が公開されるWebコンテンツになります。

ステップ2：サンプルHTML/CSSを用意（既存でもOK）

site/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Docker配信で実機確認</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <header class="header">
    <h1>実機確認ページ</h1>
    <p>スマホで開いて表示をチェックします。</p>
  </header>

  <main class="container">
    <section class="card">カードA</section>
    <section class="card">カードB</section>
    <section class="card">カードC</section>
  </main>
</body>
</html>

site/style.css

body { margin: 0; font-family: Arial, sans-serif; }
.header { padding: 16px; background: #f5f5f5; }
.container { display: flex; gap: 12px; padding: 16px; }
.card { flex: 1; padding: 16px; border: 1px solid #ddd; background: #fff; }

@media (max-width: 768px) {
  .container { flex-direction: column; }
}

ステップ3：Docker ComposeでNginx配信を作る（編集→即反映）

docker-compose.yml

services:
  web:
    image: nginx:alpine
    ports:
      - "8080:80"
    volumes:
      - ./site:/usr/share/nginx/html:ro

ポイント：

  • ports: "8080:80" でPCの8080番を公開
  • volumes で site/ をNginxの公開ディレクトリにマウント
  • :ro（読み取り専用）で安全に

ステップ4：起動する

docker compose up -d

PCのブラウザで確認：

  • http://localhost:8080

表示できればOKです。

ステップ5：PCのローカルIPを確認する（スマホからアクセスするため）

スマホは localhost ではPCに到達できません。
PCのIP（例：192.168.1.10）を調べます。

Windows

  • 「設定」→「ネットワークとインターネット」→接続中のWi-Fi → プロパティ
  • もしくは ipconfig で IPv4 を確認

macOS

  • 「システム設定」→「ネットワーク」→Wi-Fi → 詳細
  • もしくは ifconfig で確認

Linux

  • ip a などで確認

ステップ6：スマホでアクセス（実機確認）

スマホのブラウザで以下を開きます。

  • http://<PCのIPアドレス>:8080

例：

  • http://192.168.1.10:8080

これで 同一Wi-Fi内の実機確認 ができます 🎉

実機確認でチェックすべきポイント（レスポンシブ品質）

  • 文字が小さすぎないか（最小16px目安）
  • タップ要素の間隔（誤タップしない余白）
  • 1カラム化のタイミング（768pxだけでなく崩れ幅で調整）
  • 画像がはみ出ないか（max-width:100%）
  • スクロール時のヘッダー固定、100vh挙動
  • 回転（縦/横）したときの崩れ

よくあるトラブルと対処法

1) スマホからアクセスできない（タイムアウト）

チェック順はこれが鉄板です。

  • PCとスマホが 同じWi-Fi にいるか（ゲストWi-Fiだと隔離されることあり）
  • URLが http://PCのIP:8080 になっているか（localhostにしていないか）
  • Windowsの場合、ファイアウォールで8080がブロックされていないか
    • 一時的に許可ルール追加、またはDocker Desktopのネットワーク許可を確認

2) 表示はできるが更新が反映されない

  • スマホブラウザのキャッシュを疑う（プライベートモードで開くと早い）
  • PC側でファイル保存できているか確認
  • docker compose up -d は起動済みなので再起動不要（通常は保存→リロードでOK）

3) 会社/公共Wi-Fiで見れない

  • 端末間通信がブロックされている可能性が高いです
    → 自宅Wi-Fiやテザリングなど、端末間通信できる環境で試すのが確実

まとめ

Dockerで静的サイトを配信すると、スマホ実機確認のための環境が一瞬で作れます。

  • Docker + Nginxで http://localhost:8080 配信
  • PCのIPを使って http://PC_IP:8080 にスマホからアクセス
  • ボリュームマウントで「編集→即反映」の快適フロー

投稿日

カテゴリー:

投稿者:

saigo

タグ:

コメント

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です