blog top

CloudFront と S3 で Web サイトを公開する

HTML・CSS・JavaScriptでできたシンプルなWebサイトを公開するとき、色々な選択肢がありますよね。

久しぶりにCloudFront・S3で構築してみたところ、AWSマネジメントコンソールから簡単にデプロイできるようになっていたので、紹介しようと思います。

S3に資材を用意

まずS3バケットの作成をします。AWSマネジメントコンソールの検索バーでS3と検索し、その先の画面でバケットを作成ボタンを押すと作成できます。

名前はグローバルでユニークである必要があるので、このような名前にしておきましょう。

cloudfront-s3-website-sample-{名前}-{日付}

その他の設定はデフォルトで良いです。

次に、以下の2ファイルをS3バケットに追加してください。

シンプルなHTML・CSSで、Hello, AWS!と書いてあるだけのサンプルです。

以下のようになっていればOKです！

S3バケットにindex.htmlとstyle.cssがアップロードされている様子

CloudFrontの用意

次に、CloudFrontのディストリビューションを作成します。AWSマネジメントコンソールの検索バーでCloudFrontと検索し、その先の画面でディストリビューションを作成ボタンを押すと作成できます。

最初の画面ではディストリビューション名を入力し、他はデフォルトのまま次に進みます。名前はcloudfront-s3-website-sampleとしておきます。

ディストリビューション作成画面の1ページ目

次の画面ではオリジンを選択します。オリジンタイプはS3とし、先程作成したS3バケットの名前を入力します。

ディストリビューション作成画面の2ページ目

3ページ目ではWAFの設定ができますが、WAFは料金がかかるので今回は有効化しません。

ディストリビューション作成画面の3ページ目

ここまでで設定は完了です。次の確認ページで作成ボタンを押します。

ページの確認

CloudFrontのディストリビューションが無事に作成されると、以下の画像のようにDomain name(ドメイン名)が表示されます。

CloudFrontのダッシュボードにドメイン名が表示されている

このドメイン名をコピーし、

https://{ドメイン名}/index.html

というURLにブラウザでアクセスしましょう。以下のように表示されていれば成功です！

ブラウザにオレンジ色で「Hello, AWS!」と表示されている

おまけ: デフォルトルートオブジェクトの設定

上ではURLの末尾にindex.htmlをつけてアクセスしました。もしこれを外すとどうなるでしょうか？

ブラウザに「AccessDenied」と表示されている

エラーになりますね。デプロイしてそのままの状態だと、S3に置いたファイル名を指定しないとこのようになってしまいます。

そこで、CloudFrontのデフォルトルートオブジェクトの設定を変更していきます。

作成したディストリビューションのID欄がリンクになっているので、それをクリックすると以下の画面が開きます。

ディストリビューションの設定ページの「一般」タブが開いている。デフォルトルートオブジェクトの設定は「-」になっている

この画面の編集ボタンを押した先で、Default root objectをindex.htmlとして保存します。

デフォルトルートオブジェクトのインプット欄がindex.htmlになっている

保存して30秒ほど待つと設定が反映されるはずです。以下のように、index.htmlを外してアクセスできたら成功です！

https://{ディストリビューションのドメイン名}

おわりに

少し前まではCloudFrontの設定はややこしくて、はじめて触るには抵抗があるなーという代物でした。

いまではバケットポリシーの追加を勝手にやってくれたり、キャッシュ設定を隠蔽して推奨項目を自動で当ててくれたりと、はじめての方でも取り組みやすい画面になっているかなと思います。

今回は扱いませんが、AmplifyでもS3の資材を簡単にホスティングできるので、それも今後紹介できたらと思います。