こんにちは。
株式会社クラスアクト インフラストラクチャ事業部の大塚です。
前回の記事でS3を使って静的なWebサイトをホスティングしました。
この環境を拡張し、前面にCloudFrontを配置します。
環境イメージ
構築
CloudFrontデプロイ
CloudFrontの管理画面を開きます。
ディストリビューションを作成を押下します。
次の内容で作成しました。
まず、Origin domainで作成したS3ホスティングのドメインを選択します。選択すると以下のような表示がポップアップしますが、Webサイトのエンドポイントを使用ボタンを押下するとCloudFrontの設定の一部が自動で設定されていきます。
料金クラスはとりあえず全てのエッジロケーションを使用するを選択。
デフォルトルートオブジェクトはindex.htmlを記入しました。ここにindex.htmlと記載をしておくことでCloudFront作成後に自動で払い出されるディストリビューションドメイン名の後にファイル名等を指定しないでアクセスすると、自動でindex.htmlにアクセスをしに行きます。
作成が出来ると以下のような画面に自動で遷移します。
暫く待機すると最終更新日がデプロイから、日時に変わります。日時に切り替わりましたらディストリビューションドメイン名をコピーします。
オリジンタブやビヘイビアタブを核にするとS3バケットに紐づいていることが確認出来ます。
確認
先程控えたディストリビューションドメイン名に対してWebブラウジングしてみます。
S3バケットに格納しているindex.htmlが表示されることを確認します。
またディストリビューションドメイン名/hogehogeとしてerror.htmlを意図的に出してみます。
これも問題なさそうですね。
