ALBを使った例

1．CloudFront

1.1 S3へ接続（https://okdysk.com/）

• S3は静的ホスティングに使用。
• ビヘイビア指定以外へのリクエストはS3ページに転送される(デフォルトルール)

1.2 ALBへ接続（https://okdysk.com/react/）

• "/react/*"パスのリクエストはALBを経由してECS（Next.js）へルーティング
• CloudFrontはHTTP（ポート80）でALBに接続される

2．ALB（Application Load Balancer）

2.1 ヘルスチェック

• 一定時間ごとにヘルスチェックが実行される
• ターゲットグループ内のコンテナに対して /react/health に定期的にアクセス
• ステータスコード200を返せば正常とみなされる

2.2 ターゲットグループ

• ECSが起動するFargateタスクのIPが動的に登録される
• ヘルスチェックは /react/health エンドポイントを使用
• ポート3000で待ち受けるECSタスク（Next.jsアプリ）を登録

3．ECS（Fargate）

3.1 サービス・タスク

• Fargateでコンテナを起動し、Next.jsアプリをSSRで提供
• スケーリングや再起動はECSが管理

3.2 コンテナ

• GitHub ActionsでビルドされたNext.jsアプリのDockerイメージを実行
• /react を basePath に指定し、CloudFrontのルーティングと一致させる

4．Github Actionsからのデプロイ

4.1 ECR

• GitHub ActionsでビルドされたDockerイメージをECRにpush
• ECSはECRからpullしてコンテナを起動

4.2 ルーティングと通信経路

• ECSはプライベートサブネット内にあるため、NAT Gateway経由でECRへアクセス
• セキュリティグループで適切にアクセス許可を設定