構成図
前提条件
- EC2にSpring Bootアプリをデプロイ済み
- S3にAngularアプリをデプロイ済み
- お名前ドットコムなどで独自ドメイン取得・Route53とお名前ドットコムネームサーバー設定済み
- バージニア北部リージョン(CloudFront用)・東京リージョン(ロードバランサ用)にそれぞれ独自ドメイン用の証明書を作成済み
手順①CloudFrontディストリビューションをS3オリジンで作成する
- Origin or Origin Groupで事前に準備していたS3を選択
- Viewer Protocol PolicyはRedirect HTTP to HTTPSを選択
- Alternate Domain Names(CNAMEs)に独自ドメインを入力
- SSL CertificateはCustom SSL Certificateを選択・事前にACMで準備していた証明書を選択
- Default Root Objectはindex.html
手順②ロードバランサを作成する
- リスナーはHTTPS : 443を追加
- ターゲットグループはEC2を選択
- ターゲットグループのポートはSpring Bootのポートを選択する(デフォルトは8080)
- SSL Certificateは事前にACMで準備していた証明書を選択
手順③Route53を編集する
- レコード名をwww.{独自ドメイン}・値をエイリアスをONにして手順①で作ったCloudFrontのディストリビューションを選択してAタイプのレコードを作成する(エイリアス経由で値は設定すること・DNS名などをそのままコピペで入れたりするのはNG)
- レコード名任意・値をエイリアスをONにして、手順②で作ったロードバランサを選択してAタイプのレコードを作成する(エイリアス経由で値は設定すること・DNS名などをそのままコピペで入れたりするのはNG)
手順④AngularのhttpリクエストURLをソースに記述する
AngularのhttpリクエストURLは
https://{手順③で作成した、ロードバランサを値に持つAタイプのレコード}
手順⑤Spring Bootの@CrossOriginに入力
@CrossOriginに入力するURLは
https://{手順③で作成した、CloudFrontを値に持つAタイプのレコード}
手順⑥AngularをS3・Spring BootをEC2にそれぞれデプロイし直す
そのままになります。
感想
Route53でCloudFrontとロードバランサのレコードをそれぞれ別のレコード名にして作成することや、そもそもロードバランサでSSL終端をする場合のAngularhttpリクエストの宛先はどこか、などかなり詰まりました。