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

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

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

ACMで証明書をリクエストする

※ACM=Amazon Certificate Manager
①Cloudfrontは北部バージニアに出来るので、右上リージョンを北部バージニアに変更する
②証明書をリクエストを選択

ACM手順1と2


③パブリック証明書のリクエスト→証明書のリクエスト選択

ACM手順3
④ドメイン名を入力して次へ

ACM手順4

⑤今回はDNS検証を選択

ACM手順5

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

ACM手順8

S3でバケット構築

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

s3手順1

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

s3手順2

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

s3手順3

④バケットのバージョニング、タグ、暗号化は任意
 詳細設定のオブジェクトブロックは無効化のままにする

S3バケット設定追加

①アップロードを選んでhtmlファイルを登録する。

S3設定追加1_1

ドラッグドロップでhtmlファイルを追加し一番下のアップロードをクリック
この段階ではindex.htmlとエラーページ用のhtmlを登録しておけばよい
オブジェクトに追加されていれば成功

※アクセスできない場合はファイルを選択してアクションから公開する

S3設定追加1_2
S3設定追加1_3

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

S3設定追加2-1_1
S3設定追加2-1_2

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

S3設定追加2-2

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

S3設定追加3-1_1
S3設定追加3-1_2

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

S3設定追加3-2

④Cloudfront構築後バケットポリーシーを編集する※cloudfrontの項で記載

Cloudfront構築

①Cloudfrontから「Create Distribution」

Cloudfront手順1

②「Get Started」

Cloudfront手順2

③-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

Cloudfront手順3-1

③-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の更新時、反映に時間がかかる
Cloudfront手順3-2_1
Cloudfront手順3-2_2

③-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」から ※割愛

Cloudfront設定追加2

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

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

Cloudfront設定追加3-2_1

③-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バケット名>> /*"
        }
    ]
}
Cloudfront設定追加3-3

lambda構築

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

lambda手順1


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

lambda手順2

③関数を設定

lambda手順3

④トリガーを追加

lambda手順4

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

lambda手順5-1

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

lambda手順5-2

⑤-3ディストリビューションを入力
※Distribution IDはCloudfrontのGeneralタブなどで確認できる

Cloudfrontイベント:オリジンレスポンスを選択
「デプロイ時に、この関数の新しいバージョンが上記のトリガーで発行され、利用可能なすべての AWS リージョン間でレプリケートされることに同意します。」にチェック
「デプロイ」
対象サイトが複数ある場合は同様に作成する。

lambda手順5-3

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

lambda手順6

終わり( ᐛ )و グッ

お問い合わせ

キャレット合同会社へのお問い合わせやご相談などがありましたら、以下のメールフォームよりお気軽にご連絡ください。

IT基盤支援カテゴリの最新記事