Posted at

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

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

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でのレコードの作成
    スクリーンショット 2019-10-02 17.05.09.png
    発行済み、になれば成功です。


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

作成したDistributionをクリックすると、詳細が確認できます。

スクリーンショット 2019-10-03 13.08.59.png



  • Generalタブを選択し、Editをクリック


  • Alternate Domain Names (CNAMEs)www.sample-mypage.com と設定

また、SPAサイトを作成する場合、以下の設定をします。



  • Error Pageタブを選択し、Create Custom Error Responseをクリック

  • HTTP Error Code の 403, 404で、それぞれ以下のように設定して作成

項目
内容

Customize Error Response
Yes

Response Page Path
/index.html

HTTP Response Code
200:OK

スクリーンショット 2019-10-03 13.04.51.png


Route53でエイリアスを作成



  • ホストゾーン > sample-mypage.com(購入したドメイン名) > レコードセットの登録

  • 以下のように設定して作成

項目
内容

名前
www.sample-mypage.com

タイプ
A-IPv4アドレス

エイリアス
はい

エイリアス先
xxx.cloudfront.net

※エイリアス先はCloud Frontで確認

スクリーンショット 2019-10-03 14.14.31.png

ドメインの反映にはしばらく時間がかかります。

S3バケットにindex.htmlをアップロードし、https://www.sample-mypage.comにアクセスすると、静的サイトが表示されるのが確認できます。

スクリーンショット 2019-10-03 14.27.21.png