YAZエンジニアが運営するメディア

はじめに

今回は、以下の3つのAWSサービスを組み合わせて、 安全かつ高速な静的Webサイト配信環境を構築します。

• ・Amazon S3： HTML、CSS、JavaScript、画像などの静的Webコンテンツを保存する
• ・Amazon CloudFront： S3に保存したコンテンツを世界中へ高速配信する
• ・AWS WAF： 不正なアクセスや、指定した条件に一致するアクセスをブロックする

本記事では構築手順だけでなく、 各サービスの役割や設定する理由についても解説します。

今回構築する全体像

各サービスの役割

町に例えると、S3は商品を保管する倉庫、 CloudFrontは利用者の近くから商品を届ける支店、 AWS WAFは不審なアクセスを確認する警備員の役割を持ちます。

構築手順

Step1 Amazon S3で静的Webサイトを公開する

はじめにCloudFrontを使用せず、 Amazon S3だけで静的Webサイトを公開します。

この手順では、以下の設定を行います。

• ・S3バケットを作成する
• ・静的Webサイトホスティングを有効にする
• ・バケットポリシーを設定する
• ・index.htmlをアップロードする
• ・ブラウザから動作確認を行う

① S3バケットを作成する

Amazon S3コンソールを開き、 ［バケットを作成］をクリックします。

設定内容

• ・バケット名： s3-[name]-01
• ・パブリックアクセスブロック： 「すべてのパブリックアクセスをブロック」のチェックを外す

設定手順

1. Amazon S3コンソールを開きます。
2. ［バケットを作成］をクリックします。
3. バケット名にs3-[name]-01を入力します。
4. 「すべてのパブリックアクセスをブロック」のチェックを外します。
5. 警告内容を確認し、承認欄へチェックを入れます。
6. ［バケットを作成］をクリックします。

ポイント

• ・バケットは、Windowsのフォルダに近い役割を持ちます。
• ・HTML、CSS、JavaScript、画像など、 Webサイトを構成するファイルを保存できます。
• ・S3は、初期状態では外部からアクセスできないように設定されています。
• ・今回はS3単体でWebサイトを公開するため、 一時的にパブリックアクセスを許可します。

※CloudFrontを導入する際は、 S3を再び非公開に戻します。

② 静的Webサイトホスティングを有効にする

作成したバケットを開き、 以下の順番で設定画面へ移動します。

［プロパティ］ →［静的ウェブサイトホスティング］ →［編集］

設定内容

• ・静的ウェブサイトホスティング： 有効
• ・ホスティングタイプ： 静的ウェブサイトをホストする
• ・インデックスドキュメント： index.html

設定手順

1. 作成したS3バケットを開きます。
2. ［プロパティ］タブを開きます。
3. ［静的ウェブサイトホスティング］まで画面を移動します。
4. ［編集］をクリックします。
5. 静的ウェブサイトホスティングを有効にします。
6. ホスティングタイプで［静的ウェブサイトをホストする］を選択します。
7. インデックスドキュメントへindex.htmlを入力します。
8. 変更を保存します。

ポイント

• ・Amazon S3は、本来ファイルを保存するためのストレージサービスです。
• ・静的Webサイトホスティングを有効にすると、 保存したHTMLファイルをWebページとして配信できます。
• ・インデックスドキュメントには、 Webサイトへアクセスしたときに最初に表示するHTMLファイルを指定します。

③ バケットポリシーを設定する

続いて、ブラウザからS3内のファイルを取得できるように、 バケットポリシーを設定します。

次の順番でバケットポリシーの編集画面を開きます。

［アクセス許可］ →［バケットポリシー］ →［編集］

以下のポリシーを設定します。

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::【あなたのバケット名】/*"
    }
  ]
}

設定手順

1. 対象のS3バケットを開きます。
2. ［アクセス許可］タブを開きます。
3. ［バケットポリシー］まで画面を移動します。
4. ［編集］をクリックします。
5. 上記のバケットポリシーを入力します。
6. 【あなたのバケット名】を、実際に作成したバケット名へ変更します。
7. 変更を保存します。

設定内容の意味

• ・Effect: Allow： 指定した操作を許可する
• ・Principal: "*"： すべてのアクセス元を対象にする
• ・Action: s3:GetObject： S3内のファイルを取得する操作を許可する
• ・Resource： アクセスを許可する対象を指定する

ポイント

• ・バケットポリシーでは、 誰がバケット内のオブジェクトへアクセスできるかを設定します。
• ・s3:GetObjectは、 S3に保存されたファイルを取得するための操作です。
• ・今回はPrincipalに "*"を指定しているため、 すべてのアクセス元からファイルを取得できます。
• ・Resourceには、 実際に作成したバケット名を指定する必要があります。

④ index.htmlをアップロードする

バケットの［オブジェクト］タブを開き、 作成したindex.htmlをアップロードします。

アップロード手順

1. 作成したS3バケットを開きます。
2. ［オブジェクト］タブを開きます。
3. ［アップロード］をクリックします。
4. ［ファイルを追加］をクリックします。
5. index.htmlを選択します。
6. ［アップロード］をクリックします。

ポイント

• ・S3にアップロードしたHTMLファイルが、 ブラウザに表示されるWebページになります。
• ・CSSやJavaScript、画像を使用する場合は、 それらのファイルもS3バケットへアップロードします。
• ・S3ではファイル名の大文字と小文字が区別されます。

⑤ S3単体で動作確認する

アップロードしたindex.htmlを選択し、 オブジェクトURLへアクセスします。

確認手順

1. S3バケットの［オブジェクト］タブを開きます。
2. アップロードしたindex.htmlを選択します。
3. オブジェクトの詳細画面を開きます。
4. 表示されているオブジェクトURLをクリックします。
5. ブラウザでWebページが表示されることを確認します。

表示されない場合の確認ポイント

• ・パブリックアクセスブロックが無効になっているか
• ・静的ウェブサイトホスティングが有効になっているか
• ・インデックスドキュメントに index.htmlが指定されているか
• ・バケットポリシーで s3:GetObjectが許可されているか
• ・Resourceに正しいバケット名が指定されているか
• ・index.htmlが正しいバケットへアップロードされているか
• ・HTML内に記載した画像やCSSのファイル名が正しいか
• ・ファイル名の大文字と小文字が一致しているか

この時点の構成

             インターネット
                    │
                    ▼
              Amazon S3
      （静的Webサイトを公開）
                    │
      　　　　　　　├── index.html
     　　　　　　　 ├── style.css
      　　　　　　　├── script.js
      　　　　　　　└── image.png

この時点では、ユーザーが S3へ直接アクセスしてWebサイトを閲覧する構成 になっています。

S3単体でも静的Webサイトを公開できますが、 S3をインターネットへ直接公開する必要があります。

次の手順ではAmazon CloudFrontを導入し、 S3を直接公開しない構成へ変更します。

Step2 CloudFront経由で静的Webサイトを公開する

次にAmazon CloudFrontを利用し、 S3を直接公開しない構成へ変更します。

この手順では、以下の設定を行います。

• ・S3を非公開にする
• ・CloudFrontディストリビューションを作成する
• ・最初に表示するファイルとしてindex.htmlを設定する
• ・CloudFront経由でWebサイトを表示できることを確認する
• ・S3へ直接アクセスできないことを確認する

① S3の公開設定を変更する

CloudFrontの作成前に、Step1で公開したS3を非公開に戻します。

設定内容

• ・パブリックアクセスブロック： すべて有効にする
• ・静的ウェブサイトホスティング： 無効にする

設定手順

1. 対象のS3バケットを開きます。
2. ［アクセス許可］タブを開く
3. ［ブロックパブリックアクセス (バケット設定)］の［編集］をクリックします。
4. すべてのパブリックアクセスをブロックする設定を有効にします。
5. ［変更の保存］をクリックします。
6. ［プロパティ］タブを開きます。
7. ［静的ウェブサイトホスティング］の［編集］をクリックします。
8. ［静的ウェブサイトホスティング］を無効にします。
9. ［変更の保存］をクリックします。

ポイント

• ・CloudFront導入後は、ユーザーがCloudFrontを経由してコンテンツを閲覧する構成に変更します。
• ・S3を非公開にすることで、S3のオブジェクトURLから直接ファイルを閲覧できない状態にします。

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

Amazon CloudFrontコンソールを開き、 ［ディストリビューションを作成］をクリックします。

設定内容

• ・ディストリビューション名： clf-dist-[name]-01
• ・オリジン： Step1で作成したS3バケット

設定手順

1. ［ディストリビューションを作成］をクリックします。
2. ディストリビューション名にclf-dist-[name]-01を入力します。
3. オリジンタイプで［Amazon S3］を選択します。
4. オリジンの［Browse S3］をクリックします。
5. 作成したS3バケットを選択します。
6. ［Create distribution］をクリックします。

ポイント

• ・オリジンとは、CloudFrontが配信するコンテンツの取得元です。
• ・今回はHTMLや画像を保存しているS3バケットをオリジンとして指定します。
• ・「ウェブサイトのエンドポイントを使用」は選択しません。
• ・S3バケット自体を選択することで、S3を非公開にした構成でCloudFrontからコンテンツを配信できます。

③ S3バケットポリシーを設定する

CloudFrontディストリビューションを作成すると、S3バケットポリシーを更新するよう注意書きが表示されます。

CloudFrontからS3へアクセスできるようにするため、表示されたバケットポリシーをS3へ設定します。

設定手順

1. CloudFrontの画面に表示された注意書きを確認します。
2. ［ポリシーをコピー］をクリックし、表示されたバケットポリシー(JSON)をコピーします。
3. S3バケットを開き、［アクセス許可］タブを選択します。
4. ［バケットポリシー］の［編集］をクリックします。
5. コピーしたポリシーを貼り付けます。
6. ［変更の保存］をクリックします。

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

ディストリビューションを作成したら、 最初に表示するHTMLファイルを設定します。

作成したディストリビューションを開き、 以下の順番で設定画面へ移動します。

［一般］タブ→［編集］

設定内容

• ・デフォルトルートオブジェクト： index.html

ポイント

• ・デフォルトルートオブジェクトは、URLの末尾にファイル名を指定しなかった場合に表示するファイルです。
• ・index.htmlを設定すると、CloudFrontのドメイン名だけでトップページを表示できます。

⑤ CloudFront経由で動作確認する

CloudFrontコンソールに表示されている ディストリビューションドメイン名をコピーします。

コピーしたドメイン名をブラウザのURL欄へ入力し、 Webサイトが表示されることを確認します。

確認する内容

• ・CloudFrontのディストリビューションドメイン名からWebサイトを表示できる
• ・index.htmlが自動的に表示される
• ・HTML、CSS、画像などが正しく読み込まれる

ポイント

• ・ディストリビューションの作成直後は、設定が反映されるまで時間がかかる場合があります。
• ・すぐに表示されない場合は、少し時間を置いてから再度アクセスします。

⑥ S3へ直接アクセスできないことを確認する

CloudFrontからWebサイトを表示できることを確認した後、 S3のindex.htmlに表示されている オブジェクトURLへアクセスします。

想定される結果

• ・CloudFrontのドメイン名からはWebサイトを表示できる
• ・S3のオブジェクトURLからはWebサイトを表示できない

ポイント

• ・CloudFrontから表示でき、S3のオブジェクトURLから表示できなければ設定は成功です。
• ・この状態では、ユーザーがCloudFront経由でのみWebサイトを閲覧する構成になっています。
• ・S3のオブジェクトURLから表示できてしまう場合は、パブリックアクセスブロックの設定を確認します。

この時点の構成

             ユーザー
                 │
                 ▼
        Amazon CloudFront
      （コンテンツを配信）
                 │
                 ▼
           Amazon S3
      （直接アクセス不可）

次の手順ではAWS WAFを利用し、 スマートフォンのIPアドレスからのアクセスをブロックします。

Step3 AWS WAFで特定のIPアドレスをブロックする

最後にAWS WAFを設定し、 特定のIPアドレスからのアクセスをブロックします。

今回はスマートフォンのモバイル回線で使用しているIPアドレスを登録し、 スマートフォンからWebサイトを閲覧できなくなることを確認します。

この手順では、以下の設定を行います。

• ・スマートフォンのIPアドレスを確認する
• ・AWS WAFでIPセットを作成する
• ・保護パック（Web ACL）のデフォルトアクションを許可にする
• ・IPセットに一致するアクセスをブロックするルールを追加する
• ・スマートフォンからアクセスできないことを確認する

① スマートフォンのIPアドレスを確認する

はじめに、ブロック対象として登録するスマートフォンのIPアドレスを確認します。

確認手順

1. スマートフォンのWi-FiをOFFにします。
2. モバイル通信へ切り替わっていることを確認します。
3. ブラウザで「cman」と検索します。
4. 表示されたIPアドレスを控えます。

ポイント

• ・Wi-Fi接続のままだと、PCとスマートフォンが同じIPアドレスを使用する場合があります。
• ・今回はスマートフォンだけをブロックするため、Wi-Fiを切ってモバイル回線へ切り替えます。
• ・モバイル回線のIPアドレスは変更される場合があるため、設定前に確認します。

② IPセットを作成する

AWS WAFコンソールを開き、 ［IPセット（IPアドレスセット）］から新しいIPセットを作成します。

設定内容

• ・IPセット名： waf-ipset-[name]-01
• ・スコープ： CloudFront
• ・IPアドレス： 控えたIPアドレスの末尾に/32を付ける

例えば、確認したIPアドレスが133.15.24.33の場合は、次のように入力します。

133.15.24.33/32

設定手順

1. AWS WAFコンソールを開きます。
2. サイドバーの［IPセット］を選択します。
3. ［IPセットを作成］をクリックします。
4. IPセット名にwaf-ipset-[name]-01を入力します。
5. スコープでCloudFrontを選択します。
6. 控えたIPアドレスの末尾に/32を付けて入力します。
7. 設定を保存します。

ポイント

• ・IPセットは、アクセス制御に使用するIPアドレスをまとめて管理する機能です。
• ・スコープには、今回保護する対象であるCloudFrontを選択します。

③ 保護パックのデフォルトアクションを許可にする

続いて、CloudFrontディストリビューションに関連付けられている保護パック（Web ACL）のデフォルトアクションを確認します。

対象の保護パックを開き、以下の順番で設定画面へ移動します。

［保護パック（Web ACL）］→［管理］→［自分の保護パック］→［詳細を管理］→［保護パックの動作］→［設定］

設定内容

• ・デフォルトアクション：許可（Allow）

設定手順

1. AWS WAFコンソールを開きます。
2. ［保護パック（Web ACL）］の一覧を開きます。
3. 候補となる保護パックのリソース欄で［管理］をクリックします。
4. 作成したCloudFrontディストリビューションが表示されていることを確認します。
5. ［自分の保護パック］を開きます。
6. ［詳細を管理］をクリックします。
7. ［保護パックの動作］を開きます。
8. ［設定］をクリックします。
9. デフォルトアクションが**「許可（Allow）」**に設定されていることを確認します。
10. 必要に応じて設定を変更し、保存します。

ポイント

• ・デフォルトアクションは、追加したルールに一致しなかったアクセスの扱いを決める設定です。
• ・今回は基本的なアクセスを許可し、指定したスマートフォンのIPアドレスだけをブロックします。
• ・そのため、デフォルトアクションを許可に設定します。

④ AWS WAFにブロックルールを追加する

CloudFrontディストリビューションの画面から、 作成したIPセットを使用するブロックルールを追加します。

設定画面

［CloudFrontディストリビューション］ →［セキュリティ］ →画面右上のプルダウン →［Manage rules］ →［Add rule］

設定内容

• ・Action： Block
• ・Rule name： waf-rule-[name]-01
• ・If a request： matches the statement
• ・IP address list： 事前に作成したIPセット

設定手順

1. Amazon CloudFrontコンソールを開きます。
2. サイドバーの［ディストリビューション］を選択します。
3. 今回作成したCloudFrontディストリビューションを選択します。
4. ［セキュリティ］タブを開きます。
5. 画面右上にあるプルダウンメニューを開きます。
6. プルダウンメニューから［Manage rules］をクリックします。
7. ルールの管理画面が表示されたら、［Add rule］をクリックします。
8. ［Custom rule］を選択します。
9. ［Action］で［Block］を選択します。
10. ［Rule name］にwaf-rule-[name]-01を入力します。
11. ［If a request］で［matches the statement］を選択します。
12. ［Inspect］で「Originates from an IP address in」を選択します。
13.  表示された［IP address list］から、事前に作成したIPセットを選択します。
14. 設定内容を確認し、［Add rule］をクリックします。
15. 最後に変更内容を保存します。

ポイント

• ・このルールでは、アクセス元のIPアドレスがIPセットに登録されているかを確認します。
• ・IPアドレスが一致した場合、そのアクセスはBlockによって拒否されます。
• ・一致しなかったアクセスは、デフォルトアクションの許可によって通常どおり表示されます。

⑤ スマートフォンから動作確認する

設定を保存したら、反映されるまで1〜2分程度待ちます。

その後、スマートフォンのWi-FiがOFFになっていることを確認し、 モバイル通信でCloudFrontのディストリビューションドメイン名へアクセスします。

想定される結果

• ・スマートフォンからWebサイトを閲覧できない
• ・PCなど、IPセットに登録していない端末からはWebサイトを閲覧できる

ブロックされない場合の確認ポイント

• ・スマートフォンのWi-FiがOFFになっているか
• ・スマートフォンの現在のIPアドレスが、IPセットに登録した値と一致しているか
• ・IPアドレスの末尾に/32を付けているか
• ・ルールのActionがBlockになっているか
• ・ルールで正しいIPセットを選択しているか
• ・対象の保護パックが自分のCloudFrontディストリビューションに紐づいているか
• ・設定後、1〜2分程度待ってから確認しているか

最終的な構成

             ユーザー
                 │
                 ▼
            AWS WAF
       （IPアドレスを確認）
                 │
         許可されたアクセス
                 │
                 ▼
        Amazon CloudFront
      （コンテンツを高速配信）
                 │
                 ▼
           Amazon S3
 （HTML・CSS・画像などを保存）

ユーザーからのアクセスは、AWS WAFによって確認されます。

IPセットに登録されているIPアドレスからのアクセスはブロックされ、 それ以外のアクセスはCloudFrontへ送られます。

CloudFrontは、S3に保存されているコンテンツを取得してユーザーへ配信します。

まとめ

今回の構築では、

• ・S3で静的Webコンテンツを保存し、
• ・CloudFrontで高速かつ効率的に配信し、
• ・AWS WAFでアクセスを制御する

というAWSでよく利用される静的Webサイト配信構成を体験しました。

単に設定手順を追うだけでなく、「なぜその設定が必要なのか」「各サービスがどのような役割を果たしているのか」を理解することで、AWS全体の構成イメージもつかみやすくなりました。