Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
OrganizationEventAdvent CalendarQiitadon (β)
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

WordPress の画像を S3 にアップロードして、CloudFlare 経由で配信する


  • EC2 + RDS を使って WordPress を構築する
  • EC2 は ALB 配下にいる
  • WordPress のメディア機能からアップロードした画像を S3 に配置する
  • CloudFlare を経由して S3 の画像を表示させ、キャッシュもさせる


Cloudflare Setup for Amazon S3 を見ながら設定



1. CloudFlare のネームサーバにドメインの設定をする

  • Type: CNAME
    • ALB の DNS 名を指定したいので、CloudFlare の CNAME Flattening を使用
  • Name: 対象ドメイン名(xxx.com など)
  • Value: ALB の DNS 名(xxx-alb-xxx.ap-northeast-1.elb.amazonaws.com など)
  • TTL: Automatic
  • Status: DNS and HTTP proxy

2. サイト表示確認

ブラウザから xxx.com にアクセスして WordPress のトップページが表示されること

3. AWS S3 バケット作成

  • バケット名は画像用の CMANE と同じ名前にすること
    • 例. image.xxx.com など
  • パブリックアクセスの読み取りが行えるようにしておくこと

4. 仮想ホスト形式の URL でバケットへのアクセス確認


5. CloudFlare のネームサーバに画像用のドメインの設定をする

  • Type: CNAME
  • Name: 画像用ドメイン名(バケット名)
  • Value: バケットの仮想ホスト形式の URL (バケット名.s3-ap-northeast-1.amazonaws.com)
  • TTL: Automatic
  • Status: DNS and HTTP proxy

6. WP Offload Media 設定

  • Provider: Amazon S3
  • Bucket: 画像用ドメイン名(バケット名)
  • Copy Files to Bucket: ON
  • Path: 任意のディレクトリ
  • Year/Month: ON
  • Object Versioning: ON
  • Rewrite Media URLs: ON
  • CustomDomain(CNAME): 画像用ドメイン名(バケット名)
  • Force HTTPS: ON

7. CloudFlare の SSL 設定

Crypto → SSL → Full

8. キャッシュ確認

Chrome のデベロッパーツールなどで画像のレスポンスヘッダに「cf-cache-status: HIT」が出力されていれば OK

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Help us understand the problem. What are the problem?