nebashitaito-web

CloudFrontでウェブサイトをHTTPS接続にしてみた

画像

ディストリビューションの作成

画像

元々作成していた3バケットを選択する。
S3 ウェブサイトエンドポイントは選択しない。選択するとHTTPのみの通信になってしまう。

OACの設定

画像 画像

なければその場で新規作成する
名前以外はそのままの設定でOK

キャッシュビヘイビアの設定

画像

ビューワープロトコルポリシーは「HTTPSのみ」を選択
許可された HTTP メソッドは「GET、HEAD」を選択

デフォルトルートオブジェクト - オプション

画像

ここで必ず「index.html」を指定する。
ディストリビューションドメイン名(https://d2dubl6cu4hmp8.cloudfront.net)にアクセスしたときに、追加でURLを設定する必要がある。
ディストリビューションドメイン名は、単純にS3バケット(https://nebashitaito-web.s3.amazonaws.com)へのアクセスになる。
S3バケット(https://nebashitaito-web.s3.amazonaws.com)の中のオブジェクト(index.html)へのアクセスが必要になるので、ここで指定する。

作成後に出てくるポップアップからS3バケットポリシーをコピーする

画像

消しちゃっても、オリジンの設定からいつでも確認できる。

画像

バケットポリシーの設定

コピーしてきたバケットポリシーを貼り付けて、CloudFrontからのアクセスを許可する。

画像

パブリックアクセスをブロックする

CloudFrontディストリビューションへアクセスすると…

画像 画像

ちゃんと表示される!