はじめに
前回の「AWS SPAをALB＋S3でセキュアに公開！」の続きです！
今回は、AWS 上で Vue.js などの SPA（Single Page Application）を安全に公開する構成として、以下のサービスを組み合わせた実装手順を解説します。
採用する構成
-
S3
- SPA（Vue.js）の静的ファイルを配置
-
ALB（Application Load Balancer）
- HTTPS 終端
- S3 へのコンテンツ配信
- / アクセスを /index.html に変換（SPA 対応）
-
Amazon Cognito
- マネージドログイン画面による認証
- ALB の認証機能と連携
-
ACM
- 独自ドメイン（例：https://test.co.jp）用の SSL 証明書
全体構成図（イメージ）
[ Browser ]
|
| https://test.co.jp
v
[ ALB (HTTPS) ]
|
| 認証（Cognito）
v
[ S3 Bucket ]
└ index.html
└ assets/*
手順
1. SPA（Vue.js）をビルドして S3 に配置
npm run build
生成された dist/ 配下のファイルを S3 バケットにアップロード。
- バケットは 非公開
- 静的ウェブホスティングは 無効で OK
2. S3 バケットポリシーを ALB からのみ許可
ALB からのアクセスのみ許可するため、以下のようなバケットポリシーを設定。
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Principal": {
"Service": "elasticloadbalancing.amazonaws.com"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::your-bucket-name/*"
}
]
}
3. ALB を作成（HTTPS）
- ALB を インターネット向けで作成
- リスナー
- HTTP（80） → HTTPS（443）へリダイレクト
- HTTPS（443） → ターゲットグループ
4. ALB のターゲットグループに S3 を設定
- ターゲットタイプ：IP
- プロトコル：HTTPS
- エンドポイント：S3 の リージョンエンドポイント
※前回と一緒
5. SPA 対応：/ を /index.html に変換
ALB の リスナールールで以下を設定。
ルール例
- 条件
- パス：/
- アクション
- 転送先を書き換え：/index.html
※前回と一緒
6. Cognito ユーザープールを作成
- 認証方式：メールアドレス
- MFA：任意
- ユーザー登録：セルフサインアップ可（用途に応じて）
マネージドログイン設定
- アプリクライアントを作成
- シークレット：無効
- コールバック URL
https://test.co.jp/oauth2/idpresponse
7. ALB と Cognito を連携（認証設定）
ALB の HTTPS リスナーに以下のアクションを追加。
認証アクション
- 認証タイプ：OIDC
- 認証プロバイダー：Amazon Cognito
- 設定内容
- ユーザープール
- アプリクライアント
- ドメイン
処理フロー
- 未ログインで ALB にアクセス
- Cognito マネージドログイン画面へリダイレクト
- ログイン成功
- ALB → S3 → SPA 表示
8. 動作確認
- ブラウザでアクセス（
https://test.co.jp） - Cognito のログイン画面が表示される
- ログイン後、Vue.js SPA が表示される
おわりに
これで、"認証"を含むセキュアな構成が出来上がりました！
細かい部分は微調整が必要ですが、SPAで行う環境であればイケてるんじゃないかと思います。
ただ、全てALBを通過させるので、スピードなどがちょっと心配です。
次回は、よくある「CloudFront + S3」との比較を記事にしたいと思います。
参考（感謝）
- AIに聞きながら
- 経験者にご教授頂きながら