コンテンツにスキップ

Nginx

Dockerで立ち上げたNginxにローカルで動いているアプリケーションをリバースプロキシする

  • 参考: CloudFront と API Gateway で SPA の CORS 問題をイイ感じに解決する
    • 本番環境と合わせた形でローカルで実現したい.
  • 具体的には次のような状況.
  • 注意
    • フロントエンド・バックエンドともにDocker起動の場合は別の適切な設定がある.
    • ここではあくまでフロントエンド・バックエンドはローカルで別途起動している.
    • 別途起動させている理由はIDEでのデバッグ実行をDockerごしで実現する方法がわかっていないため. あとMacではDockerでのwatchが重くて耐えられなかったため.
  • 以下手順
  • 次のような内容でdocker/nginx/default.confを作る.
    • ポートは適切に設定する.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
server {
    listen       80;
    server_name  localhost;
    proxy_set_header  Host                $host;
    proxy_set_header  X-Real-IP           $remote_addr;
    proxy_set_header  X-Forwarded-Proto   $scheme;
    proxy_set_header  X-Forwarded-Host    $host;
    proxy_set_header  X-Forwarded-Server  $host;
    proxy_set_header  X-Forwarded-For     $proxy_add_x_forwarded_for;

    # フロントエンド
    location / {
        proxy_pass        http://host.docker.internal:5209/;
        proxy_set_header Host $http_host;
    }
    # バックエンド
    location /api/ {
        proxy_pass        http://host.docker.internal:5000/;
    }
}
  • プロジェクトのルート直下のcompose.ymlに次のように書く.
1
2
3
4
5
6
7
8
version: "3"
services:
  nginx:
    image: nginx:latest
    ports:
      - "80:80"
    volumes:
      - ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf
  • あとはdocker compose upで起動する.