はじめに
SPA（Vue.js）を AWS で公開する場合、
- CloudFront + S3
- ALB + Cognito
- ECS（Fargate）による API 実行
を どう組み合わせるか は悩みどころです。
本記事では、
- Route53 → CloudFront
- CloudFront → ALB
- ALB で Cognito 認証を実施
- ALB のルールで SPA のファイルパスを制御
- SPA / API ともに認証必須
という構成で、
ログインしないと画面そのものにアクセスできない Web システムを構築した事例を紹介します。
全体構成
構成の考え方
- エントリポイントは CloudFront
- 認証・ルーティングは ALB に集約
- S3 は非公開（ALB 経由のみ）
- アプリ側に認証ロジックを持たせない
システム構成図（イメージ）
[ User ]
|
| https://dev.test.cm
v
[ Route53 ]
|
v
[ CloudFront ]
|
v
[ ALB ]
| (Cognito 認証)
|
+--> [ S3 (Vue.js) ]
|
+--> [ ECS Fargate (API) ]
|
v
[ Aurora PostgreSQL ]
CloudFront は配信・キャッシュに専念し、
認証と制御は ALB 側で行う構成です。
処理の流れ
① ユーザーアクセス
- ユーザーが
https://dev.test.cmにアクセス - Route53 → CloudFront へルーティング
- CloudFront のオリジンとして ALB に転送
② Cognito マネージドログイン
- ALB のリスナールールで Cognito 認証をチェック
- 未認証の場合
→ Cognito のマネージドログイン画面へリダイレクト - 認証成功後、ALB にリダイレクト
③ SPA（Vue.js）の配信
- 認証済みユーザーのみ
- ALB → S3 から
index.htmlを取得 - Vue.js SPA が表示される
SPA 向けパス制御
SPA のルーティングに対応するため、
/*
などのアクセスは
ALB のルールで /index.html に変換しています。
④ APIアクセス
- Vue.js から API を呼び出し
- CloudFront → ALB
- Cognito 認証を確認
- ALB → ECS Fargate（Spring Boot API）
- Aurora PostgreSQL へアクセス
⑤ バッチ処理
- EventBridge のスケジュールで起動
- ECS Fargate のバッチタスクを実行
- Aurora PostgreSQL を操作
- 処理完了後、自動停止
ざっくりの構築手順
① Route53 / SSL
- Route53 でドメイン作成（例：dev.test.cm）
- ACM で SSL 証明書発行
- CloudFront に関連付け
② CloudFront
- オリジン：ALB
- HTTPS 強制
- キャッシュポリシー設定
③ Cognito
- User Pool 作成
- マネージドログイン有効化
- コールバック URL に ALB の URL を設定
④ ALB
- HTTPS リスナー作成
- リスナールール
- Cognito 認証
- SPA パスを
/index.htmlに変換 - 転送先
- S3（Vue.js）
- ECS（API）
⑤ S3（Vue.js）
- Vue.js をビルド
- S3 に配置
- バケットは非公開
- 静的 Web ホスティングは使用しない
⑥ ECS / ECR
- Spring Boot（API / バッチ）を Docker 化
- ECR に push
- ECS Fargate サービス / タスク作成
⑦ DB
- Aurora PostgreSQL 作成
- ECS からの接続を許可（Security Group）
ポイント
① CloudFront × ALB の役割分離
| 役割 | サービス |
|---|---|
| CDN / キャッシュ | CloudFront |
| 認証 / ルーティング | ALB |
| 実行 | ECS（Fargate） |
| 静的ファイル | S3 |
| DB | Aurora PostgreSQL |
② SPA を完全に認証必須にできる
- ログイン前に画面を表示しない
- URL 直叩き防止
- 社内システム・管理画面向け構成
③ 認証ロジックをアプリに持たせない
- 認証は ALB + Cognito に集約
- Spring Boot は業務ロジックに専念
- 実装と保守がシンプル
④ SPA のパス制御を ALB で完結
-
/users/1→/index.html - フロント実装を汚さない
- CloudFront Functions 不要
おわりに
本構成により、
- CloudFront のパフォーマンス
- ALB + Cognito の強固な認証
- SPA に最適なパス制御
- ECS Fargate による運用負荷削減
をすべて両立できました。
SPA を
「公開サイト」ではなく「業務システム」 として運用したい場合、この構成は非常に有効だと感じています。
参考（感謝）
- AIに聞きながら