AWS CloudFront

今回は前回（WordPressの画像をAWS S3に保存するようにしてみた）の続きということで。（実はこれ記念すべき10回目の投稿なんですが…続きってなるとなんか締まらないなぁｗ） 前回はWordPressの画像データをS3に格納するように設定したが、今回はCloudFrontを使ってCDNを設定していく。（背景とかサービスの選定理由あたりの話は前回投稿も見ていただければと！） なお、ここでCDNを使って配信するのはあくまでS3に格納された画像ファイルのみであって、HTML他ブログ全体の話ではないので、予めご了承ください。 CloudFrontディストリビューションの作成 とりあえずディストリビューションを作ってみる。 １．CloudFrontディストリビューションの画面から「ディストリビューションを作成」をクリック ２．料金プランを聞かれるので、（当然）無料プランを選択 ３．Distribution nameに任意の値を設定して次へ（他は特段設定不要 or 任意でどうぞ） ４．Origin typeには「Amazon S3」を選択し、「S3 origin」には「Browse S3」から画像を格納しているS3バケットを選択する（Origin pathは空欄のままでOK） SettingsもデフォルトのままでOK（要望があればCustomizeから適宜設定変更しても良い。が、Redherringの場合このあたり特に要望とかないので…ちゃんと配信出来れば何でもｗ） ５．WAFの設定画面が出てくるが、特に何もせず次へ ※ WAFは従量課金プラン（Pay as you go）を使っている場合、WAFを有効化すると別料金がかかったりするので慎重に検討した方が良いが、今回使用している無料プランだと（一部機能制限がかかるものの）無料で使えるのであまり気にしなくてよい ※ 「Use monitor mode」のチェックは基本つけなくてOK。ただし、万が一にもWAFで通信が遮断されると困る、みたいなクリティカルな要件があればチェックを付けて「遮断せずに検知のみ」のモードにしておくとよい。まあ個人ブログはちょっと遮断されたくらいじゃ問題ないよね…多分。 ６．設定を確認してディストリビューションを作成 ７．作成したディストリビューションの詳細画面で「最終更新日」欄が「デプロイ中」表記から日時が表示されれば作成完了 ８．後段で使用するため、ディストリビューションドメイン名をコピーし、任意の場所に保管しておく。 S3のアクセス設定変更 前回LightsailインスタンスからS3に画像データを格納するにあたって全体公開する他色々設定を弄ってしまったので、その修正も兼ねてS3の設定変更も実施。 １．ディストリビューションの詳細画面から「オリジン」タブを開き、オリジン名を選択して「編集」をクリック ２．Origin access control欄にある「ポリシーをコピー」をクリックして、必要に応じて任意の場所に保管しておく ３．S3バケットの「アクセス許可」を開き、「バケットポリシー」の「編集」からバケットポリシーを前項でコピーしたものにすべて上書きする ※ CloudFrontディストリビューション作成時に一部編集されていて、CloudFrontディストリビューションからのアクセス許可が追記されてるはず。追記、という通り元々あった（全公開）ポリシーも残っているのでコピーしてきたポリシーで既存のポリシーを全部上書きしてきれいにする。 ４．S3バケットの「アクセス許可」を開き、「ブロックパブリックアクセス」の「編集」から「パブリックアクセスをすべてブロック」にチェックを入れて更新する。（確認画面が出てくるけど指示に従って続行） ５．S3バケットの「アクセス許可」を開き、「オブジェクト所有者」の「編集」からACLを無効化する これで（一旦全公開にした）S3バケットを非公開に設定し、CloudFrontからのアクセスのみ許可する形にできた。 WP Offload Media LiteにCloudFrontのURLを設定 最後にWordPress（のプラグイン）にCloudFrontを使用するように設定する。 １．WordPressの管理画面からWP Offload Media Liteの画面を開き、MEDIAタブのDelivery Settingsの画面からProviderの「Edit」をクリックし、CloudFrontに変更する ２．Delivery Settingsの画面から、「User Custom Domain Name （CNAME）」のチェックを付けて、前項でコピーしておいたCloudFrontディストリビューション名（xxxxxx.cloudfront.net）をを入力する。「Force HTTPS」もチェックを付けてから、「Save ＆Changes」をクリック ３．（必要に応じて数分待ってから「Check Again」をクリックして）Delivery Settingsの画面に「Delivery provider is successfully connected ～」と出ていればOK。 動作確認 ここまでやれば全て設定できているはず、ということで。 過去の投稿を開いて、画像を右クリックして「新しいタブで画像を開く」をクリック。別タブで開いた画像のリンクがCloudFrontのアドレスになっていることを確認する。（スクショは省略するけど問題なさそう） もう一つ確認。元々画像データのS3移動とCloudFrontの導入を検討する事になった発端は動作の遅延によるものだった。実際に動作遅延が落ち着いたかは…まあしばらく様子を見るとして、リソースの使用量がどれくらい変わったかを見てみる。（インスタンスにSSHしてtopコマンドをたたく） うーん、あんまり変わってるようには見えないｗ まあこれで動作遅延が軽減できるなら良いし、インスタンスの中に画像データを大量に入れるのも避けた方が良い気がしてたので、この（早めの）タイミングで是正できたのでヨシとしておく。 動作遅延がまだ頻発するようならまた考えましょうということで。 ということで今回はここまで。 ちなみにGemini君曰く、ブログ全体の速度向上を目指すならLightsailに具備されているディストリビューション機能を使うのがおススメとのこと。機会があればそれも記事にするかも(`･ω･´)b

S3に保存されているWordPressの画像データをCloudFrontで配信するようにしてみた