【Docker】Nginxローカル開発環境構築完全ガイド｜6用途別nginx.conf・SPA/WebSocket/リバプロ・mkcert HTTPS・nginx-proxy

project/
├─ compose.yml
├─ nginx/
│   └─ default.conf
└─ src/
    └─ index.html

services:
  nginx:
    image: nginx:1.27-alpine
    ports: ["8080:80"]
    volumes:
      - ./src:/usr/share/nginx/html:ro
      - ./nginx/default.conf:/etc/nginx/conf.d/default.conf:ro
    restart: unless-stopped

server {
  listen 80;
  server_name localhost;

  root /usr/share/nginx/html;
  index index.html;

  location / {
    try_files $uri $uri/ =404;
  }
}

docker compose up -d
# http://localhost:8080 で確認

docker compose down

server {
  listen 80;
  server_name localhost;

  root /usr/share/nginx/html;
  index index.html;

  # 文字コード明示（日本語サイトで重要）
  charset utf-8;

  # gzip圧縮（全レスポンス高速化）
  gzip on;
  gzip_vary on;
  gzip_types text/plain text/css text/javascript application/json application/javascript application/xml+rss image/svg+xml;
  gzip_min_length 1024;
  gzip_comp_level 6;

  # 長期キャッシュ（ハッシュ付きアセットにおすすめ）
  location ~* \.(?:css|js|woff2?|ttf|otf|eot|ico|png|jpg|jpeg|gif|webp|avif|svg)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
    try_files $uri =404;
  }

  # HTMLは毎回fetch（誤キャッシュ対策）
  location ~* \.html$ {
    expires -1;
    add_header Cache-Control "no-cache, must-revalidate";
    try_files $uri =404;
  }

  location / {
    try_files $uri $uri/ =404;
  }
}

server {
  listen 80;
  server_name localhost;

  root /usr/share/nginx/html;
  index index.html;

  # アセットは長期キャッシュ
  location /assets/ {
    expires 1y;
    add_header Cache-Control "public, immutable";
  }

  # SPAフォールバック：存在しないパスはindex.htmlに返す
  location / {
    try_files $uri $uri/ /index.html;
  }

  # HTMLはキャッシュさせない（新バージョン即反映）
  location = /index.html {
    expires -1;
    add_header Cache-Control "no-store, must-revalidate";
  }
}

# ビルドステージ
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

# 配信ステージ
FROM nginx:1.27-alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx/default.conf /etc/nginx/conf.d/default.conf
EXPOSE 80

services:
  nginx:
    image: nginx:1.27-alpine
    ports: ["8080:80"]
    volumes:
      - ./frontend/dist:/usr/share/nginx/html:ro
      - ./nginx/default.conf:/etc/nginx/conf.d/default.conf:ro
    depends_on:
      - api
    networks: [app-net]

  api:
    build: ./backend
    expose: ["3000"]       # 外部公開しない、nginx経由のみ
    environment:
      NODE_ENV: development
    volumes:
      - ./backend:/app
      - /app/node_modules
    command: npm run dev
    networks: [app-net]

networks:
  app-net:

upstream api_backend {
  server api:3000;           # Docker内部DNSで解決
  keepalive 32;               # 接続再利用で高速化
}

server {
  listen 80;
  server_name localhost;

  root /usr/share/nginx/html;

  # /api/ パスはNode.jsへ転送
  location /api/ {
    proxy_pass http://api_backend/;   # 末尾/で/api/を剥がす
    proxy_http_version 1.1;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;

    # 長時間接続のタイムアウト緩和
    proxy_connect_timeout 30s;
    proxy_send_timeout 60s;
    proxy_read_timeout 60s;

    # keepalive
    proxy_set_header Connection "";
  }

  # その他はSPAフォールバック
  location / {
    try_files $uri $uri/ /index.html;
  }
}

# http {} または server {} の外でも定義可能
map $http_upgrade $connection_upgrade {
  default upgrade;
  ''      close;
}

upstream ws_backend {
  server api:3000;
}

server {
  listen 80;

  # WebSocketエンドポイント
  location /ws/ {
    proxy_pass http://ws_backend;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection $connection_upgrade;

    # WebSocket特有の長時間接続
    proxy_read_timeout 86400s;   # 1日
    proxy_send_timeout 86400s;

    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }

  # Socket.IOのfallback（long polling）
  location /socket.io/ {
    proxy_pass http://ws_backend;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection $connection_upgrade;
    proxy_set_header Host $host;
  }
}

services:
  nginx:
    image: nginx:1.27-alpine
    ports: ["8080:80"]
    volumes:
      - ./nginx/default.conf:/etc/nginx/conf.d/default.conf:ro
    networks: [app-net]

  api:
    build: ./backend
    deploy:
      replicas: 3          # 3インスタンス
    expose: ["3000"]
    networks: [app-net]

networks:
  app-net:

# ラウンドロビン（デフォルト）
upstream api_backend {
  server api:3000;                    # Compose内部DNSで3インスタンスに自動分散
}

# 重み付け
upstream api_backend {
  server api1:3000 weight=3;
  server api2:3000 weight=1;
  server api3:3000 backup;             # 他全滅時のみ使用
}

# IPハッシュ（セッション固定）
upstream api_backend {
  ip_hash;
  server api1:3000;
  server api2:3000;
}

# 最小接続数
upstream api_backend {
  least_conn;
  server api1:3000;
  server api2:3000;
}

# ヘルスチェック付き（passive）
upstream api_backend {
  server api1:3000 max_fails=3 fail_timeout=30s;
  server api2:3000 max_fails=3 fail_timeout=30s;
}

upstream auth_service    { server auth:4000; }
upstream user_service    { server users:5000; }
upstream order_service   { server orders:6000; }
upstream frontend        { server web:3000; }

server {
  listen 80;

  # 認証API
  location /api/auth/ {
    proxy_pass http://auth_service/;
    include /etc/nginx/snippets/proxy.conf;
  }

  # ユーザーAPI
  location /api/users/ {
    proxy_pass http://user_service/;
    include /etc/nginx/snippets/proxy.conf;
  }

  # 注文API
  location /api/orders/ {
    proxy_pass http://order_service/;
    include /etc/nginx/snippets/proxy.conf;
  }

  # フロント（Next.jsなど、SSR前提）
  location / {
    proxy_pass http://frontend;
    include /etc/nginx/snippets/proxy.conf;
  }
}

proxy_http_version 1.1;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
proxy_connect_timeout 30s;
proxy_read_timeout 60s;

services:
  nginx:
    image: nginx:1.27-alpine
    ports: ["8080:80"]
    volumes:
      - ./nginx/dev.conf:/etc/nginx/conf.d/default.conf:ro
    depends_on:
      - web
    networks: [app-net]

  web:
    image: node:20-alpine
    working_dir: /app
    volumes:
      - .:/app
    command: npm run dev -- --host 0.0.0.0
    expose: ["5173"]       # Viteの既定
    networks: [app-net]

  api:
    build: ./backend
    expose: ["3000"]
    networks: [app-net]

networks:
  app-net:

map $http_upgrade $connection_upgrade {
  default upgrade;
  ''      close;
}

upstream vite_dev { server web:5173; }
upstream api_dev  { server api:3000; }

server {
  listen 80;

  location /api/ {
    proxy_pass http://api_dev/;
    proxy_http_version 1.1;
    proxy_set_header Host $host;
  }

  # Viteのdev serverへ全て転送（HMR WebSocket含む）
  location / {
    proxy_pass http://vite_dev;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection $connection_upgrade;
    proxy_set_header Host $host;
  }
}

# mkcertインストール（macOS）
brew install mkcert
mkcert -install    # ローカルCAインストール（初回のみ）

# 証明書発行
mkdir -p certs
mkcert -key-file ./certs/local.key -cert-file ./certs/local.crt \
  local.dev app.local.dev localhost 127.0.0.1

services:
  nginx:
    image: nginx:1.27-alpine
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./nginx/https.conf:/etc/nginx/conf.d/default.conf:ro
      - ./certs:/etc/nginx/certs:ro

# HTTPはリダイレクト
server {
  listen 80;
  server_name local.dev;
  return 301 https://$host$request_uri;
}

server {
  listen 443 ssl;
  http2 on;                              # Nginx 1.25.1+はhttp2 on;構文
  server_name local.dev;

  ssl_certificate     /etc/nginx/certs/local.crt;
  ssl_certificate_key /etc/nginx/certs/local.key;

  # モダンなTLS設定
  ssl_protocols TLSv1.2 TLSv1.3;
  ssl_prefer_server_ciphers off;
  ssl_session_timeout 1d;
  ssl_session_cache shared:SSL:10m;

  # 静的／SPAなど既存locationをここに
  root /usr/share/nginx/html;
  location / {
    try_files $uri $uri/ /index.html;
  }
}

# /etc/hosts (macOS/Linux) or C:\Windows\System32\drivers\etc\hosts
127.0.0.1   local.dev app.local.dev

# 起動後
# → https://local.dev/ に鍵マーク付きでアクセス成功

# proxy/compose.yml
services:
  nginx-proxy:
    image: nginxproxy/nginx-proxy:latest
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - /var/run/docker.sock:/tmp/docker.sock:ro
      - ./certs:/etc/nginx/certs:ro
    networks: [proxy-net]

networks:
  proxy-net:

# projects/siteA/compose.yml
services:
  web:
    image: nginx:1.27-alpine
    environment:
      VIRTUAL_HOST: sitea.localhost
      VIRTUAL_PORT: 80
      HTTPS_METHOD: noredirect
    volumes:
      - ./dist:/usr/share/nginx/html:ro
    networks: [proxy-net]

networks:
  proxy-net:
    external: true
    name: proxy_proxy-net

# 共通プロキシを1回だけ起動
docker compose -f proxy/compose.yml up -d

# 各プロジェクト追加
docker compose -f projects/siteA/compose.yml up -d
docker compose -f projects/siteB/compose.yml up -d

# hostsに追加すればブラウザでアクセス可能
# 127.0.0.1   sitea.localhost siteb.localhost

# /etc/nginx/snippets/security-headers.conf

# XSS対策（モダンブラウザはCSPを使う）
add_header X-Content-Type-Options "nosniff" always;
add_header X-Frame-Options "SAMEORIGIN" always;
add_header Referrer-Policy "strict-origin-when-cross-origin" always;
add_header Permissions-Policy "geolocation=(), camera=(), microphone=()" always;

# HTTPS運用時
add_header Strict-Transport-Security "max-age=63072000; includeSubDomains" always;

# 最低限のCSP（実際はプロジェクト固有に）
add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; connect-src 'self';" always;

server {
  listen 443 ssl;
  http2 on;

  # ... 他の設定

  include /etc/nginx/snippets/security-headers.conf;

  location / {
    try_files $uri $uri/ /index.html;
  }
}

# 設定テスト（構文エラーチェック）
docker compose exec nginx nginx -t

# リロード（ゼロダウンタイム）
docker compose exec nginx nginx -s reload

# 完全再起動（reloadで反映されない場合）
docker compose restart nginx

http {
  client_max_body_size 128M;   # アップロードサイズ上限
}

# serverまたはlocationでも設定可能
server {
  client_max_body_size 128M;
  ...
}

# リアルタイム追跡
docker compose logs -f nginx

# access.log／error.logを詳細化（nginx.conf）
http {
  log_format main '$remote_addr - $remote_user [$time_local] "$request" '
                  '$status $body_bytes_sent "$http_referer" '
                  '"$http_user_agent" "$http_x_forwarded_for"';

  access_log /var/log/nginx/access.log main;
  error_log  /var/log/nginx/error.log warn;
}