【備忘録】S3＋Cloudfront+Lambdaで静的WEBサイトを構築した

キャレット合同会社のTomです。タイトルの通り構築する機会があったので備忘録を残します。

1. ACMで証明書をリクエストする
2. S3でバケット構築
3. S3バケット設定追加
4. Cloudfront構築
5. Cloudfront設定追加
6. lambda構築

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バケット名>> /*"
        }
    ]
}