end0tknr's kipple - web写経開発

太宰府天満宮の狛犬って、妙にカワイイ

aws s3 の 静的ウェブサイトホスティング に 独自domain + via cloud front

独自domain & aws s3 の 静的ウェブサイトホスティング に対し、 httpsを有効にするには、cloud front 経由とする必要がありますが、 cloud frontの構成は、自身で構築実績がなかった為、hands-on 。

▲以下に順を記載していますが、細かい点で理解できていない部分もあります。

▲httpへの接続requestを強制的?に、https化したかったのですが、実施方法不明

目次

全体構成

cloud front 経由の構築に慣れていませんので、以下のステップで進めます。

※太線部は、前STEPからの変更箇所です

【STEP 1】AWS S3 による直接、serve

┌──────────────────────────────────┐
│【AWS S3】                                                          │
│bucket name: s3webtest.end0tknr.com                                 │
│url; s3webtest.end0tknr.com.s3-website-ap-northeast-1.amazonaws.com │
└─┬────────────────────────────────┘
    │http
┌─┴────────────────────────────────┐
│【USER】                                                            │
└──────────────────────────────────┘

【STEP 2】独自domainで AWS S3 による直接、serve

┌──────────────────────────────────┐
│【AWS S3】                                                          │
│bucket name: s3webtest.end0tknr.com                                 │
│url; s3webtest.end0tknr.com.s3-website-ap-northeast-1.amazonaws.com │
└─┬────────────────────────────────┘
    │http
┏━┷━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃【Route 53】DNS                                                     ┃
┃s3webtest.end0tknr.com                                              ┃
┃ -(CNAME)-> s3-website-ap-northeast-1.amazonaws.com                 ┃
┗━┯━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
    │http
┌─┴────────────────────────────────┐
│【USER】                                                            │
└──────────────────────────────────┘

【STEP 3】Cloud Front経由で AWS S3 による https、serve

┌──────────────────────────────────┐
│【AWS S3】                                                          │
│bucket name: s3webtest.end0tknr.com                                 │
│url; s3webtest.end0tknr.com.s3-website-ap-northeast-1.amazonaws.com │
└─┬────────────────────────────────┘
    │http
┏━┷━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃【Cloud Front】CDN                                                  ┃
┃Origin domain:                                                      ┃
┃  s3webtest.end0tknr.com.s3.ap-northeast-1.amazonaws.com            ┃
┗━┯━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
    │http(s)
┌─┴────────────────────────────────┐
│【USER】                                                            │
└──────────────────────────────────┘

【STEP 4】独自domain & https & Cloud Front経由で AWS S3 による serve

┌──────────────────────────────────┐
│【AWS S3】                                                          │
│bucket name: s3webtest.end0tknr.com                                 │
│url; s3webtest.end0tknr.com.s3-website-ap-northeast-1.amazonaws.com │
└─┬────────────────────────────────┘
    │http
┌──────────────────────────────────┐    
│【Cloud Front】CDN                                                  │
│Origin domain:                                                      │
│  s3webtest.end0tknr.com.s3.ap-northeast-1.amazonaws.com            │
└─┬────────────────────────────────┘
    │http(s)
┏━┷━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃【Route 53】DNS                                                     ┃
┃s3webtest.end0tknr.com                                              ┃
┃ -(CNAME)-> s3-website-ap-northeast-1.amazonaws.com                 ┃
┗━┯━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
┏━┷━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃【 Certificate Manager】SSL                                         ┃
┃for s3webtest.end0tknr.com at N. Virginia , us-east-1               ┃
┗━┯━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
    │http(s)
┌─┴────────────────────────────────┐
│【USER】                                                            │
└──────────────────────────────────┘

【STEP 1】AWS S3 による直接、serve

【STEP 1.1】独自domainと同名称で aws s3 bucket作成

します。

今回は、「独自domain」=「バケット名」=「s3webtest.end0tknr.com」で進めます。

バケット名以外の「プロパティ」や「アクセス許可」は、 この後、設定変更しますので、全てdefaultで作成してかまいません。

f:id:end0tknr:20210811162220p:plain

【STEP 1.2】バケットプロパティで、静的ウェブサイトホスティング有効化

します。

バケットプロパティ画面の下部に、静的ウェブサイトホスティングの欄がありますので、 以下の内容で設定してください。

項目 内容
静的ウェブサイトホスティング 有効にする
ホスティングタイプ 静的ウェブサイトをホストする
インデックスドキュメント index.html error.html
リダイレクトルール オプション ※ 以下、参照

今回の場合、リダイレクトルール オプションにおいて ファイルが見つからない404エラー時に、error.html へredirectさせています。

[
  { "Condition": {"HttpErrorCodeReturnedEquals": "404"},
    "Redirect" : {"ReplaceKeyWith": "error.html"      } }
]

その他のS3によるリダイレクトルールは、 例えば、以下のurlが分かりやすいです。

s3でURLリダイレクトするときの設定まとめ - Qiita

f:id:end0tknr:20210811162905p:plain

↑この画面を下へスクロースすると、↓この設定欄が現れます。

f:id:end0tknr:20210811162954p:plain

f:id:end0tknr:20210811163025p:plain

【STEP 1.3】バケットアクセス許可 設定

「このバケットのブロックパブリックアクセス設定」では 【内容を理解していませんが】全て OFFとしています。

f:id:end0tknr:20210811163106p:plain

また「バケットポリシー」では、以下を設定します。

※ Resource にあるバケット名以外は、他でも流用可能なルールです。

{ "Version":"2012-10-17",
  "Statement":[
    { "Sid":"TestAwsS3WebHosting",
      "Effect":"Allow",
      "Principal": "*",
      "Action":["s3:GetObject"],
      "Resource":["arn:aws:s3:::s3webtest.end0tknr.com/*"] }
  ]
}

f:id:end0tknr:20210811163129p:plain

バケットプロパティにおける静的ウェブサイトホスティング設定が完了すると、 以下のようなurlが発行されます。

http://s3webtest.end0tknr.com.s3-website-ap-northeast-1.amazonaws.com

f:id:end0tknr:20210811163140p:plain

【STEP 1.4】index.html , error.html をupload し、接続テスト

先程のSTEP1.3までで、s3 のみの web hosting設定は完了していますので、 index.html , error.html をupload し、ブラウザで http://s3webtest.end0tknr.com.s3-website-ap-northeast-1.amazonaws.com へ、アクセスし、index.html , error.htmlが閲覧できることを確認してください。

f:id:end0tknr:20210811163609p:plain

【STEP 2】独自domainで AWS S3 による直接、serve

STEP1で作成した S3 に独自domainでアクセスする為、 Route53で以下のように設定するだけです。

設定完了後、独自ドメインである http://s3webtest.end0tknr.com へ、 アクセスできることを確認してください。

項目 内容
レコード名 s3webtest.end0tknr.com
レコードタイプ CNAME
値 s3-website-ap-northeast-1.amazonaws.com

f:id:end0tknr:20210811163639p:plain

【STEP 3】Cloud Front経由で AWS S3 による https、serve

このステップでは、Cloud Front → s3 連携を有効にし、 Cloud Front独自のurlで s3へ、アクセスできる状態にします。

【STEP 3.1】Create distribution

Cloud Frontの管理画面にある「Create distribution」ボタンをクリックし、 以下の内容で設定します。

※ 実際の設定画面には、以下の他に様々な項目がありますが、 以下に記載がないものは、デフォルト値で問題ないと思います。

Origin

項目 値
Origin domain s3webtest.end0tknr.com.s3.ap-northeast-1.amazonaws.com
Origin path null
Name s3webtest.end0tknr.com.s3.ap-northeast-1.amazonaws.com
S3 bucket access No
Enable Origin Shield No

f:id:end0tknr:20210811163925p:plain

Default cache behavior

項目 値
Path pattern Default (*)
Viewer protocol policy HTTP and HTTPS
Allowed HTTP methods GET, HEAD

f:id:end0tknr:20210811163935p:plain

Settings

項目 値
Price class Use all edge locations
AWS WAF web ACL none
Supported HTTP versions HTTP/2 On
Default root object index.html

f:id:end0tknr:20210811163948p:plain

【STEP 3.2】～.cloudfront.net への接続テスト

上記 STEP 3.1 により、Cloud Frontによるurlが発行されますので、 http , https のそれぞれで接続テストを行って下さい。以下、url例

【STEP 4】独自domain & https & Cloud Front経由で AWS S3 による serve

最後に、Cloud Frontに対し、独自domainや、ssl証明書を紐づけます。

【STEP 4.1】dns設定変更

まず、Route53で作成済の s3web.end0tknr.com に関する dnsレコードを変更します。

項目 値
レコード名 s3webtest.end0tknr.com
レコードタイプ CNAME
値 【old】 s3-website-ap-northeast-1.amazonaws.com
〃 【new】 d1ytryj2mno8x5.cloudfront.net

【STEP 4.2】SSL証明書の発行 @ US East (N. Virginia , us-east-1)

cloud frontで独自ドメインを利用するには SSL証明書が必要ですので、 Croud Frontの設定画面の Custom SSL certificate　直下にある 「Request certificate」リンクをクリックし、 以下の画面のようにSSL証明書やDNS検証を行ってください。

▲ 画面の注釈の通り、証明書は、 US East (N. Virginia , us-east-1).にある必要があります。

f:id:end0tknr:20210811164049p:plain

s3web.end0tknr.com を追加し、次の画面で「DNSの検証」を実行。

「DNSの検証」完了後、「Custom SSL certificate」にて取得できたssl証明書を選択.

f:id:end0tknr:20210811164101p:plain ▼▼▼▼ f:id:end0tknr:20210811164111p:plain ▼▼▼▼ f:id:end0tknr:20210811164120p:plain ▼▼▼▼ f:id:end0tknr:20210811164128p:plain ▼▼▼▼ f:id:end0tknr:20210811164137p:plain ▼▼▼▼ f:id:end0tknr:20210811164158p:plain

【STEP 4.3】cloud front ( Edit distribution )

SSL証明書が発行されば、Croud Frontの設定画面で、 CNAME & SSL証明書を登録し、全ての作業が完了です。

f:id:end0tknr:20210811164210p:plain

【STEP 4.4】s3webtest.end0tknr.com への接続テスト

最後に http , https のそれぞれで接続テストを行って下さい。以下、url例