More than 5 years have passed since last update.

S3 + Cloud Front で静的サイトを配信

Posted at 2019-10-27

※自分用のメモです。間違っている箇所がありましたら、教えて頂けると幸いです。

S3+CloudFrontで静的サイトを配信する

Route53でドメイン購入

登録済みドメイン > ドメインの登録
ドメイン名： sample-mypage.com で購入&登録

Certificate Manager(ACM) でSSL証明書発行

httpsにする場合、SSL証明書が必要なので、今回はACMで発行します。

※CloudFrontでACMで取得した証明書を利用する場合、
米国東部 (バージニア北部) us-east-1 で取得しないといけません。

CloudFrontとACM連携でハマった話。

証明書のリクエスト > パブリック証明書のリクエスト を選択
ドメイン名の追加で*.sample-mypage.comと入力
検証方法の選択でDNSの検証を選択
CNAME レコードを作成を要求されますが、ここでは続行をクリック
以下の画面が表示されるので、Route53でのレコードの作成

発行済み、になれば成功です。

S3バケットの作成

バケット名：sample.mypage.com

各項目を以下のように設定します。

項目	内容
ブロックパブリックアクセス	全てのチェックボックスを外す
CROS設定	以下のように設定

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Cloud Frontの作成

Create Distribution > WebのGet Started をクリック
以下のように設定して作成

項目	内容
Origin Domain Name	sample.mypage.com (先ほど作成したS3バケットを選択)
Restrict Bucket Access	Yes
Origin Access Identity	Create a New Identity
Grant Read Permissions on Bucket	Yes, Update Bucket Policy
Viewer Protocol Policy	Redirect HTTP to HTTPS
Compress Objects Automatically	Yes
Alternate Domain Names	sample-mypage.com
SSL Certificate	Custom SSL Certificate を選択し、 *.sample-mypage.com(先ほど作成したSSL証明書)を選択
Default Root Object	/index.html