AWSのS3には、置いたHTMLファイルをそのままWebサイトとして公開できる「静的ウェブサイトホスティング」という機能があります。手軽で便利なのですが、この方法は バケットを丸ごとインターネットに公開する形になるため、あまり推奨されません。

そこで今回は、AWSのベストプラクティスに沿った構成である、バケットは非公開のまま、CloudFrontというサービスを経由して配信する方法 に作り替えていきます。
静的ウェブサイトホスティングってなに？やり方を知りたい！という方は、「【完全無料】IT知識不要！ AWSを使って自分のWebサイトを公開する方法」をご覧ください。

この記事でやること

  • S3バケットを非公開に戻す
  • CloudFront＋OACを使って、安全に配信できるようにする
  • CloudFrontのURLで、HTTPSでサイトが表示できることを確認する

前提

  • S3バケットに index.html などのファイルをアップロード済みであること
  • 静的ウェブサイトホスティングを設定済みであること

 

1.S3バケットを非公開に戻す

ベストプラクティス構成では、S3バケットを 直接インターネットに公開しません。CloudFrontだけがアクセスできる状態にするので、まずは公開設定を元に戻します。

1.AWSコンソールにログインし、S3から、ウェブサイトの入っているバケットを開きます。

2.アクセス許可タブ を開き、「ブロックパブリックアクセス（バケット設定）」の「編集」を選択します。

3.「パブリックアクセスをすべて ブロック」にチェックをつけて、「変更の保存」を選択します。

4.アクセス許可タブを開き、バケットポリシー から「削除」を選択します。

5.プロパティタブを開き、静的ウェブサイトホスティング の「編集」を選択します。静的ウェブサイトホスティングの項目を「無効にする」にします。

2. CloudFrontディストリビューションを作成する

ディストリビューション とは、CloudFrontで「1つの配信設定」を指す単位です。これから、S3バケットを配信元（オリジン）とするディストリビューションを作ります。

1. CloudFrontのコンソールを開き、「ディストリビューションを作成」をクリックします。プラン選択の画面が出てくるので、「無料」を選択します。

2.下記を参考に設定項目を入力し、「Next」を選択します。

Distribution name sato-cf など好きな名前
Description – optional 空欄
Distribution type Single website or app
Domain 空欄
Tags 空欄

3.設定画面が続きます。下記の通りに入力し、「Next」を選択します。

Origin type Amazon S3
S3 origin 「Browse S3」から、自身のウェブサイトが入っているバケットを選択
Origin path – optional 空欄
Allow private S3 bucket access to CloudFront – Recommended チェックあり
オリジン設定 Use recommended origin settings
Cache settings Use recommended cache settings tailored to serving S3 content

4.設定画面が続きます。WAF（セキュリティ機能）を使用するか聞かれます。未選択のまま「Next」を選択します。
5.最終確認画面が出ます。「Create distribution」を選択して作成します。
作成できました。

3. デフォルトルートオブジェクトを設定する

先ほど作成したディストリビューションをウェブサイトと結びつける設定を行います。

1.CloudFrontのコンソールで、ディストリビューションの一覧から、先ほど作成したものを選択します。複数ある場合、IDは英数字になっていますが、オリジンのバケット名を見ると判別できるかと思います。
2.「編集」を選択します。
3.「Default root object」の入力欄に、Webサイトにしているファイル名を入力し、「変更を保存」を選択します。

4.動作確認

1.CloudFrontのコンソールで作成したディストリビューションを開き、「ディストリビューションドメイン名」をコピーします。d1234abcd.cloudfront.net のような形式です。
2.ブラウザのアドレスバーに、コピーしたドメイン名の先頭に https:// を付けてアクセスします。
例：https://d1234abcd.cloudfront.net

ウェブサイトが表示されたら成功です！

うまくいかない場合は、手順3-3 Default root object のファイル名が間違っている。「https://」が正しく入力できていない。等の原因が多いです。確認してみてください。

OACのメリット

今回は、S3の静的ウェブサイトホスティングから、実務で使える 「非公開S3＋CloudFront＋OAC」 構成へ作り替えました。この構成にはいくつものメリットがあります。

  • バケットは 非公開 にして、CloudFront経由だけでアクセスさせるので情報漏洩のリスクを減らせる。
  • AWS推奨のベストプラクティス構成である（参考）
  • HTTPS通信ができて安全。
  • CloudFrontからのアクセスは毎月1TBまで無料。S3からのアクセスの無料枠（月100GBまで）よりもはるかに大きいため、個人サイトや小規模なブログであれば、実質無料で利用できる範囲が広がる。

最後まで読んでいただきありがとうございました。この記事を通じてAWSに興味を持った方は、資格やアプリ構築についてもブログを書いていますので読んでいただけると嬉しいです。