CloudFrontを久々に構築しましたが、UI変更や機能が追加されていたので、メモしておきます。
今回はS3オリジンで静的ファイル(SPAのNuxtアプリ)配信用で構築しています。

S3作成

コンテンツ用とログ用のバケットを作成します。

ログ用はACLを有効にしないとCloudFront作成時にエラーになります。後からでも変更できます。
> The S3 bucket that you specified for CloudFront logs does not enable ACL access: (バケット名).s3.amazonaws.com

コンテンツ用

https://s3.console.aws.amazon.com/s3/bucket/create?region=ap-northeast-1

バケットを作成
	一般的な設定
		バケット名: (ドメイン名) ※世界中で一致であれば何でも良いけど、解りやすいようにドメイン名にしました。
	[バケットを作成]



ログ用

バケットを作成
	一般的な設定
		バケット名: logs-(ドメイン名) ※同様に世界中で一致であれば何でも良い。
	オブジェクト所有者
		● ACL 有効
		● オブジェクトライター
	[バケットを作成]



<以降はデフォルトのまま>

後からACLを有効にする

CloudFront

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

https://us-east-1.console.aws.amazon.com/cloudfront/v3/home?region=ap-northeast-1#/distributions/create

ディストリビューションを作成
	オリジン
		オリジンドメイン: (コンテンツ用のS3バケット)
		名前: (自動で入るのでそのまま)
		S3 バケットアクセス
			● はい、OAI を使用します (バケットは CloudFront のみへのアクセスとなるように制限できます)
			オリジンアクセスアイデンティティ
				[新しい OAI を作成]
			バケットポリシー
				● はい、バケットポリシーを自動で更新します
		オリジンシールドを有効にする
			● はい
			オリジンシールドリージョン
				アジアパシフィック (東京) ap-northeast-1
	デフォルトのキャッシュビヘイビア
		ビューワープロトコルポリシー
			● Redirect HTTP to HTTPS
		許可された HTTP メソッド
			● GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE
		HTTP メソッドをキャッシュ
			■ オプション
	設定
		料金クラス
			● 北米、欧州、アジア、中東、アフリカを使用
		代替ドメイン名 (CNAME)
			(ドメイン名)
		カスタム SSL 証明書
			(ACMで作成するか作成した証明書を選択)
		デフォルトルートオブジェクト
			index.html
		標準ログ記録
			● オン
		S3 バケット
			(ログ用のバケットを選択)
	[ディストリビューションを作成]







エラーページ設定

存在しないURLにアクセスするとAccessDeniedのXMLが表示されるので、S3に置いたHTMLが表示されるように設定を変えておきます。

エラーページ
	[カスタムエラーレスポンスを作成]

404かと思いきや、403でした。念の為、4xx系(400,403,404)すべて設定しました。

カスタムエラーレスポンスを作成
	エラーレスポンス
		HTTPエラーコード: 400:Bad Request, 403: Forbidden, 404: Not Foundでそれぞれ設定
		エラーレスポンスをカスタマイズ
			●はい
		レスポンスページのパス: /404.html	※S3に設置したファイル
		HTTPレスポンスコード: 400:Bad Request, 403: Forbidden, 404: Not Foundでそれぞれ設定
	[変更を保存]

500も設定しましたが、403になってしまう。急がないので別の機会に調べます。
6. エラーページで設定したページが返却される

追記: Nuxtでトップ以外のURLを直打ちすると403になる

S3に対象のファイルが無いからですね。
403の時に/index.htmlに飛ばしてあげればOK
ただ、ステータスは、本当に無い時と区別が付かないので、200で設定するしかない。

カスタムエラーレスポンスを編集
	エラーレスポンス
		HTTPエラーコード: 403: Forbidden
		エラーレスポンスをカスタマイズ
			●はい
		レスポンスページのパス: /index.html
		HTTPレスポンスコード: 200: OK
	[変更を保存]

参考: CloudFront+S3環境上のSPA(Angular)で「/」以外のURLでリロードした場合に403(access denied)エラーとなる時の対処法 | DevelopersIO

ファイル設置

S3にファイル設置すれば完成。
今回の成果物: https://nuxtapp.nightonly.com/

awsコマンド使うと簡単ですね。

Nuxtアプリのパスで、ファイルを生成
% yarn generate

ドライラン
% aws s3 sync --dryrun --exact-timestamps --delete --exclude '.*' ./dist s3://nuxtapp.nightonly.com/

バケットに転送
% aws s3 sync --exact-timestamps --delete --exclude '.*' ./dist s3://nuxtapp.nightonly.com/

キャッシュ削除(無効リクエスト/invalidation)

キャッシュが効いているので、必要に応じて「キャッシュ削除」も忘れずに。
※短いTTLのキャッシュポリシーを作成・設定しておくと削除不要なので楽ですね。
 キャッシュが効くので、大量アクセスにも対応できる。
 メモ:Managed-Amplifyを設定したらエラーになりました。

キャッシュポリシーを作成
	詳細
		名前: CachingShort
	TTL設定
		最小TTL: 1
		最大TTL: 300	※5分
		デフォルトTTL: 300
	[作成]

awsコマンドでやるならこんな感じ。

% aws cloudfront create-invalidation --distribution-id E1RYX6UROY72NN --paths "/*"
{
    "Location": "https://cloudfront.amazonaws.com/2020-05-31/distribution/E1RYX6UROY72NN/invalidation/IT1IQA4V1L1O",
    "Invalidation": {
        "Id": "IT1IQA4V1L1O",
        "Status": "InProgress",
        "CreateTime": "2022-03-11T08:27:13.788000+00:00",
        "InvalidationBatch": {
            "Paths": {
                "Quantity": 1,
                "Items": [
                    "/*"
                ]
            },
            "CallerReference": "cli-1646987232-669143"
        }
    }
}

ステータス確認 ※上記のIdも必要
% aws cloudfront get-invalidation --distribution-id E1RYX6UROY72NN --id IT1IQA4V1L1O
{
    "Invalidation": {
        "Id": "IT1IQA4V1L1O",
        "Status": "Completed",
        "CreateTime": "2022-03-11T08:27:13.788000+00:00",
        "InvalidationBatch": {
            "Paths": {
                "Quantity": 1,
                "Items": [
                    "/*"
                ]
            },
            "CallerReference": "cli-1646987232-669143"
        }
    }
}

キャッシュ削除の料金

ちなみにキャッシュ削除は、月1,000パスを超えると有料です。
世界中のキャッシュサーバーに削除依頼をする為だと思われます。

料金 – Amazon CloudFront | AWS

月間で無効をリクエストしたパスの最初の 1,000 パスまでは追加料金なし。それ以降は、無効をリクエストしたパスごとに 0.005 USD かかります。

ファイルの無効化 – Amazon CloudFront

無効化パスを送信する料金は、無効にするファイルの数に関係なく同じです。つまり、1 つのファイル (/images/logo.jpg) であっても、ディストリビューションに関連付けられたすべてのファイル (/*) であっても同じです。

CloudFront(S3オリジン)構築とawsコマンド(S3, CloudFront)メモ” に対して1件のコメントがあります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です