Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

やりたかったこと

  • 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 でバケットへのアクセス確認

https://バケット名.s3-ap-northeast-1.amazonaws.com

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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした