• aws

S3に保存したWordPressのメディアをCloudFrontで配信する

前回、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
CDNCloudFront
WordPressサーバーAWS Lightsail

ざっくり構成

手順

S3に保存した画像などのコンテンツをCloudFront(今回の場合はサブドメイン)で配信する場合、下記の手順で行う。

  1. CloudFrontでディストリビューションを作成
  2. CloudFrontディストリビューションとドメインを紐付ける
  3. プラグイン「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になっている。

関連記事

コメント

この記事へのコメントはありません。