本記事の概要につきましては大変お手数ですが 以下のブログをご参照ください
S3 に置いたコンテンツを CloudFront を利用 してインターネットに公開する方法まとめ
( B ) CloudFront のオリジンに Amazon S3 バケットの静的ウェブサイトホスティングエンドポイントを使用する方法
本記事で作成するのは以下の構成です
公式ドキュメントはお手数ですが以下をご参照ください
オリジンのウェブサイトエンドポイントとして構成された Amazon S3 バケットの使用
Amazon S3 でホストされている静的ウェブサイトを提供するために CloudFront をどのように使用したらよいですか ?
手順
静的ウェブサイトホスティングエンドポイントを作成
公式ドキュメント： Amazon S3 での静的ウェブサイトのホスティング
[サービス]→[S3] の順にクリックします
[バケットを作成]をクリックします
[バケット名]に任意の文字列を入れて [バケットの作成]をクリックします ※ デフォルトで [パブリックアクセスをすべてブロック] のバケットになります
バケットができました
トップページとなる s3contents.html を作成しアップロードします
[次へ]を押します
[次へ]を押します
[次へ]を押します
[アップロード]を押します
アップロードできました
アップロードしたファイルの [オブジェクト URL] をブラウザで 確認してみます
アクセス不可となります
作成したバケットの[バケットポリシー]に何も入っていないことを確認します
[プロパティ] タブの [Static website hosting] をクリックします
① [このバケットを使用してウェブサイトをホストする] にチェックします ② インデックスドキュメントに 先にアップロードした s3contents.html を入力します ③ エンドポイントをコピーしておきます (後で使います) ④ [保存] をクリックします
上でコピーしておいた エンドポイント (http://bucket-name.s3-website.Region.amazonaws.com) にブラウザからアクセスし 「403 Forbidden」となることを確認します ※ バケットの「ブロックパブリックアクセス」が有効になっており パブリックアクセスの許可設定についてもしていないため接続不可となります
[アクセス権]タブ に移動し[ブロックパブリックアクセス]枠内の[編集]をクリックします
[パブリックアクセスをすべてブロック]のチェックを外します
[保存] をクリックします
フィールドに 「確認」と入力し [確認] ボタンを押します
「パブリックアクセス設定が正常に更新されました」と出ました
[バケットポリシー]を編集します 特定の 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": "リファラーの値"
}
}
}
]
}
「このバケットにはパブリックアクセス権限があります」と表示され [パブリック] 印が表示されるようになりました
静的ウェブサイトホスティングのエンドポイント(http://bucket-name.s3-website.Region.amazonaws.com) にアクセスし コンテンツを表示できないことを確認します ※リファラーが一致しないためバケットポリシーで拒否されます
また s3contents.html の[オブジェクト URL] をブラウザで 確認してみます
オブジェクトURLでもファイルを表示できないことを確認します ※リファラーが一致しないためバケットポリシーで拒否されます
CloudFrontを作成
公式ドキュメント： オリジンのウェブサイトエンドポイントとして構成された Amazon S3 バケットの使用
[サービス]→[CloudFront] の順にクリックします
[Create Distribution] をクリックします
[Web]セクションにある [Get Started] をクリックします
[Origin Domain Name]に静的ウェブサイトホスティングのエンドポイント(http://bucket-name.s3-website.Region.amazonaws.com)を入れ 他の設定はそのままにして [ Create Distribution]をクリックします
数十分するとデプロイが完了します ブラウザで CloudFront の URL ( xxxx.cloudfront.net ) を開き ファイルを表示できないことを確認します ※リファラーが一致しないためバケットポリシーで拒否されます
作成したディストリビューションの [Origins and Origin Groups] タブを開き [Edit] をクリックします
[Origin Custom Headers] の [Header Name]に「Referer」を入れ [Value] に バケットポリシーに設定した リファラーの値を入れ [Yes, Edit]をクリックします
CloudFrontのステータスが 「In Progress」になり その後に 「Deployed」になったことを確認します
CloudFront の現在のキャッシュクリアをするため [Invalidations] タブで [Create Invalidation] をクリックします [Object Paths] に「*」を入れ [Invalidate] をクリックします
Invalidation の [Status] が 「Completed」になりましたら ブラウザで CloudFront の URL を開き ファイルを表示できることを確認します ※ CloudFront で付与したリファラーが バケットポリシーに設定したものと一致しました
HTTPS化
CloudFront の [Behavior] にある [Viewer Protocol Policy]を編集することで ユーザーからCloudFrontへのアクセスをHTTPS化可能です(各 behavior に設定) ただし CloudFront からバックエンド (オリジン) の静的ウェブサイトホスティングのエンドポイント(http://bucket-name.s3-website.Region.amazonaws.com)への通信は HTTP になります
静的ウェブサイトホスティングの機能を試してみる① カスタムエラードキュメントの設定
[エラードキュメント] に エラー時に表示する html を設定しておくことにより ウェブサイトでエラーが発生した際にリダイレクトしてくれます
試しに存在しないパス (/無いページ) にアクセスするとリダイレクトしてくれました ( error.html の中身が表示されました)
静的ウェブサイトホスティングの機能を試してみる② ウェブページリダイレクトの設定
ウェブページリダイレクトの設定をしてみます
参考： ウェブページリダイレクトの設定
試しに CloudFront の URL (xxxx.cloudfront.net) にアクセスが来た際に aws.amazon.com にリダイレクトさせてみます ※ 本来は公開するコンテンツの場所が変わった場合に追跡できるように本機能があります
CloudFront の URL (xxxx.cloudfront.net) を入れてみます
→ リダイレクトできました！
続いて 高度な条件付きリダイレクトの設定 を設定してみます (結論：使えませんでした...) images/ 配下へのリクエストをすべて folderdeleted.html というページにリダイレクトするように設定します
images/ folderdeleted.html
images/ 配下にある test.png をリクエストします
確かに folderdeleted.html にはリダイレクトしているものの ホストが CloudFront (xxxx.cloudfront.net) ではなく静的ウェブサイトホスティングのエンドポイント(http://bucket-name.s3-website.Region.amazonaws.com)になってしまいました ※ CloudFront 経由でないため リファラーが付与されずアクセス不可となりました
CloudFront を経由する通信経路のみ許可する場合は ウェブページリダイレクト機能は使えるものの 「高度な条件付きリダイレクトの設定」 はできないようです
〜おわり〜
