はじめに
こんにちは。クラウド事業部の山田です。
WordPressをホストする環境の構築を例にAWSの操作を学びました。
WEB３層のシステムをAWSで構築してみた（WordPress）：前編
WEB３層のシステムをAWSで構築してみた（WordPress）：後編
WEB３層のシステムをAWSで構築してみた（WordPress）：セキュリティ向上
今回はCloudFrontを経由してWebサイトを表示する基本的な設定手順を検証しました。
目次
構築済み環境と変更点
・VPC上の2つのアベイラビリティゾーンにてそれぞれパブリックサブネットとプライベートサブネットを用意し、プライベートサブネットにWordPressが起動するEC2インスタンスとRDSインスタンスを配置します。
・上記環境にCloudFrontを加え、下記制限のうえCloudFrontからELBを経由してWordPressのサイトを表示します。
・CloudFrontに紐づけたWAFにより、操作端末のGIPからのHTTP接続のみを許可します。
・ELBに対してCloudFront以外から接続できないように制限します。
構築にあたり事前確認を要する事項
・リソース名の確認を要する既存リソース
・ELBのDNS名
対象ELBの画面を開き、上部に表示される"DNS 名"項を確認します。
・接続元として許可する操作端末のGIP
参考) アクセス情報【使用中のIPアドレス確認】
環境構築
※ リソース名は案件ごとのネーミングルールに基づいて指定してください。
今回は社内検証のため「syamada-<サービス略称>-<番号>」としました。
共通操作
前回同様の下記操作でリソース作成などを進めます。
各AWSサービス画面の表示とリソース作成
検証環境特有の操作：作成したリソースをリソースグループに登録
１．CloudFrontの作成
CloudFrontの作成
参考：WordPress に最適な CloudFront キャッシュ設定 (2023年度版)
１．[CloudFront]画面 - 左ペイン[ディストリビューション]を開き[ディストリビューションを作成]ボタンをクリックします。
２．下記設定でディストリビューションを作成します。
・Origin domain：<ELBのDNS名>
・名前：<リソース名を指定>
・プロトコル：HTTPのみ
・キャッシュキーとオリジンリクエスト：
Cache policy and origin request policy(recommended) - Create cache policy から
[キャッシュポリシーを作成]画面を開きキャッシュポリシーを作成します。
今回は STEP.1 キャッシュポリシーを作成 を参考にWordPress向けの設定を行いました。
・名前：<キャッシュポリシー名を指定>
・TTL設定：
・最小 TTL：60
・最大 TTL：31536000
・デフォルト TTL：86400
・キャッシュキー設定
・ヘッダー：次のヘッダーを含める
Authorization
Host
・クエリ文字列：次以外のすべてのクエリ文字列を含める
fb_ref
fbclid
fb_action_types
fb_action_ids
gclid
utm_campaign
utm_content
utm_medium
utm_term
utm_source
・Cookie：指定された cookie を含める
comment*
wordpress
wp-settings-
・圧縮サポート
Gzip ：■
Brotli：■
・ウェブアプリケーションファイアウォール(WAF)：セキュリティ保護を有効にする。
３．作成されたディストリビューションの名前を控えます。
ビヘイビアの設定
１．作成されたディストリビューション - [ビヘイビア]タブを開き[ビヘイビアを作成]ボタンをクリックします。
今回は STEP 2. ビヘイビア設定 を参考にWordPress向けの設定を行いました。
下記設定値で既存パスパターンを編集または新規作成します。
・パスパターン：
デフォルト (※既存)
/wp-includes/
/wp-content/
・オリジン：<ELBのDNS名>
・オブジェクトを自動的に圧縮：Yes
・ビューワー：Redirect HTTP to HTTPS
・許可された HTTP メソッド：GET, HEAD
・ビュワーのアクセスを制限する：No
・キャッシュキーとオリジンリクエスト：Cache policy and origin request policy (recommended)
キャッシュポリシー：<キャッシュポリシー名>
下記設定値でパスパターン3つを新規作成します。
・パスパターン：
/wp-login.php
/wp-admin/
/wp-json/
・オリジン：<ELBのDNS名>
・オブジェクトを自動的に圧縮：Yes
・ビューワー：Redirect HTTP to HTTPS
・許可された HTTP メソッド：GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE
・ビュワーのアクセスを制限する：No
・キャッシュキーとオリジンリクエスト：Legacy cache settings
・ヘッダー：すべて
・クエリー：すべて
・cookie：すべて
２．CloudFrontへの接続元GIP制限
CloudFront向けWAFの設定
参考：CloudFrontとWAFでIP制限をかけてみた(ハマったポイントの解説あり)
CloudFrontに紐づけたWAFにより、操作端末のGIPからのHTTP接続のみを許可します。
設定の流れとしては[Web ACL]の作成、接続元IPを定義する[IP sets]の作成と[Web ACL]への登録、
CloudFrontのWAFへ[Web ACL]の関連付けとなります。
１．[WAF & Shield]画面 - 左ペイン[Web ACLs]を開き[Create web ACL]ボタンをクリックします。
２．下記設定でWeb ACLsを作成します。
・Resource type：Amazon CloudFront distributions
・Name：<リソース名を指定>
・Default web ACL action for requests that dont match any rules：Block
・Request sampling options：Enable sampled requests
３．[WAF & Shield]画面 - 左ペイン[IP sets]を開き[Create IP set]ボタンをクリックします。
４．下記設定でIP setsを作成します。
・IP set name：<リソース名を指定>
・IP addresses：<操作端末のGIPを登録>
５．[WAF & Shield]画面 - 左ペイン[Web ACLs]にて先ほど作成したWeb ACLを開きます。
６．[Rules]タブを開き[Add rules]プルダウン - [Add my own rules and rule groups]を選択します。
７．下記設定でルールを登録します。
・Name：<ルール名を指定>
・IP set：<作成したIP setを指定>
・IP address to use as the originating address：Source IP address
・Action：Allow
８．[WAF & Shield]画面 - 左ペイン[Web ACLs]にて先ほど作成したWeb ACLを開きます。
９．[Associated AWS resources]タブを開き[Add AWS resources]ボタンをクリックします。
１０．下記設定でCloudFrontに接続制限を適用します。
・Resouce type：CloudFront Distribution
・Select the resources you want to associate with the web ACL：<作成したディストリビューションを指定>
１１．[Associated AWS resources]タブの[Associated AWS resources]欄にCloudFrontディストリビューションが登録されていることを確認します。
１２．作成したCloudFrontディストリビューションの画面 - [セキュリティ]タブからもWeb ACLが紐づいていることを確認できます。
３．ELBへの接続制限
参考：Application Load Balancers へのアクセスを制限する
CloudFront以外からELBに接続できないように制限します。
CloudFront側のリクエストにHTTPヘッダーを付与し、そのHTTPヘッダーを含むリクエストのみにレスポンスするようELB側を設定します。
１．作成したCloudFrontディストリビューションの画面 - [オリジン]タブの[編集]ボタンをクリックします。
２．下記設定でCloudFrontに接続制限を適用します。
・Origin domain：<接続先のELBのDNS名>
・プロトコル：HTTPのみ
・[ヘッダーを追加]ボタンをクリックして下記項目にて任意の値を指定します。
・ヘッダー名
・値
３．次に、ターゲットグループ(ELBの接続対象のグループ)の名前を事前確認します。
アクセス先のELBの画面の[リソースマップ - 新規]タブを開き、[リソースマップ]欄右端の[ターゲットグループ]の名前を控えます。
４．続いて[リスナーとルール]タブ - [HTTP:80]ルールを選択します。
５．表示される画面にて[ルールを追加する]ボタンをクリックします。
６．下記設定でルールを追加します。
・名前とタグ
キー：Name
値：<ルール名を指定>
・条件の追加
・ルール条件タイプ：HTTPヘッダー
・HTTPヘッダー名：<CloudFront側で指定したヘッダー名>
・HTTPヘッダー値：<CloudFront側で指定した値>
・アクション
・ターゲットグループ：<接続先のターゲットグループを指定>
・優先度：1
７．[リスナールール]欄にて追加したルールと[デフォルト]ルールが表示されていることを確認します。
続いて[デフォルト]ルールを編集して許可されていない接続元へのレスポンスを定義します。
８．[リスナールール]欄の[デフォルト]を選択します。
９．[アクション]プルダウン - [ルールの編集]を開きます。
１０．下記設定でルールを編集します。
・アクションのルーティング：固定レスポンスを返す
・レスポンスコード：403
・コンテンツタイプ - 省略可能：text/plain
・レスポンス本文：Access denied
４．接続確認
１．作成したCloudFrontディストリビューションの画面 - [ディストリビューションドメイン名]欄のURLにブラウザで接続します。
※ 今回はAWSのリソースとWordPressでHTTPSに対応する設定を行っていないため画像が表示されません。
２．CloudFrontのWAFに設定した接続元IPの制限を確認します。
接続元GIPに含まれない端末から同様に接続を試行し、CloudFrontのエラー画面が表示されることを確認します。
３．ELBに設定したHTTPヘッダーによる接続元の制限を確認します。
ブラウザにELBのDNS名を入力して"Access denied"と表示されることを確認します。
以上
