🍑

ECS(Fargate)で起動したNginxコンテナの前段にCloudFrontを配置してみる

2023/10/24に公開

概要

以前、

ECSでNginxコンテナを起動し「Hello Wolrd」を表示してみる
独自ドメイン＆HTTPS化する

ということをやりました（下記の記事です）。

今度は、この前段にCloudFrontを配置してみます。
※全ての作業は以前の記事を前提としています。

構成図

CloudFront用のSSL/TLS証明書を取得する

以前、ALB用のSSL/TLS証明書は取得済みですが、CloudFrontにも別途証明書が必要です。

CloudFrontはグローバルサービスのため、米国東部(バージニア北部)リージョンで発行されたACMのみ使用できます。そのため、ALBに紐付けた証明書と同内容の証明書を米国東部(バージニア北部)リージョンで再度作成します。


証明書タイプ	パブリック証明書をリクエスト
ドメイン名	`sy-test-domain.com`
検証方法	DNS検証
キーアルゴリズム	RSA 2048

CNAME名とCNAME値はALB証明書の時と同内容です。既にCNAMEレコードにこの名前と値は登録済みですので、CNAMEレコードの追加は不要です。しばらくすると証明書のステータスが成功になりました。

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

AWSコンソールのCloudFrontの「CloudFrontディストリビューションを作成」を押します。


オリジンドメイン	ALBを選択します
プロトコル	HTTPSのみ
オブジェクトを自動的に圧縮	Yes
ビューワープロトコルポリシー	HTTPS only
キャッシュキーとオリジンリクエスト	`Cache policy and origin request policy (recommended)`にチェック
キャッシュポリシー	CachingOptimized
ウェブアプリケーションファイアウォール (WAF)	セキュリティ保護を有効にしない（WAFは有料のため）
料金クラス	北米と欧州のみを使用
代替ドメイン名(CNAME)	`sy-test-domain.com`
カスタム SSL 証明書	米国東部(バージニア北部)リージョンで作成した証明書

以上の要領で、「ディストリビューションを作成」を押します。

Route 53のエイリアスレコードを更新する

現在、ALBが指定されているAレコードを修正し、CloudFrontに変更します。

これによって、sy-test-domain.comにアクセスすると、ALBではなくCloudFrontにルーティングされるようになります。結果として、CloudFront > ALB > ECSという順番でルーティングされ、nginxによる「Hello World!!」が表示されるはずです。

CloudFront設定後の動作確認

sy-test-domain.comにアクセスして、「Hello World!!」が表示されることを確認します。

403エラー

sy-test-domain.comにアクセスすると、４０３エラーになりました。

対処法1: デフォルトルートオブジェクトの追加

デフォルトルートオブジェクトにindex.htmlを追加します。

デフォルトルートオブジェクトは、CloudFrontコンソール > 一般タブの「編集」ボタンから変更できます。

対処法2: オリジンリクエストポリシーの設定

キャッシュキーとオリジンリクエストのオリジンリクエストポリシーの設定を追加します。

再度確認

上記の対処をおこなった上で、再度sy-test-domain.comにアクセスします。すると、「Hello World!!」が表示されました。

また、CloudFrontを経由することで、本当にキャッシュと圧縮がされているかも確認します。

キャッシュの確認

開発者ツールのNetworkでResponseヘッダを確認し、X-Cache: Hit from cloudfrontがあることを確認します。これがあればキャッシュされています。

圧縮の確認

圧縮を示す内容が見当たらないため、Disable cacheにチェックを付けて再度読み込みます。すると、Content-Encoding: brが確認できました。