Windows11 WSL2 Ubuntu 24.04 LTS

Docker-compose で Docker nginx 構築

ここまでで Dockerfile を使用して Docker Nginx を構築し そのファイル構成も確認することができました。
引き続き Docker-compose を使用して Docker Nginx を構築して行きます。
Docker-compose を使用した方が実は簡単に Docker Nginx を構築することができます。
compose を使用した Docker コンテナ nginx を作成するフォルダを作ります。
/home/yamada/ のフォルダの直下に
/doc-nginx-c (名前は適当です、分かりやすい名前をつけましょう)
のようなコンテナ名をつけてフォルダ
/home/yamada/doc-nginx-c
を作成し、
この中にコンテナ作成のための以下の設計書-ファイル類を作成し保存します。
例としては
/home/yamada/doc-nginx-c
 L Dokerfile ① 今回は不要
 L docker-compose.yml ② 今回はこれを作成します
 L htdocs ③
   L index.html
   L css 今回は不要
    L style.css
   L img 今回は不要
    L sample.png

のようにファイル類を作成します。
通常、①②③の三つのフォルダ/ファイル名は変えてはいけません。
もっと複雑になる時もあります。
これらはなくても何とかなりますが基本、作成することになります。
しかし今回は、シンプルなコンテナを作成しますので、②のファイルを作成し、コンテナを構築します。
htdocs の中の index.html は動作確認用のファイルです。
index.html の中でスタイル指定や画像表示する場合は css や img ファイルを作成します。
今回は htdocs がドキュメントルートとなり、Web サイトで外部に公開される HTML ファイルや画像データなど を設置する場所になります。

Docker nginx docker-compose ファイル作成

今回は docker-compose.yml という Docker 立ち上げ設定書の機能を利用して、コンテナを立ち上げます。
docker-compose なるテキストファイルに起動に関する基本的なコマンドを入力してコンテナを作成します。
注意すべき点は半角スペースの数を1と決めたら1つ、もう1段階字下げするときは2つ
さらに字下げするときは3つのようにします。
その内容(これを A とします)は以下の通りです。


services:
  web:
    image: nginx
    ports:
      - "8091:80"
    volumes:
      - ./htdocs:/usr/share/nginx/html

実に簡単です。
内容を分解して説明します。

  1. services:

    Docker Compose は複数の Docker 環境を立ち上げることができます。
    今回は nginx と言うコンテナだけを立ち上げますが、ここに続けて記述することにより、 他のコンテナも立ち上げることができます。

  2. image:

    読み込む Docker イメージを指定します。 今回は nginx です。

  3. ports:

    仮想コンピュータと繋ぐポート番号を指定します。
    私の場合 ports:8090 までは使用済みなので、今回は
    ports:8091 を使用します。
    パソコン側で 8091 番ポートにアクセスすると、仮想コンピュータ内の 80ポートに接続されます。
    80番は仮想コンピュータのウェブサーバーのポートを指しています。
    パソコン側でのポート番号指定は 0~65535 までいくつでも良いのですが、 すでに割り当てられている番号は避けてください。
    ウェブサーバーのポートは基本 80 ですので 8001~8099 あたりが良いと思います。

  4. volumes:

    「:」を挟んで左側の値 ./htdocs
    ローカルディレクトリ
    /home/yamada/doc-nginx-c/htdocs
    と右側の値
    /usr/share/nginx/html
    (Docker 内ディレクトリ)
    を接続する設定を記述します。
    ローカル側は相対パス、サーバー側は絶対パスで記述します。
    コンテナ nginx の DocumentRoot ディレクトリのデフォルト値は
    /usr/share/nginx/html
    に設定されているので、これを指定しました。

  5. volumes の効用

    Docker コンテナの中の世界に対して変更を加えたい!と思うことはしばしば起こります。
    この要望に答えてくれるのが volumes 機能です。
    今回の例では、htdocs フォルダに変更内容を記述したファイルを置いてあげれば良いのです。


自分の PC Windows で TeraPad 等を使用して docker-compose.yml が作成できたらこれを保存します。
Windows 側のエクスプローラーにおいて、ネットワークの下に Linux のフォルダがあります。
Linux の中に
Ubuntu-24.04(\\wsl.localhost)
のフォルダがあります。
\\wsl.localhost\Ubuntu-24.04\home\yamada\doc-nginx-c
ここに docker-compose.yml を保存します。
ファイル名は必ず
docker-compose.yml
です。
文字コ-ドは、UTF-8N
BOM なし
改行コ-ドは、LF
です。
\doc-nginx-c
はこのページの最初に作成したフォルダです。

Docker nginx 動作確認用ファイル作成

Docker nginx 動作確認用 index.html ファイルを作成します。
内容は適当です。


<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ドキュメント</title>
</head>
<body>
<p>ハロー!<br>
Docker nginx <br>
docker-compose.yml で起動しました。
</p>
</body>
</html>

自分の PC Windows で TeraPad 等を使用して index.html が作成できたらこれを保存します。
Windows 側のエクスプローラーにおいて、ネットワークの下に Linux のフォルダがあります。
Linux の中に
Ubuntu-24.04(\\wsl.localhost)
のフォルダがあります。
\\wsl.localhost\Ubuntu-24.04\home\yamada\doc-nginx-c\htdocs
ここに index.html を保存します。
文字コ-ドは、UTF-8N
BOM なし
改行コ-ドは、LF
です。

ここまでで、Docker nginx を動作させる準備が終わりました。
引き続き nginx Docker Compose ファイルを実行していきます。


  • nginx Docker Compose ファイル実行 に進む
  • bash シェルを開いて doc-nginx コンテナの構成確認 に戻る
  • Docker nginx Dockerfile ファイル作成 Ⅱ に戻る
  • Dockerfile で Docker nginx 構築 に戻る
  • Docker Compose ファイル実行 に戻る
  • Docker 使用 Web サイト表示 に戻る
  • Docker コンテナ チュートリアルなぜ動く に戻る
  • Docker コンテナ チュートリアル に戻る
  • Docker CE インストール概要 に戻る
  • 70VPS に戻る