CloudFrontでALB（ECS）を配信してみる

当記事は「Next.jsをECS上で動かしてみる」の第9回「CloudFrontでALB（ECS）を配信してみる」になります。

1. DockerでNext.jsアプリを作成してみる
2. ECRにリポジトリを作成してみる
3. ECRにコンテナのイメージをプッシュしてみる
4. VPCを作成してみる（ECSを動かすため用）
5. セキュリティグループを作成してみる（ECSを動かすため用）
6. ECSでNext.jsのアプリを動かしてみる
7. セキュリティグループを作成してみる（ALBを動かすため用）
8. ALBを作成してターゲットグループにECSを指定してみる
9. CloudFrontでALB（ECS）を配信してみる

ディストリビューションを作成

当記事作成時点では、CloudFrontは日本語化があまり進んでおらず、ほとんどが英語となっております。
Distribution name（ディストリビューション名）はわかりやすいものを入力。

Nextをクリック。

オリジン設定

Origin typeはElastic Load Balancerを選択。
OriginでBrowse load balancersをクリック。

ポップアップのRegionでプルダウンからAsia Pcific (Tokyo)を選択、下記の記事で作成したALBにチェックを入れて、Chooseをクリック。

ALBを作成してターゲットグループにECSを指定してみる

オリジン設定でCustomize origin settingsを選択。

ProtocolはHTTPのみを選択、HTTP portは80を入力。

ビヘイビア設定

Cache settingsでCustomize cache settingsを選択。
ビューワープロトコルポリシーでRedirect HTTP to HTTPSを選択。
許可されたHTTPメソッドでGET, HEADを選択。（ブラウザでのWebアクセスのみのため、GETさえ許可すればOK）

誰に見せるでもないサイトなので、キャッシュポリシーでCachingDisabledを選択。
Nextをクリック。

セキュリティ設定

「セキュリティ保護を有効にする」が選択されているはずなので、特に何もせずスクロールしてNextをクリック。

確認

特に問題なければスクロールしてCreate Distributionをクリック。

確認

作成したディストリビューションのドメイン名をコピー。

Nex.jsのウェルカムページが表示されていればOKです。
CloudFront経由でのアクセスの場合、HTTPS通信になっていることもポイントです。

以上になります。
お読み頂き、ありがとうございました。