【Docker入門】nginxコンテナ

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

ここでは、Docker Composeコマンドを使ったnginxコンテナの構築例を紹介します。

nginxとは

まず、はじめにnginxについて説明しておきます。

　NGINX（エンジンエックス）は、高性能で軽量なWebサーバーおよびリバースプロキシサーバーです。開発者Igor Sysoevによって2004年に初めて公開され、その後オープンソースコミュニティによって継続的に開発されています。

　NGINXは、多くの人気ウェブサイトやウェブアプリケーションで使用されており、その人気はその高いパフォーマンス、信頼性、拡張性によるものです。また、リバースプロキシとしての機能が強力であり、負荷分散やキャッシングなどの機能を提供します。

　さらに、NGINXはイベント駆動アーキテクチャを採用しており、シングルプロセスで複数の同時接続を処理できるため、効率的なリソース利用が可能です。これにより、大規模なトラフィックを処理する場合でも、高いパフォーマンスを維持できます。

　NGINXは、ウェブサーバーとしてだけでなく、プロキシサーバーやロードバランサーとしても広く使用されており、その柔軟性と拡張性はさまざまなニーズに対応することができます。

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

nginxコンテナの構成

以下のようにnginxコンテナを構成します。

　ローカルホストのカレントディレクトリ「./」とnginxコンテナの「/usr/share/nginx/html」をバインドマウントさせ、ローカルでホームページの編集が行えるようにします。

nginxコンテナの作成

「compose.yaml」を作成して、nginxコンテナを作成します。

不要なDockerオブジェクトの削除

まず、不要なDockerオブジェクトをすべて削除しておきます。

以下のコマンドを実行します。

・「docker system prune -a」コマンドを実行します。

Are you sure you want to continue? [y/N] の質問には「y」と入力します。

PS C:\Users\joeac> docker system prune -a
WARNING! This will remove:
  - all stopped containers
  - all networks 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
Deleted Containers:
（略）

・「docker system prune -a」コマンドで削除されなかったDockerオブジェクトは、個別に削除しておきます。

環境によって削除されずに残っているDockerオブジェクトは異なります。

compose.yaml の作成

ディレクトリの作成と移動

Docker Composeでコンテナを作成するには、「compose.yaml」ファイルが必要になります。

　デフォルトでは、カレントディレクトリにある「compose.yaml」ファイルが読み込まれるため、作業ディレクトリに移動しておきます。

・「cd desktop/docker」コマンドを実行します。

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

　「compose.yaml」ファイルを保存する「nginx1」ディレクトリを作成して、作成したディレクトリに移動します。次のコマンドを実行します。

「mkdir nginx1」コマンド
「cd nginx1」コマンド

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

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

Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d----          2024/04/14    23:59                nginx1

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

VSCodeの起動

VSCodeで「compose.yaml」ファイルを作成します。

・「code compose.yaml」コマンドを実行します。

PS C:\Users\joeac\Desktop\docker\nginx1> code compose.yaml

VSCodeが起動します。

「compose.yaml」ファイルの編集

・「compose.yaml」ファイルを以下のように編集して保存します。

services:
  nginx:
    image: nginx:latest
    container_name: nginx_container
    ports:
      - "80:80"
    volumes:
      - ./:/usr/share/nginx/html

定義内容の解説

「compose.yaml」ファイルの定義を解説します。

項目	説明
services	コンテナ化されるサービスを定義するセクション。
nginx	サービス名。nginxを起動するコンテナを指定。
image	使用するDockerイメージを指定。ここでは、最新のnginxイメージを使用。
container_name	コンテナの名前を指定。ここでは、"nginx_container"という名前を指定。
ports	ポートのマッピングを指定。ホストのポート80をコンテナのポート80にマッピング。
volumes	ボリュームのマッピングを指定。ホストのカレントディレクトリをnginxコンテナのhtmlディレクトリにバインドマウント。

「compose.yaml」ファイルの定義

　このcompose.yaml ファイルは、nginxをDockerコンテナとして起動し、ホストのポート80をNGINXのポート80にマッピングし、またホストのカレントディレクトリをnginxコンテナのhtmlディレクトリにマウントしています。これにより、nginxコンテナ内のウェブコンテンツをホスト側で編集しやすくなります。

TOPページの「index.html」

TOPページの「index.html」を作成します。

VSCodeの起動

VSCodeで「index.html」ファイルを作成します。

・「code index.html」コマンドを実行します。

PS C:\Users\joeac\Desktop\docker\nginx> code index.html

VSCodeが起動します。

「index.html」ファイルの編集

・「index.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;
            margin: 0;
            padding: 0;
            background-color: #e0ffe0; /* 淡いグリーン */
        }
        .container {
            width: 80%;
            margin: auto;
            text-align: center;
            padding: 50px 0;
        }
        h1 {
            color: #333;
        }
        p {
            color: #666;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Welcome to NGINX</h1>
        <p>This is a simple HTML page served by NGINX.</p>
    </div>
</body>
</html>

コンテナの作成と実行

「docker compose up -d」コマンドを実行します。

このコマンドは、「compose.yaml」ファイルを配置した場所で実行する必要があります。

C:\Users\joeac\Desktop\docker\nginx1> docker compose up -d
[+] Running 8/8
 ✔ nginx 7 layers [⣿⣿⣿⣿⣿⣿⣿]      0B/0B      Pulled             6.4s
   ✔ 13808c22b207 Already exists                               0.0s
   ✔ 6fcdffcd79f0 Pull complete                                2.0s
   ✔ fbf231d461b3 Pull complete                                0.7s
   ✔ c9590dd9c988 Pull complete                                0.9s
   ✔ b4033143d859 Pull complete                                1.6s
   ✔ abaefc5fcbde Pull complete                                1.6s
   ✔ bcef83155b8b Pull complete                                2.3s
[+] Running 1/2
 - Network nginx1_default     Crea...                          0.5s
 ✔ Container nginx_container  S...                             0.5s

nginxコンテナへの接続

・Webブラウザを起動して、URLに「localhost」と入力します。

TOPページが表示されます。