LoginSignup
2
4

More than 3 years have passed since last update.

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

Posted at

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

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

2
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
4