概要

進行中のプロジェクトの初期のPoCバージョンを展開するために、1つのAWS EC 2インスタンスにnginx(ウェブサーバ)、ウェブ(frontend)、api(バックエンド)の3つのコンテナを配置し、サーバ側でウェブ、apiアクセスを逆プロキシでルーティングするnginxウェブサーバを構成します.

構成

全体の構造は以下の通りです.

httpポート(80)でnginxを開き、3000ポートでフロントエンド、8080ポートでバックエンド、/パスの呼び出しがフロントエンド、/apiパスの呼び出しがバックエンドを構成します.
フロントエンドとバックエンド間の通信は、パブリックドメインを用いて行われる.これは、バックエンドAPIが外部に開放されなければならないAPIではないが、開発段階では、フロントエンドとバックエンド間の通信が1台のホストから戻されてコストを削減し、将来別のホスト上で行われるため、フロントエンドとバックエンド間の通信は外部ホストと外部ホストによって行われる.通信のように働きます.ホスト上で操作するコンテナの場合は、内部通信で構成してみてください.

開発環境(1台host構成)

本番環境(各ホスト構成)

nginx設定

nginxを逆プロキシとして使用するには、次の手順に従います.confファイルを設定します.上流設定docker-composeで設定したサービス名を<サービス名>として指定します.これはドッキングステーションで同じネットワーク上のコンテナと通信する方法です.

nginx.conf

user  nginx;
worker_processes  auto;
error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;
events {
    worker_connections  1024;
}
http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

	# 백엔드 upstream 설정
    upstream myweb-api {
        server api:8080;
    }

	# 프론트엔드 upstream 설정
    upstream myweb-web {
        server web:3000;
    }

    server {
        listen 80;

		# /api 경로로 오는 요청을 백엔드 upstream 의 /api 경로로 포워딩
        location /api {
            proxy_pass         http://myweb-api/api;
        }

		# / 경로로 오는 요청을 프론트엔드 upstream 의 / 경로로 포워딩
        location / {
            proxy_pass         http://myweb-web/;
        }
    }
    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;

    sendfile        on;
    keepalive_timeout  65;
    include /etc/nginx/conf.d/*.conf;
}

docker-合成設定

docker-compose.yamlは次のように構成されています.Proxyフォルダにあるnginx.confをnginxコンテナに含めます.

フォルダ構造

/
docker-compose.yaml
proxy/
名詞conf

docker-compose.yaml

version: '3'
services:
  nginx:
    image: nginx:1.21.5-alpine
    ports:
      - 80:80
    volumes:
      - ./proxy/nginx.conf:/etc/nginx/nginx.conf
    container_name: myweb-proxy
    depends_on:
      - web
      - api
  web:
    image: frontend-web:latest
    ports:
      - 3000:3000
    container_name: myweb-web
  api:
    image: backend-api:latest
    ports:
      - 8080:8080
    container_name: myweb-api

ここで注意すべき点は、フロントエンドとバックエンドコンテナのポート設定も外部に開く必要があることです.docker-composeのポート設定には、exposeとportsの2種類があります.exposeに設定すると、同じdockerネットワークインタフェース内のコンテナからのみアクセスできます.ポートをportsにマッピングしてこそ、外部からポートを介してアクセスできます.最初は外部との接触点がnginxであり、残りは直接外部に露出しないためexposeとして構成されていたが、フロントエンドがパブリックドメインを介してバックエンドに要求する過程で応答できないという問題が発生した.フロントエンドコンテナのポートが開いていないため、外部から直接アクセスできないという問題が発生する可能性があります.
コンテナ内部に直接外部と通信することがない場合は、どうでもいいです.そうでなければ、逆エージェントの後ろのコンテナでも、ポートを使用して構成することをお勧めします.

結果

前述したように、構成後docker-composite upコマンドを使用してすべてのコンテナを移動し、ルートドメイン(/)で接続が正常であることを確認し、フロントエンドからバックエンドへのAPIでデータが正常であることを確認できます.