キャレット合同会社のTomです。タイトルの通り構築する機会があったので備忘録を残します。
ACMで証明書をリクエストする
※ACM=Amazon Certificate Manager
①Cloudfrontは北部バージニアに出来るので、右上リージョンを北部バージニアに変更する
②証明書をリクエストを選択
③パブリック証明書のリクエスト→証明書のリクエスト選択
④ドメイン名を入力して次へ

⑤今回はDNS検証を選択

⑥タグを追加で確定を押下 ※今回未設定
⑦確認とリクエストで確定とリクエストを押下
⑧続行を押した後任意の方法で検証を行う
・お名前.comに”_abcdef~ CNAME _defgh~”といった形式で登録
・Route53で登録等

S3でバケット構築
①バケットを作成を選択
※右上のリージョンはグローバルのまま

②一般的な設定を入力
バケット名:ドメインと同じもの
リージョン:東京
パブリックアクセス設定

③ブロックパブリックアクセスのバケット設定
Lambdaで制御するのでS3側はすべて許可に設定
「現在の設定により、このバケットとバケット内のオブジェクトがパブリックになる可能性があることを承認します。」にチェックを入れる
以降ここがすべて許可になっていることを前提に設定する

④バケットのバージョニング、タグ、暗号化は任意
詳細設定のオブジェクトブロックは無効化のままにする
S3バケット設定追加
①アップロードを選んでhtmlファイルを登録する。

ドラッグドロップでhtmlファイルを追加し一番下のアップロードをクリック
この段階ではindex.htmlとエラーページ用のhtmlを登録しておけばよい
オブジェクトに追加されていれば成功
※アクセスできない場合はファイルを選択してアクションから公開する


②-1
静的ウェブサイトホスティングの設定
プロパティタブの一番下に移動
静的ウェブサイトホスティングの「編集する」ボタンをクリック


②-2
deaultは無効なので下記のように設定する
静的ウェブサイトホスティング:有効にする
ホスティングタイプ:静的ウェブサイトをホストする
インデックスドキュメント:index.html
※インデックスドキュメントアクセス時のトップページとなる
エラードキュメント:errorページ用html
「変更を保存」

③-1
アクセス許可のタブに移動し
アクセスコントロールリスト (ACL)を「編集する」


③-2
S3ログ配信グループのオブジェクト書き込み、バケットACL読み込み&書き込みにチェックを入れて「変更を保存」

④Cloudfront構築後バケットポリーシーを編集する※cloudfrontの項で記載
Cloudfront構築
①Cloudfrontから「Create Distribution」

②「Get Started」

③-1
Origin Settingsを入力
- Origin Domain Name:作成したS3を指定、
ドメイン名を入れてしまうと初期設定が変わるので注意 - Origin Path:null
- Enable Origin Shield:No
- Origin ID:defaultで入る
- Restrict Bucket Access:Yes
- Origin Access Identity:Create a New Identity
※S3バケットに登録するため必須 - Comment:defaultで入る
- Grant Read Permissions on Bucket:No, I Will Update Permissions
- Origin Connection Attempts:3
- Origin Connection Timeout:10
- Origin Custom HeadersHeader NameValue:null

③-2
Default Cache Behavior Settingsを入力
- Viewer Protocol Policy:Redirect HTTP to HTTPS
- Allowed HTTP Methods:GET, HEAD
- Cache and origin request settings:Use legacy cache settings
- Object Caching:Customize
- Minimum TTL:0
- Maximum TTL:0
- Default TTL:0
- Forward Cookies:None (Improves Caching)
- Query String Forwarding and Caching:None (Improves Caching)
使う場合は、Forward all cache based on all - Smooth Streaming:No
- Restrict Viewer Access:No
- Compress Objects Automatically:Yes
- Lambda Function Associations:ここでは設定しない。
- Enable Real-time Logs:No
キャッシュの設定の時間が長いとLambdaの更新時、反映に時間がかかる



③-3
Distribution Settingsを入力
- Price Class:Use All Edge Locations (Best Performance)
- AWS WAF Web ACL:None
- Alternate Domain Names(CNAMEs):S3に設定したものと同じドメイン名を設定
- SSL Certificate:Custom SSL Certificate (example.com):ACMで作ったものを指定
- Custom SSL Client Support: Clients that Support Server Name Indication (SNI) – (Recommended)
- Security Policy TLSv1.2_2019 (recommended)
- Supported HTTP Versions:HTTP/2, HTTP/1.1, HTTP/1.0
- Default Root Object:index.html
- Standard Logging:Off
- S3 Bucket for Logs:null
- Log Prefix:null
- Cookie Logging:off
- Enable IPv6:チェック
- comment:null
- Distribution State:Enabled
④「Create Distribution」
Cloudfront設定追加
①作成したCloudfrontを選択
②エラーページカスタマイズする場合は
「Error Pages」タブの「Create Custom Error Response」から ※割愛

③-1
「Origins and Origin Groups」で「Origin Access Identity(画像赤で隠した部分)」を確認、保持してから
S3のバケットポリーシーを編集する

③-2
S3バケットに移動し「アクセス許可」タブからバケットポリシーを「編集する」


③-3
ポリシーに入力して「変更の保存」
{ "Version": "2012-10-17", "Statement": [ { "Sid": "2", "Effect": "Allow", "Principal": { "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity <<③-1で確認した文字列>>" }, "Action": "s3:GetObject", "Resource": "arn:aws:s3::: <<S3バケット名>> /*" } ] }

lambda構築
①リージョンを北部バージニアにして「関数を作成」
※20201220現在、リージョン東京だとトリガーにcloudfrontが選べない

②
1から作成を選択
関数名を入力
ランタイムはNode.js 10.xを選択
他の設定はいじらず「関数の作成」

③関数を設定

④トリガーを追加

⑤-1トリガーを追加でCloudfrontを選択

⑤-2「Lambda@Edgeへのデプロイ」

⑤-3ディストリビューションを入力
※Distribution IDはCloudfrontのGeneralタブなどで確認できる
Cloudfrontイベント:オリジンレスポンスを選択
「デプロイ時に、この関数の新しいバージョンが上記のトリガーで発行され、利用可能なすべての AWS リージョン間でレプリケートされることに同意します。」にチェック
「デプロイ」
対象サイトが複数ある場合は同様に作成する。

⑥Cloudfrontを確認してstatusがDeployになっていれば完了

終わり( ᐛ )و グッ
コメントを書く