前回、WordPressのメディアファイルをS3に保存する手順について解説した。
前回の記事: WordPressのメディアをS3にアップロードする手順
今回はその続きで、S3に保存した画像などのコンテンツをCloudFrontで配信する手順を解説する。
そのため、下記の手順が完了していることが前提。
→ S3バケット作成済み
→ プラグイン「WP Offload Media Lite」とS3連携済み
→ メディア管理に画像をアップロードしたらS3に画像が保存される
まだの方は前回の記事↑を参考に設定を済ませて欲しい。
CloudFrontでS3のファイルを配信する理由
サイト配信を高速化したいことと、SEO的な理由がある。
画像をS3に保存→参照するだけでは、https://s3.ap-northeast-1.amazonaws.com/….のようにURLがS3を参照しているのでSEO的にもよろしくない。できれば独自ドメインで配信したい。
そこで、CloudFrontを使って配信速度を高速化しつつ、S3に配置している画像URLをサブドメイン(freelance321.com)で配信しようというわけだ。
環境
| 画像保存先 | S3 |
| ドメイン設定 | Route53 メインドメイン: freelance321.com メディア配信: freelance321.com |
| CDN | CloudFront |
| WordPressサーバー | AWS Lightsail |
ざっくり構成
手順
S3に保存した画像などのコンテンツをCloudFront(今回の場合はサブドメイン)で配信する場合、下記の手順で行う。
- CloudFrontでディストリビューションを作成
- CloudFrontディストリビューションとドメインを紐付ける
- プラグイン「WP Offload Media Lite」でCloudFrontの設定をする
1. CloudFrontでディストリビューションを作成する
S3のバケットが作成済みの場合、オリジンドメインは選択できるようになっている。
また、S3バケットアクセス項目で「はい、OAIを使用します」を選択することで、ユーザーはS3バケットから直接ではなく、CloudFront 経由でのみファイルにアクセスできるようになる。
次にキャッシュ設定について。
基本的にデフォルトのままで大丈夫だが、「ビューワープロトコルポリシー」を「Redirect HTTP to HTTPS」を選択する。こうすることでHTTPリクエストは自動的に HTTPS リクエストにリダイレクトされる。
ここでドメインとの紐付けを準備。
代替ドメイン名にて、サブドメイン(freelance321.com)を入力する。
そしてACMで発行したSSL証明書を登録する。証明書が既に発行済みであれば、「カスタム SSL 証明書 – オプション」項目で証明書が選択できる。
以上でCloudFrontディストリビューションの作成は完了。
2. CloudFrontディストリビューションとドメインを紐付ける
次にCloudFrontとサブドメインを連携する。
CloudFrontディストリビューションを作成したら、ディストリビューションの詳細からディストリビューションドメインをコピーする。
次に、Route53コンソールからホストゾーンに移動してレコードを作成する。
レコード名にサブドメインを入力し、値にディストリビューションドメインをペーストすればOK。
以上で、CloudFrontディストリビューションとドメイン紐付けは完了。
3. プラグイン「WP Offload Media Lite」でCloudFrontの設定をする
最後にプラグインの設定を行う。
設定 > WP Offload Media Liteから、DELIVERYの設定をS3→CloudFrontに変更する。
変更が完了したら、カスタムドメインを登録する。
Custom Domain(CNAME)の箇所に、メディアを配信したいサブドメイン(freelance321.com)を入力して保存すれば完了。
以上のステップで、画像の配信URLがfreelance321.comに変更された。
当記事の画像のURLを見ていただくと、freelance321.comになっている。
