NginxとDockerでローカル環境を構築

今回はNginxとDockerでローカル環境を構築するための備忘録です。

http://localhost:80/ にアクセスしてindex.htmlを表示するところまでやってみます。

前提

docker-compose コマンドが使用できること。

ディレクトリ構成

(root)/
├── docker-compose.yml
└── nginx
    ├── Dockerfile
    ├── conf.d # Nginxの設定ファイル
    │   └── default.conf
    └── html # ブラウザに表示するルートディレクトリ
        └── index.html

各ファイル内容

docker-compose.yml

version: "3.8"

services:
  nginx:
    container_name: nginx
    build:
      ./nginx
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./nginx/html:/usr/share/nginx/html
      - ./nginx/conf.d:/etc/nginx/conf.d

portは80と443を開けています。
/usr/share/nginx/htmlがブラウザ表示時のルートディレクトリになるので、そこにローカル環境の ./nginx/html が反映されるようにしています。
/etc/nginx/conf.d がNginxの設定ファイル置き場になるので、ローカル環境の /nginx/conf.d が反映されるようにしています。

Dockerfile

FROM nginx:latest

nginxのイメージを引っ張ってきているだけです。追加でインストールしたいものなどカスタマイズしたい場合は、このDockerfile内に追記していくイメージです。

conf.d/default.conf

server {
    listen       80;
    server_name  localhost;
    location / {
        root /usr/share/nginx/html;
        index  index.html index.htm;
    }
}

html/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>Test</h1>
  </body>
</html>

Docker環境構築

以下のコマンドでDocker環境を構築します。

docker-compose up --build

http://localhost:80/ にアクセスしてindex.htmlが内容がブラウザに表示されればOKです。