nginxを初めて触った時のメモです。
動作はlocalhostで「Hello, World!」するだけです。

初めにデフォルトの状態でコンテナを起動し、ポートとドキュメントルートの設定がどこで行われているか確認します。

その後設定を変更し、再起動後のコンテナで独自の設定が反映されていればOKです。

nginxの公式イメージ

デフォルトの状態でコンテナを起動する

構成

.
├── docker-compose.yaml
└── nginx
    └── html
        └── index.html

docker-compose.yamlを作成

docker-compose.yaml

version: '3'
services:
  web:
    image: nginx:1.20.2
    volumes:
      # コンテナはデフォルトのドキュメントルートを指定
      - ./nginx/html:/usr/share/nginx/html
    ports:
      # コンテナはデフォルトのポートを指定
      - "8080:80"

index.htmlを作成

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>index</title>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>

コンテナを起動

$ docker compose up -d

http://localhost:8080/へアクセスすると、ブラウザに「Hello, World!」が表示されます。

デフォルトの設定を確認

nginxの設定ファイルは/etc/nginx/nginx.confです。
コンテナ内で確認します。

% docker compose exec web cat /etc/nginx/nginx.conf

nginx.confからconf.d/のconfファイルがincludeされていることが分かります。

nginx.conf

# 一部抜粋
include /etc/nginx/conf.d/*.conf;

今回使用したイメージでは、conf.d/配下のconfファイルはdefault.confのみです。
内容を確認します。

$ docker compose exec web cat /etc/nginx/conf.d/default.conf

やはりdefault.confの設定がデフォルトとして反映されているようです。
listenディレクティブでポート、locationディレクティブでドキュメントルートが指定されています。

default.conf

# コメント部分は削除
server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

設定変更後にコンテナを起動する

ポートとドキュメントルートの設定を変更します。
ホスト側でdefault.confを作成し、コンテナ起動時にコンテナ側のdefault.confへ上書きして設定を反映させます。

構成

.
├── docker-compose.yaml
└── nginx
    ├── default.conf         # 追加 
    └── html
        ├── index.html
        └── test_index.html  # 追加

default.confを作成

独自のポートとドキュメントルートを指定します。
動作検証が目的なので、設定は最低限の内容にとどめています。

default.conf

server {
    # 10080番ポートを使用
    listen       10080;

    # パスに対応したドキュメントルートを設定
    location / {
        # ディレクトリ
        root   /usr/share/nginx/test_html;
        # トップページ
        index  test_index.html;
    }
}

test_index.htmlを作成

test_index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>test index</title>
</head>
<body>
<p>test Hello, World!</p>
</body>
</html>

docker-compose.yamlの設定を変更

docker-compose.yaml

version: '3'
services:
  web:
    image: nginx:1.20.2
    volumes:
      # コンテナのdefault.confを上書き
      - ./nginx/default.conf:/etc/nginx/conf.d/default.conf
      # コンテナのドキュメントルートを変更
      - ./nginx/html:/usr/share/nginx/test_html
    ports:
      # コンテナのポートを変更
      - "8080:10080"

コンテナを再起動

$ docker compose down
$ docker compose up -d

localhost:8080へアクセスすると、ブラウザに「test Hello, World!」が表示されます。
コンテナのdefault.confもホストの設定で上書きされていることが確認できます。

$ docker compose exec web cat /etc/nginx/conf.d/default.conf

初歩的な部分ですが、設定を反映するまでの仕組みを知ることができました。
参考にしてください。

採用PR

弊社で一緒に働く仲間を募集しています。
全てのオタクを幸せにしたい方、是非ご覧ください！

nginx公式イメージのポートとドキュメントルートを変更する