やりたかったこと
- EC2 + RDS を使って WordPress を構築する
- EC2 は ALB 配下にいる
- WordPress のメディア機能からアップロードした画像を S3 に配置する
- CloudFlare を経由して S3 の画像を表示させ、キャッシュもさせる
やったこと
Cloudflare Setup for Amazon S3 を見ながら設定
環境
- ドメイン管理：お名前.com
- ネームサーバ and CDN：CloudFlare（Plan: Free Website）
- サーバ環境
- CentOS 7.5
- PHP 7.2 （Packages - IUS）
- WordPress 4.9.8
- プラグイン： WP Offload Media Lite for Amazon S3 and DigitalOcean Spaces バージョン 2.0
やったこと
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