はじめに

Amazon S3とAmazon CloudFrontを組み合わせて、静的Webサイト（HTML/CSS/JS等）を配信するインフラを構築しました。
本記事では、AWSマネジメントコンソールを使った具体的な構築手順に加え、セキュリティ強化のための OAC（Origin Access Control） の設定や、キャッシュ最適化の設定について解説します。

本記事で達成すること

S3バケットへの直接アクセスを遮断し、CloudFront経由のみに制限（OACの設定）
HTTPアクセスを自動的にHTTPSへリダイレクト
AWSマネージドキャッシュポリシー（CachingOptimized）を活用した配信の高速化
構築後の接続テストと動作確認（IP制限も実施）

構成図・全体像

ユーザーからのアクセスをCloudFrontで受け取り、S3バケット内の静的ファイルを配信します。

[ ユーザー ]
  │ (HTTPS)
  ▼
[ CloudFront Distribution ] 
  |
  |( OAC認証 )
  ▼
[ S3 Bucket (パブリックアクセス不可)]

Step 1: S3バケットの作成とコンテンツのアップロード

S3バケットの作成
- バケット名: 任意のユニークな名前（例: s3andcloudfront-kandu）
- リージョン: ap-northeast-1（東京）
- ブロックパブリックアクセス: すべてオン（S3自体は公開しません）
静的ファイルのアップロード
- index.html などのコンテンツをバケット直下にアップロードします

Step 2: CloudFront ディストリビューションの作成

オリジンの設定 (Origin Settings)
- Origin Type：Amazon S3 を選択
- Origin Domain: 作成したS3バケットを選択 (s3andcloudfront-kandu.s3.ap-northeast-1.amazonaws.com)
- Origin Access: Origin Access Control settings (recommended) を選択
  - OAC（Origin Access Control）を新規作成し、バケットに紐付けます
  - ※ OACを設定することで、S3への直接アクセスを防ぎ、CloudFront経由でのみコンテンツを取得できるようセキュリティを担保します
- Origin について、諸々設定を行いました。主な設定は下記キャプチャの通りです
- 基本的にはディストリビューション作成をデフォルト設定で行えば、セキュリティ的にも問題はありません
- ただし、セキュリティの観点でそれぞれどう設定がされているのか、確認を行います
デフォルトキャッシュビヘイビアの設定 (Default Cache Behavior)
- Viewer Protocol Policy
  - セキュリティ向上のため、HTTPアクセスは自動的にHTTPSへリダイレクトさせます
  - Viewer Protocol Policy が「Redirect HTTP to HTTPS」であることを確認します
- Cache key and origin requests
  - Cache Policy が「Managed-CachingOptimized」であることを確認します
  - 今回は静的コンテンツを配信するため、AWSマネージドポリシーの CachingOptimized が最適です
  - CloudFront側で効率よくキャッシュを保持/利用するため、同じコンテンツへの再アクセス時にS3へアクセスが発生せず、レスポンス速度の向上とOriginへの負荷軽減/コスト削減（Pay as you goの最適化）が期待できます

Step 3: S3バケットポリシーの設定 (OACのアクセス許可)

CloudFrontからのアクセスのみを許可するよう、S3バケットポリシーを設定します。

S3コンソールの「アクセス許可」タブ＞「バケットポリシー」に以下のようなJSONを設定します

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AllowCloudFrontServicePrincipal",
            "Effect": "Allow",
            "Principal": {
                "Service": "cloudfront.amazonaws.com"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::s3andcloudfront-kandu/*",
            "Condition": {
                "StringEquals": {
                    "AWS:SourceArn": "arn:aws:cloudfront::123456789012:distribution/YOUR_DISTRIBUTION_ID"
                }
            }
        }
    ]
}

Step 4: AWS WAFの設定と動作確認（自身のIPをAllow設定）

まずは、これまでの設定で該当ファイル（index.html）にアクセスを行います。
URLはCloudFrontの該当ディストリビューション内の下記で確認できます。

URLは参考例ですが、下記となります。

URL：https://xxxxxxxx.cloudfront.net/index.html

該当のURLでアクセスしたところ、Step1にてS3のバケットに配置したhtmlファイルへアクセスすることができました。

では、続いて、AWS WAF（Web Application Firewall）を作成し、該当IP以外からのアクセスを除外する設定を行います。

これは、CloudFrontディストリビューションに関連付けて自身のIPアドレスからのアクセスのみを許可（Allow）する設定です。

1. Web ACL の作成とルール設定

自身のIPのみを許可する Web ACL を構築します。
AWS WAF コンソールで [Web ACLs] を選択し、[Create web ACL] をクリックします。
Web ACL の作成画面にて、「リソースを追加」をクリックし、該当のCloudFrontを指定します。

グローバルから、「CloudFront リソースまたは Amplify リソースを追加」をクリックします。

Step2 で作成した CloudFront ディストリビューションが表示されるため、こちらを選択します。

初期の保護を選択では、今回は IP制限だけですので、一番右の「お客様が構築」をクリックします。

続いて、画面右に表示されるカスタムルールを選択し、「IP ベースのルール」を指定します。
「ルールの追加」では、下記を指定します。

ルールを追加
- Action：Allow
- Name：任意（今回は allow-cloudfront-wafRule を指定）
- IPアドレス：許可したいIPアドレスを指定（複数ある場合は改行で指定してください）

画面左に戻り、Web ACL の作成を完了させます。

2. 動作確認（自身のIPをAllow設定）

引き続き該当のHTMLファイルにアクセスが可能であることを確認します。

Step5: 動作確認（自身のIPをBlock設定）

では、先ほどの IPアドレスの制限について、Blockをすることで、サイトがブロックされることを確認してみます。

再度該当のHTMLファイルにアクセスが可能であることを確認します。
403エラーとなり、自身のIPアドレスがブロックされていることを確認できました。

注意

WAFのルールを変更した直後にブラウザで確認する際は、シークレットウィンドウを使うか、ブラウザキャッシュをクリアしてアクセスすると確実です。

まとめ

本記事では、S3 ＋ CloudFront による静的コンテンツ配信基盤の構築と、AWS WAF によるアクセスコントロールの検証を行いました。

今回一番面白かったのは、AWS WAFで「Allow（許可）」と「Block（拒否）」を設定した際の実際の挙動の違いを確認できた点です。
設定変更後にアクセスしてみて、想定通り 200 OK から 403 Forbidden に変わった瞬間は「しっかりセキュリティが効いている！」と達成感がありました。

クラウドインフラは画面上の設定だけで完結するため手軽な反面、セキュリティ設定を一歩間違えると意図しない公開に繋がってしまいます。今回のように「作って終わり」ではなく動作確認、そして使い終わったらディストリビューションの停止など、今後も使いそうな設定を学ぶ良い機会になりました。

この記事が、これからS3とCloudFrontを用いてWebサイトを公開/保護しようとしている方の参考になれば幸いです！