2026年8月18日

2026年8月18日

WordPressのAmazon CloudFrontを設定する方法

はじめに

ここでは、高性能なウェブサイトを構築するための重要なステップであるAmazon CloudFrontとWordPressとの統合方法について解説します。CloudFrontはAWSが提供するCDNサービスで、静的コンテンツ(画像やCSSファイルなど)をグローバルに高速に配信することができます。

症状・背景

このテーマが必要になる主な場面:

  • <サイトのアクセス速度向上を目指す>
  • <大規模なトラフィック対応のためにCDNを利用したい>
  • <グローバルユーザー向けに最適化したコンテンツ配信を希望する>
  • <セキュリティ強度向上とデータ転送コスト削減を同時に実現したい>

手順・設定方法

ステップ1: Amazon S3バケットを作成する

# AWS管理コンソールでS3サービスを開く
aws s3 ls

# バケット名を指定して新規作成
aws s3 mb s3://my-bucket-name

ステップ2: WordPressのメディアファイルをAmazon S3にアップロードする

# WordPressプラグイン「WP Offload Media」を使用してメディアファイルをS3に移動
wp plugin install wp-offload-media --activate

# メディアファイルの場所をS3に変更
wp woomento s3 enable

ステップ3: Amazon CloudFront配布を作成する

# AWS管理コンソールからCloudFrontサービスを開く
aws cloudfront create-distribution --distribution-config file://path/to/distribution-config.json

# S3バケットのURLをオリジンとして設定
{
  "DistributionConfig": {
    "CallerReference": "unique-id",
    "Aliases": {"Quantity":1, "Items":["example.com"]},
    "DefaultRootObject": "",
    "Origins": {
      "Quantity": 1,
      "Items": [
        {
          "Id": "my-bucket-name",
          "DomainName": "my-bucket-name.s3.amazonaws.com",
          "OriginPath": "/",
          "CustomHeaders": {"Quantity":0},
          "S3OriginConfig": {}
        }
      ]
    },
    "DefaultCacheBehavior": {
      "TargetOriginId": "my-bucket-name",
      "ForwardedValues": {
        "QueryString": false,
        "Cookies": {"Forward": "none"},
        "Headers": {"Quantity":0},
        "QueryStringCacheKeys": {"Quantity":0}
      },
      "TrustedSigners": {"Enabled":false,"Quantity":0},
      "ViewerProtocolPolicy": "redirect-to-https",
      "MinTTL": 0,
      "AllowedMethods": {
        "Quantity": 2,
        "Items": ["GET", "HEAD"],
        "CachedMethods": {"Quantity": 2, "Items": ["GET", "HEAD"]}
      },
      "Compress": false,
      "SmoothStreaming": false,
      "DefaultTTL": 86400,
      "MaxTTL": 31536000
    }
  }
}

ステップ4: CloudFrontの配布設定をWordPressと連携させる

# WordPressプラグイン「WP Offload Media」を使ってCloudFrontのエンドポイントを設定
wp woomento s3 set-cdn-url --cdn-url=https://d123abc.cloudfront.net

注意事項

  • <すべての静的ファイルがCloudFront経由で配信されることを確認する>
  • <セキュリティポリシーやオプションは、具体的な要件に基づいて調整する>
  • <定期的にパフォーマンス監視と最適化を行ってください>

まとめ

1. CloudFrontの初期設定: Amazon S3バケットを作成し、WordPressのメディアファイルを移動させる。

2. 配布作成: CloudFront配布を作成してS3バケットをオリジンとして設定する。

3. WordPressとの連携: WordPressプラグインを使用してCloudFrontと連携させ、CDNからのコンテンツ配信を有効にする。

4. セキュリティとパフォーマンス: セキュリティポリシーやオプションは具体的な要件に基づいて調整し、定期的に監視を行う。

関連記事:

お気軽にご相談ください

お見積りへ お問い合わせへ