S3 に置いたコンテンツを CloudFront を利用 してインターネットに公開する方法まとめ ( B ) CloudFront のオリジンに Amazon S3 バケットの静的ウェブサイトホスティングエンドポイントを使用する方法

記事タイトルとURLをコピーする

本記事の概要につきましては大変お手数ですが 以下のブログをご参照ください

S3 に置いたコンテンツを CloudFront を利用 してインターネットに公開する方法まとめ

( B ) CloudFront のオリジンに Amazon S3 バケットの静的ウェブサイトホスティングエンドポイントを使用する方法

本記事で作成するのは以下の構成です

f:id:swx-yamamoto:20210428173845p:plain

公式ドキュメントはお手数ですが以下をご参照ください

オリジンのウェブサイトエンドポイントとして構成された Amazon S3 バケットの使用

Amazon S3 でホストされている静的ウェブサイトを提供するために CloudFront をどのように使用したらよいですか ?

手順

静的ウェブサイトホスティングエンドポイントを作成

公式ドキュメント: Amazon S3 での静的ウェブサイトのホスティング

[サービス]→[S3] の順にクリックします

f:id:swx-yamamoto:20210428173908p:plain

[バケットを作成]をクリックします

f:id:swx-yamamoto:20210428173929p:plain

[バケット名]に任意の文字列を入れて [バケットの作成]をクリックします ※ デフォルトで [パブリックアクセスをすべてブロック] のバケットになります

f:id:swx-yamamoto:20210428173955p:plain

バケットができました

f:id:swx-yamamoto:20210428174013p:plain

トップページとなる s3contents.html を作成しアップロードします

f:id:swx-yamamoto:20210428174026p:plain

[次へ]を押します

f:id:swx-yamamoto:20210428174100p:plain

[次へ]を押します

f:id:swx-yamamoto:20210428174128p:plain

[次へ]を押します

f:id:swx-yamamoto:20210428174149p:plain

[アップロード]を押します

f:id:swx-yamamoto:20210428174209p:plain

アップロードできました

f:id:swx-yamamoto:20210428174229p:plain

アップロードしたファイルの [オブジェクト URL] をブラウザで 確認してみます

f:id:swx-yamamoto:20210428174247p:plain

アクセス不可となります

f:id:swx-yamamoto:20210428174305p:plain

作成したバケットの[バケットポリシー]に何も入っていないことを確認します

f:id:swx-yamamoto:20210428174321p:plain

[プロパティ] タブの [Static website hosting] をクリックします

f:id:swx-yamamoto:20210428174350p:plain

① [このバケットを使用してウェブサイトをホストする] にチェックします ② インデックスドキュメントに 先にアップロードした s3contents.html を入力します ③ エンドポイントをコピーしておきます (後で使います) ④ [保存] をクリックします

f:id:swx-yamamoto:20210428174427p:plain

上でコピーしておいた エンドポイント (http://bucket-name.s3-website.Region.amazonaws.com) にブラウザからアクセスし 「403 Forbidden」となることを確認します ※ バケットの「ブロックパブリックアクセス」が有効になっており パブリックアクセスの許可設定についてもしていないため接続不可となります

f:id:swx-yamamoto:20210428174457p:plain

[アクセス権]タブ に移動し[ブロックパブリックアクセス]枠内の[編集]をクリックします

f:id:swx-yamamoto:20210428174515p:plain

[パブリックアクセスをすべてブロック]のチェックを外します

f:id:swx-yamamoto:20210428174541p:plain

[保存] をクリックします

f:id:swx-yamamoto:20210428174601p:plain

フィールドに 「確認」と入力し [確認] ボタンを押します

f:id:swx-yamamoto:20210428174626p:plain

「パブリックアクセス設定が正常に更新されました」と出ました

f:id:swx-yamamoto:20210428174649p:plain

[バケットポリシー]を編集します 特定の HTTP Referer へのアクセスの制限 を参考にバケットポリシーを記載し [保存] をクリックします (リファラーの値は任意のバイト数の任意の文字列を入れています)

{
"Version": "2012-10-17",
"Id": "http referer policy example",
"Statement": [
{
"Sid": "Allow get requests originating from www.example.com and example.com.",
"Effect": "Allow",
"Principal": "",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::バケット名/",
"Condition": {
"StringLike": {
"aws:Referer": "リファラーの値"
}
}
}
]
}

f:id:swx-yamamoto:20210428174719p:plain

「このバケットにはパブリックアクセス権限があります」と表示され [パブリック] 印が表示されるようになりました

f:id:swx-yamamoto:20210428174742p:plain

静的ウェブサイトホスティングのエンドポイント(http://bucket-name.s3-website.Region.amazonaws.com) にアクセスし コンテンツを表示できないことを確認します ※リファラーが一致しないためバケットポリシーで拒否されます

f:id:swx-yamamoto:20210428174803p:plain

また s3contents.html の[オブジェクト URL] をブラウザで 確認してみます

f:id:swx-yamamoto:20210428174826p:plain

オブジェクトURLでもファイルを表示できないことを確認します ※リファラーが一致しないためバケットポリシーで拒否されます

f:id:swx-yamamoto:20210428174852p:plain

CloudFrontを作成

公式ドキュメント: オリジンのウェブサイトエンドポイントとして構成された Amazon S3 バケットの使用

[サービス]→[CloudFront] の順にクリックします

f:id:swx-yamamoto:20210428174939p:plain

[Create Distribution] をクリックします

f:id:swx-yamamoto:20210428174955p:plain

[Web]セクションにある [Get Started] をクリックします

f:id:swx-yamamoto:20210428175008p:plain

[Origin Domain Name]に静的ウェブサイトホスティングのエンドポイント(http://bucket-name.s3-website.Region.amazonaws.com)を入れ 他の設定はそのままにして [ Create Distribution]をクリックします

f:id:swx-yamamoto:20210428175029p:plain

f:id:swx-yamamoto:20210428175101p:plain

数十分するとデプロイが完了します ブラウザで CloudFront の URL ( xxxx.cloudfront.net ) を開き ファイルを表示できないことを確認します ※リファラーが一致しないためバケットポリシーで拒否されます

f:id:swx-yamamoto:20210428175118p:plain

作成したディストリビューションの [Origins and Origin Groups] タブを開き [Edit] をクリックします

f:id:swx-yamamoto:20210428175137p:plain

[Origin Custom Headers] の [Header Name]に「Referer」を入れ [Value] に バケットポリシーに設定した リファラーの値を入れ [Yes, Edit]をクリックします

f:id:swx-yamamoto:20210428175159p:plain

CloudFrontのステータスが 「In Progress」になり その後に 「Deployed」になったことを確認します

f:id:swx-yamamoto:20210428175220p:plain

CloudFront の現在のキャッシュクリアをするため [Invalidations] タブで [Create Invalidation] をクリックします [Object Paths] に「*」を入れ [Invalidate] をクリックします

f:id:swx-yamamoto:20210428175242p:plain

Invalidation の [Status] が 「Completed」になりましたら ブラウザで CloudFront の URL を開き ファイルを表示できることを確認します ※ CloudFront で付与したリファラーが バケットポリシーに設定したものと一致しました

f:id:swx-yamamoto:20210428175303p:plain

HTTPS化

CloudFront の [Behavior] にある [Viewer Protocol Policy]を編集することで ユーザーからCloudFrontへのアクセスをHTTPS化可能です(各 behavior に設定) ただし CloudFront からバックエンド (オリジン) の静的ウェブサイトホスティングのエンドポイント(http://bucket-name.s3-website.Region.amazonaws.com)への通信は HTTP になります

f:id:swx-yamamoto:20210428175318p:plain

静的ウェブサイトホスティングの機能を試してみる① カスタムエラードキュメントの設定

[エラードキュメント] に エラー時に表示する html を設定しておくことにより ウェブサイトでエラーが発生した際にリダイレクトしてくれます

参考: (オプション) カスタムエラードキュメントの設定

f:id:swx-yamamoto:20210428175352p:plain

試しに存在しないパス (/無いページ) にアクセスするとリダイレクトしてくれました ( error.html の中身が表示されました)

f:id:swx-yamamoto:20210428175522p:plain

静的ウェブサイトホスティングの機能を試してみる② ウェブページリダイレクトの設定

ウェブページリダイレクトの設定をしてみます

参考: ウェブページリダイレクトの設定

試しに CloudFront の URL (xxxx.cloudfront.net) にアクセスが来た際に aws.amazon.com にリダイレクトさせてみます ※ 本来は公開するコンテンツの場所が変わった場合に追跡できるように本機能があります

f:id:swx-yamamoto:20210428175542p:plain

CloudFront の URL (xxxx.cloudfront.net) を入れてみます

f:id:swx-yamamoto:20210428175607p:plain

→ リダイレクトできました!

f:id:swx-yamamoto:20210428175623p:plain

続いて 高度な条件付きリダイレクトの設定 を設定してみます (結論:使えませんでした...) images/ 配下へのリクエストをすべて folderdeleted.html というページにリダイレクトするように設定します

images/folderdeleted.html

f:id:swx-yamamoto:20210428180003p:plain

images/ 配下にある test.png をリクエストします

f:id:swx-yamamoto:20210428180029p:plain

確かに folderdeleted.html にはリダイレクトしているものの ホストが CloudFront (xxxx.cloudfront.net) ではなく静的ウェブサイトホスティングのエンドポイント(http://bucket-name.s3-website.Region.amazonaws.com)になってしまいました ※ CloudFront 経由でないため リファラーが付与されずアクセス不可となりました

f:id:swx-yamamoto:20210428180053p:plain

CloudFront を経由する通信経路のみ許可する場合は ウェブページリダイレクト機能は使えるものの 「高度な条件付きリダイレクトの設定」 はできないようです

〜おわり〜