AWS CloudFront を使ったウェブサイトホスティングの設定と最適化 -個人開発の試行録-

Posted at 2025-02-22

はじめに

AWS CloudFront を使ってウェブサイトをホスティングしようとしたが、初心者として多くの疑問点に直面した。本記事では、自身の試行錯誤を通じて得た知見を整理し、CloudFront を利用する際の設定方法や注意点をまとめる。

1. CloudFront のディストリビューション作成

CloudFront を利用するには、まずディストリビューションを作成する必要がある。特に、静的サイトを配信する場合と動的なデータを扱う場合では、適切な設定が異なる。

ディストリビューション作成手順

AWS マネジメントコンソールで「CloudFront」を開く。
「ディストリビューションを作成」ボタンをクリック。
オリジンドメインの選択
- 静的サイトホスティングの場合: s3-website-<region>.amazonaws.com
- API ストレージ用途の場合: s3.<region>.amazonaws.com
オリジンプロトコルポリシーの選択
- 静的サイトの場合: HTTP Only
- API ストレージの場合: HTTPS Only
オリジンアクセス制御（OAC）を有効化
その他のオプションを設定し、「作成」ボタンをクリック。

疑問点:

s3-website エンドポイントではなく s3 エンドポイントを使うべき理由は？
- → API 経由でデータをやり取りするなら s3 エンドポイントが必要。
- → s3-website は静的ホスティング用のため、CloudFront で動的データを扱うには適さない。

2. CloudFront のオリジン設定

CloudFront では、S3 バケットのどのエンドポイントをオリジンとして指定するかによって、挙動が変わる。

設定項目	静的サイト（S3ウェブサイトホスティング）	APIストレージ（通常のS3エンドポイント）
オリジンドメイン	`s3-website-<region>.amazonaws.com`	`s3.<region>.amazonaws.com`
オリジンプロトコルポリシー	HTTP のみ	HTTPS のみ
オリジンアクセス制御（OAC）	無効でも可	必須
アクセス制御方法	バケットポリシーで公開設定	CloudFront の OAC を使用

オリジンの変更手順

CloudFront の「オリジン」タブを開く。
既存のオリジンを削除。
「新しいオリジンを追加」ボタンをクリック。
オリジンドメインに s3.<region>.amazonaws.com を入力。
「オリジンアクセス制御（OAC）」を有効にする。
「作成」ボタンをクリック。

疑問点:

なぜ OAC（オリジンアクセス制御）が必要なのか？
- → CloudFront 以外からの直接アクセスを防ぐことで、セキュリティを強化できる。

3. バケットポリシーの設定

CloudFront から S3 へアクセスするためには、バケットポリシーを適切に設定する必要がある。

バケットポリシーの記述例

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Principal": {
        "Service": "cloudfront.amazonaws.com"
      },
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::your-bucket-name/*",
      "Condition": {
        "StringEquals": {
          "AWS:SourceArn": "arn:aws:cloudfront::YOUR_AWS_ACCOUNT_ID:distribution/YOUR_CLOUDFRONT_ID"
        }
      }
    }
  ]
}

疑問点:

YOUR_CLOUDFRONT_ID ってどこで確認するの？
- → AWS コンソールの CloudFront の「ディストリビューション一覧」から確認可能。

4. キャッシュとパフォーマンス最適化

CloudFront のキャッシュ設定を適切に行うことで、パフォーマンスを向上させることができる。

設定項目	静的サイト向け	動的サイト向け
キャッシュポリシー	`CachingOptimized`	`CachingDisabled`
オリジンリクエストポリシー	デフォルト	`AllViewerExceptHostHeader`
HTTP メソッド	`GET, HEAD, OPTIONS`	`GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE`

疑問点:

なぜキャッシュを無効化するのか？
- → API のレスポンスが毎回異なるため、キャッシュすると意図しないデータが返される可能性がある。

5. HTTPS 対応とセキュリティ強化

CloudFront では、HTTPS を強制することでセキュリティを向上できる。

設定手順

CloudFront の「Behaviors（ビヘイビア）」タブを開く。
「ビューワープロトコルポリシー」を Redirect HTTP to HTTPS に変更。
必要に応じて AWS Certificate Manager（ACM）で SSL 証明書を発行。

疑問点:

なぜ Redirect HTTP to HTTPS にするのか？
- → ユーザーが意図せず HTTP でアクセスした場合も、HTTPS へリダイレクトすることでセキュリティを向上できる。

6. 設定の確認とデプロイ

CloudFront の設定変更が適用されるまで最大 20 分ほどかかる。

確認すべきポイント

https://your-cloudfront-id.cloudfront.net/ にアクセスし、正常に表示されるか。
キャッシュ設定が適用されているか。
S3 バケットのアクセス許可が正しく設定されているか。

まとめ

本記事では、AWS CloudFront を使用して S3 上の静的サイトや API ストレージをホスティングする方法を、初心者目線で整理した。CloudFront を適切に設定することで、ウェブサイトのパフォーマンス向上やセキュリティ強化が実現できる。

参考文献

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up