Nginx + Dockerで静的サイトをサーブする

問題

ビルド済みの静的サイトをローカルやサーバーで素早くサーブしたいのですが、Node.jsサーバーを書くのは大げさです。

解決方法

# docker-compose.yml
version: '3'
services:
  nginx:
    image: nginx
    ports:
      - "80:80"
    volumes:
      - ./dist:/usr/share/nginx/html:ro

docker compose up -d

これだけです。./distフォルダにビルド成果物を入れれば、http://localhostからアクセスできます。

ポイント

• :ro（read-only）でマウントすると、コンテナ内から誤ってファイルを変更することを防げます。本番環境では必ず付けることをお勧めします。
• Nginx公式イメージのデフォルトのdocument rootが/usr/share/nginx/htmlなので、設定ファイルなしでそのまま動作します。
• SPAルーティングが必要な場合は、カスタムnginx.confにtry_files $uri $uri/ /index.html;を追加してください。それまではこの設定だけで十分です。