このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

Docker超入門：Docker ComposeでNginxコンテナを構築する方法（おさらい）

🌐 Docker ComposeでNginxコンテナを構築する方法（おさらい）

この記事では、Docker Compose を使って Nginxコンテナ を構築する方法を紹介します。
Nginxは軽量で高性能なWebサーバーとして有名で、Docker環境でも非常によく使われています。
Composeを使えば、たった数行の設定で簡単にNginxを起動できますよ！

ここで学ぶ内容

💡 Nginxとは？

まずは、Nginx（エンジンエックス）について軽くおさらいしておきましょう。

Nginxは、高性能で軽量なWebサーバー兼リバースプロキシサーバーです。
ロシアの開発者 Igor Sysoev（イゴール・シソエフ） によって2004年に初めて公開され、
現在では世界中のWebサービスで使われています。

項目内容
開発者Igor Sysoev
初回リリース2004年
主な用途Webサーバー、リバースプロキシ、ロードバランサー
特徴高パフォーマンス、軽量、イベント駆動型設計
公式サイトhttps://www.nginx.co.jp/

💬 ポイント
Nginxは「イベント駆動アーキテクチャ」を採用しており、
同時に大量の接続を処理できるため、高トラフィックサイトに最適なんです。

URL：https://www.nginx.co.jp/

🧱 Nginxコンテナの構成

今回の構成はとってもシンプル！
ローカルPCのカレントディレクトリ（./） を
コンテナ内の /usr/share/nginx/html にマウントします。
こうすることで、ローカルで編集したHTMLが即座にコンテナ上で反映されます。

項目説明
ホスト側のディレクトリ./（現在の作業ディレクトリ）
コンテナ側のディレクトリ/usr/share/nginx/html
目的ローカルでWebページを編集して即反映できるようにする

🧹 作業前のクリーンアップ

古いコンテナや使っていないイメージが残っていると挙動が分かりにくくなるので、
まずは環境をスッキリさせましょう。

コマンド書式

docker system prune -a --volumes
オプション説明
-a未使用のイメージを含めて削除
--volumes未使用のボリュームも削除

実行結果

PS C:\Users\joeac> docker system prune -a --volumes
WARNING! This will remove:
  - all stopped containers
  - all networks not used by at least one container
  - all anonymous volumes not used by at least one container
  - all images without at least one container associated to them
  - all build cache

Are you sure you want to continue? [y/N] y

💬 補足
コマンドを実行すると確認メッセージが出るので、y を入力して進みましょう。
GUI派の方はDocker Desktopでも同様の操作が可能です。

📁 compose.yamlの作成

それでは、Nginxコンテナの構成を定義する compose.yaml ファイルを作成します。

１．作業ディレクトリの準備

cd desktop/docker
mkdir nginx1
cd nginx1

実行結果

PS C:\Users\joeac> cd desktop/docker
PS C:\Users\joeac\Desktop\docker> mkdir nginx1

    Directory: C:\Users\joeac\Desktop\docker

Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d----          2025/10/14    22:53                nginx1

PS C:\Users\joeac\Desktop\docker> cd nginx1
PS C:\Users\joeac\Desktop\docker\nginx1>

２．VS Codeを起動

コマンド

code compose.yaml

🧾 compose.yamlの内容

以下の内容をVS Codeに入力して保存します👇

services:
  nginx:
    image: nginx:latest
    container_name: nginx_container
    ports:
      - "80:80"
    volumes:
      - ./:/usr/share/nginx/html
設定項目説明
servicesComposeで管理するサービスを定義
nginxサービス名（任意）
image使用するDockerイメージ（ここでは nginx:latest）
container_nameコンテナの名前を指定（nginx_container）
portsホストとコンテナのポートをマッピング（80番ポート）
volumesホストとコンテナ間のディレクトリ共有設定

💡 ポイント
ホストの80番ポートをNginxの80番ポートにマッピングしているので、
ブラウザから「http://localhost」でページを表示できます。

🧩 index.htmlの作成

Webサーバーのトップページを表示するために、index.html を作成しましょう。

コマンド

code index.html

以下のHTMLを入力して保存します👇

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome to NGINX</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #e0ffe0; /* 淡いグリーン */
            text-align: center;
            padding-top: 100px;
        }
        h1 {
            color: #333;
        }
        p {
            color: #666;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <h1>Welcome to NGINX</h1>
    <p>This is a simple HTML page served by NGINX.</p>
</body>
</html>

💬 補足
index.html はホスト側のディレクトリに保存されるため、
Nginxコンテナがそれを /usr/share/nginx/html にマウントして配信します。

🚀 コンテナの作成と実行

設定ができたら、いよいよNginxコンテナを起動します！

コマンド

docker compose up -d
オプション説明
upcompose.yamlに基づいてコンテナを起動
-dバックグラウンド実行（detachedモード）

実行結果

PS C:\Users\joeac\Desktop\docker\nginx1> docker compose up -d
[+] Running 8/8
 ✔ nginx Pulled                                                       7.6s
   ✔ 8da8ed3552af Pull complete                                       1.1s
   ✔ b459da543435 Pull complete                                       1.1s
   ✔ 58d144c4badd Pull complete                                       1.2s
   ✔ 8c7716127147 Pull complete                                       3.3s
   ✔ 5d8ea9f4c626 Pull complete                                       1.2s
   ✔ 250b90fb2b9a Pull complete                                       3.9s
   ✔ 54e822d8ee0c Pull complete                                       1.2s
[+] Running 2/2
 ✔ Network nginx1_default     Created                                 0.1s
 ✔ Container nginx_container  Started                                 0.8s
PS C:\Users\joeac\Desktop\docker\nginx1>

💬 ポイント
nginx:latest イメージが初めての実行時に自動でダウンロードされます。
2回目以降はキャッシュ済みのイメージが使われるので高速です。

🌍 Nginxコンテナへのアクセス

コンテナが起動したら、ブラウザを開いて次のURLを入力します。

http://localhost

もし設定が正しければ、先ほど作成した「Welcome to NGINX」のページが表示されます！

動作確認結果
URLhttp://localhost
表示内容"Welcome to NGINX" のメッセージが出れば成功
トラブル例ポート80が他のアプリで使用中の場合、別のポートに変更する必要あり（例: "8080:80"）

🧠 まとめ

Docker Composeを使えば、Nginxの構築はとっても簡単。
設定ファイルを1つ書くだけで、Webサーバー環境が一瞬で立ち上がります。

ステップ内容
1️⃣不要な環境を整理（docker system prune）
2️⃣compose.yaml を作成して Nginx イメージを指定
3️⃣index.html を用意してコンテンツを配置
4️⃣docker compose up -d で起動
5️⃣http://localhost にアクセスして確認！

💬 ひとことまとめ

Nginxコンテナは「軽くて速い」Webサーバー。
Docker Composeを使えば、開発環境から検証環境まで簡単に再現できます！