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

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