WordPressで構築されているウェブサイトにCloudFrontを立てて高速化&セキュリティ強化②

概要

前回、WordPressで構築した自社サービスサイトの表示速度が遅い、という問題が生じていたのですが、CloudFrontを利用することで、サーバーの移行等をせずに、高速化対応できたお話しをいたしました。
ポイントとしてはWordPressが動いているサーバーはEC2上でなく、他社レンタルサーバーや他社VPSでも、CloudFrontを利用できるという点です。

前回記事はこちら

今回は実際に弊社YouWireサービス紹介サイト
https://www.youwire.jp/
を設定した際の具体的な設定方法を解説します。

変更前と変更後の構成

変更前

YouWireのサイトは単一のVPS上に構築されており、111.111.111.aaaのGlobalIPアドレスを持っているとします。

DNSサーバー上ではwww.youwire.jpのFQDNとグローバルIP111.111.111.aaaを紐づけるAレコードの設定がされています。

VPS上ではNginxが動いていて、www.yowuire.jpのVirtualHostの設定がされており、SSLのみの接続を許可し、ポート80httpの通信は全て443httpsへリダイレクトする設定となっています。

訪問者がブラウザにhttps://www.youwire.jpと打ち込むと、DNSサーバーが111.111.111.aaaを返し、ブラウザは111.111.111.aaaのサーバーにアクセスする、このときhttpsヘッダーのHostにwww.youwire.jpのFQDNが入ります。

VPS上のNginxは、virtualhost設定されたどのserver_nameのアクセスを受けたウェブサーバーは、このHost部を見て、一致するserver_nameのサイトwww.youwire.jpを表示するようになってます。

変更後

図上でポイントとなる変更箇所は赤字で示しています、少々ロジックが複雑ですが、仕組みを順番に説明していきます。

訪問者とCloudFront間の通信

訪問者はCloudFront上のキャッシュまたはCloudFrontを経由してVPS上のYouWireのサイトにアクセスすることになります。
CloudFrontを構築するとAWSからそのCloudFrontにアクセスするためのDomainNameが自動で割り当てられます。
訪問者がwww.youwire.jpをブラウザに打ち込んだ際に、CloudFrontから割り当てられたDomainNameにアクセスできるように、CNAMEを割り当てます。

httpの通信はhttpsにリダイレクトし、https通信だけ許可するという設定は今度はCloudFront上で行います。
訪問者がCNAMEを経由してCloudFrontから割り当てられたDomainNameにアクセスする際に、訪問者の場所に最も近いEdgeLocationのGlobalIPアドレスが返されます。
エッジロケーションにwww.youwire.jpのコンテンツがキャッシュされていればそのキャッシュを即返します。
キャッシュがない場合、キャッシュの有効期限切れ、もしくはそのURLをキャッシュしない設定にしている場合は、「オリジン」と呼ばれる本体ウェブサーバーにCloudFrontがアクセスします。

CloudFrontとオリジン間の通信

この際、CloudFrontの仕様で、ウェブサーバーを指定するOriginDomainNameにIPアドレスを指定することができずドメイン指定しかできなくなっているため、CloudFrontがアクセスする用のドメインを設定します。
また、CloudFrontとウェブサーバー間の通信は、訪問者とCloudFront通信プロトコルと関係なくhttpのみ、httpsのみ、httpとhttps両方を選ぶことができます。
今回は、訪問者⇔CloudFrontはhttpsで、CloudFront⇔オリジンはhttpという設定にしてみます。

POSTデータを扱うお問い合わせフォームの設定

また、www.youwire.jpのサイトではお問い合わせフォームが設置されています。
お問い合わせフォームでは当然訪問者がお問い合わせ情報を入力して送信した後に、メールが送信される仕組みになっており、CloudFrontにはメール送信機能はないため、お問い合わせフォームだけはPOSTを許可し、キャッシュを使用せず常にオリジンサーバーと通信するように設定します。

ログインさせない

本番サイトにログインして直接記事編集することは許可しないため、ログインページとログイン後ページでは、QueryStringを転送せず、POSTも許可せずCookieも転送しないという設定を行います。

CloudFrontの設定

CloudFrontのメニューに移動し、「Create Distribution」から、Webのディストリビューションを作成開始します。

Origin Settings

項目名説明
Origin Domain Nameoriginal.youwire.jpCloudFrontがアクセスするオリジンのドメインを指定します。
IPアドレス指定はできない仕様になってますので、オリジンアクセス用に設定したドメインoriginal.youwire.jpを指定します。
Origin Pathたとえば、訪問者がwww.youwire.jpにアクセスした際に、オリジンサーバーのトップページが
origin.youwire.jp/public_html/といった形でサブディレクトリ配下にサイトを構成している場合、
/public_htmlと入力して転送するといった用途に使用します、今回は使用しません。
Origin ID自動で入るオリジンを識別するIDです、特に気にする部分ではなく、Origin Domain Nameを入力すると自動でふられるので、特に変更せずそのまま使用します。
Origin SSL ProtocolsTLSv1.2
TLSv1.1
TLSv1
CloudFrontからオリジンとHTTPS通信するためのプロトコルです、今回はCloudFrontとオリジン間はhttpに限定するため、関係ないので、デフォルト設定にしておきます。
SSLv3は使用しないことが推奨されてます。
Origin Protocol PolicyHTTP Only今回はCloudFrontとオリジン間はhttpに限定するため、「HTTP Only」を選択します。
Origin Response Timeout30CloudFrontがオリジンからのレスポンスを待つタイムアウト時間です、デフォルトの30秒にします。
Origin Keep-alive Timeout5CloudFrontがオリジンとの接続を切るまでの時間。このサイトではオリジンとの接続を維持する必要はないので、デフォルトの5秒にします。
HTTP Port80デフォルトの80にします。
HTTPS Port443今回はCloudFrontとオリジン間はhttpに限定するため、関係ないので、デフォルト設定にしておきます。
Origin Custom HeadersCloudFrontからオリジンに通信する際に特定のヘッダーを付与したい場合に使用します。
CloudFrontからの通信だけ受け入れるなど、認証用途などで使用できますが、今回は使用しないので空欄のままにしておきます。

Default Cache Behavior Settings

項目名説明
Path PatternDefault(*)キャッシュの挙動はパスごとに設定可能となります。新規作成時にはDefault(*)の挙動を指定することになります。
Viewer Protocol Policy RedirectHTTP to HTTPS訪問者がCloudFrontにアクセスした際にhttpでのアクセスはhttpsにリダイレクトし、httpsでの通信だけに限定したいので、これを選びます。
Allowed HTTP MethodsデフォルトではGETとHEADのみ許可し、お問い合わせページ等POSTが必要なページだけ別途POSTも許可するように設定します。
Field-level Encryption Configお問い合わせフォームなど、個人情報を含むPOSTデータを暗号化します。今回CloudFrontとオリジンはhttp通信にしてあるので設定しますが、設定方法と説明は次回説明します。
Cached HTTP MethodsGET,HEADCloudFrontでのキャッシュを有効にしたいHTTPメソッドを選択しますが、Default(*)の挙動を指定する新規作成時には編集できません。
Cache Based on Selected Request HeadersWhitelistWhitelistを指定し、オリジンに送信するHTTPヘッダーを選択します。
Whitelist HeaderCloudFront-Forwarded-Proto
Host
CloudFront-Forwarded-Proto
オリジンに、CloudFrontを経由したアクセスであることを知らせる手段として、このヘッダーを挿入します。
オリジンのwordpressとの通信はhttpにしているため、wordpressの画面上のリンクもすべて
httpになります。CloudFrontはリンクをhttpsに書き換えてくれませんので、wordpress側でCloudFront経由の通信の場合はリンク先をhttpsに書き換えて送信するという対応をします。
これに対応した「SSL Insecure Content Fixer」というプラグインがwordpressにありますので、インストール&設定します。
Host
通常CloudFront経由でオリジンにアクセスすると、CloudFrontからオリジンへのhttp通信のHostヘッダーには、CloudFrontがオリジンにアクセスするためのドメインoriginal.youwire.jpが入ります。オリジンのvirtualhost設定ではserver_nameはwww.youwire.jpで設定してあるため、訪問者がCloudFrontにアクセスするURL情報であるwww.youwire.jpをそのままHostヘッダーに入れてオリジンに渡すためにこのHostを選択します。
Object CachingCustomizeCloudFront上にオリジンから取得したコンテンツをキャッシングする保持期間を設定します。
Use Origin Cache headersを指定すると、オリジンのHTTP Response Header内に指定された、
cache-control: の値が使用されます。この値はブラウザに渡され、ブラウザ側のキャッシュ値として使用されますが、
今回はCloudFrontのキャッシュ値は別で明示的に設定したいので、60秒✕60秒✕24時間✕30日=2592000
を指定します。コンテンツの更新頻度が低いため、長めに設定してます。
コンテンツを本番にデプロイした場合には、以下aws cliで自動的にinvalidateして明示的にキャッシュをリセットするようにwordmoveと連動させたスクリプトを用意します。
aws cloudfront create-invalidation --distribution-id $CDN_DISTRIBUTION_ID --paths "/*"
Minimum TTL0この値が0指定されていると、オリジンのHTTP Response Headerにcache-control max-ageが指定されている場合に、TTLがmax-ageの値とMaximum TTLで指定されている値の小さい方になります。
Maximum TTL31536000TTLの最大値です。
Default TTL2592000オリジンのHTTP Response Headerにcache-control max-ageが指定されてない場合のTTLになります。
Forward CookiesNone(Improves Caching)Cookieをオリジンに転送するかどうか。
wordpressにログインするのにクッキーを使いますが、CloudFront経由でログインはしませんので、無効にしときます。
Query String Forwarding and CachingForward all, cache based on whitelistquery string をオリジンに転送するかどうか。
YouWireサービスサイトでは各ページにSNSにシェアするソーシャルリンクボタンが配置されており、そこだけQueryStringが使用されているので、特定のQueryStringキーを許可するForward all, cache based on whitelistを選択します。
Query String WhitelistshareYouWireサービスサイトで使用している
https://www.youwire.jp/?share=facebook
https://www.youwire.jp/?share=twitter
https://www.youwire.jp/?share=google-plus-1
のQueryStringであるshareをホワイトリスト登録します。
SmoothStreamingNoMicrosoftのSmoothStreamingを使用する場合にはYesにしますが、今回使用しないのでNoのままにしておきます。
Restrict Viewer Access
(Use Signed URLs or Signed Cookies)
Noアクセス元を制限したり期限付きURLを使用する場合にはYesにしますが、今回は使用しないのでNoのままにしておきます。
Compress Objects AutomaticallyYesRequest HeaderにAccept-Encoding: gzipが含まれているコンテンツを自動的に
圧縮するかどうか。
速度向上のためYesにします。
Lambda Function AssociationsCloudFrontイベントをトリガーにLambda関数を呼び出す場合は設定します。
今回は使用しません。

Distribution Settings

項目名説明
Price ClassUse US., Canada, Europe, Asia, and AfricaCloudFrontのエッジロケーションは全世界にありますが、ここで使用するエッジロケーションを限定することでコストが抑えられる代わりに、エッジロケーションから遠い場所の訪問者には遅延が発生します。
YouWireは日本のみを対象としたサービスなので、アジアが含まれるこのプライスクラスを指定します。
アクセスできる国自体を制限する場合には、ここで設定するのではなくディストリビューション作成後に、Restrictionタブから指定できます。
AWS WAF Web ACLNone事前に設定したWAFを使用することができます。
今回はwordpress側のプラグインで対応するため、Noneにしておきます。
Alternate Domain Names
(CNAMEs)
www.youwire.jp前述の通り、今回はCloudFrontが生成したドメインではなく、www.youwire.jpのCNAMEとして使用しているため、www.youwire.jpを指定します。
SSL CertificateCustom SSL Certificate
youwire.jp
AWS上で作成しておいた、www.youwire.jpの証明書を指定します。
Custom SSL Client SupportOnly Clients that Support Server Name Indication (SNI)今回、訪問者へ公開しているプロトコルはHTTPSのみにしています。古いガラケーなどSNIをサポートしていないブラウザはサポートしないため、こちらを選びます。
Security PolicyTLSv1.1_2016(recommended)httpsでどのプロトコルと暗号をサポートするかを選びます、推奨となっているこれを選びます。
Supported HTTP VersionsHTTP/2, HTTP/1.1, HTTP/1.0HTTP/2もサポートします。
Default Root Object訪問者がトップページ/にアクセスした際にオリジンの/以外のコンテンツを表示したい場合に指定します。使用しません。
LoggingOnCloudFrontへのアクセスログをs3に保存するため、Onを指定。
Bucket for Logsyouwire2.s3.amazonaws.comログ保存先として作成しておいたs3バケットを指定します。
Log Prefixログのプリフィックスで、特に指定しません。
Cookie LoggingOnアクセスログにCookieを含むかで、Onにします。
Enable IPv6OnIPv6のアクセスにも対応するかで、Onにしておきます。
Commentこのディストリビューションにつけるコメントで特に指定しません。
Distribution StateEnabledこのディストリビューションを有効にするかどうかで、Enabled有効にします。

新規作成時の設定は以上で、作成後にもいくつか設定していきます。

作成したディストリビューションのIDをクリックすると、設定の変更や追加ができます。

Restrictions

指定した国からのみのアクセスを許可します。

Behaviorsの追加設定

お問い合わせページのキャッシュ設定

ディストリビューションの新規作成時には、Default Cache Behavior Settingsにてキャッシュのデフォルト設定をしました。追加で、お問い合わせページである/contact/の場合はPOST情報をオリジンに転送し、コンテンツのキャッシュはしないという設定を行います。
以下はデフォルト設定からの変更点のみ抜粋。

項目名説明
Path Pattern/contact/*contact以下を指定します。
Allowed HTTP MethodsGET, HEAD, OPTIONS, PUT, POST, PATCH, DELETEPOSTも許可します。

ログインページのキャッシュ設定

CloudFront経由でログインはさせないため、ログイン用のURLはオリジンに転送しない設定にします。

項目名説明
Path PatternログインURLログインで使用するURLを指定します。
(この例では値はあえて伏せます。)
Allowed HTTP MethodsGET,HEADPOSTを除外することでログインできなくします。
Cache Based on Selected Request HeadersNone(Improve Caching)Hostを転送しなくするのでそもそもvirtualhostが有効に機能しないようになります。
Forward CookiesNone(Improve Caching)クッキーが使用できなくして、ログインセッションの維持をできなくします。

CloudFrontの一通りの項目説明に触れたため、少々難しい内容になってしまいましたが、上記を行うことで、オリジンにAWSのサービスを使用することなくCloudFrontを前面に立てて、高速且つ安全なwordpressの運用が可能となりました。

既に運用中のwordpressホームページをAWSへサーバー移行は出来ないけども、速度を早くしてほしい、といった要望がある場合にはCloudFrontを活用して解決する、といったことが可能となります。

ギークフィードではAWS全般の設計支援やコンサルティングも行っておりますので、お困りの方はお問い合わせページよりお気軽にご相談ください。

この記事が気に入ったら
いいね ! しよう

Twitter で
The following two tabs change content below.
内信史
内信史
代表取締役
意識高い系IT企業経営者、エンジニア、コンサルタントだがMacは使いこなせない。 ギークフィードファウンダー、代表取締役、中小企業診断士、 オープンソースコンサルタント、コンタクトセンターシステムコンサルタント、データサイエンティスト エンジニアとして今でもよく触るものはElasitcSearch/Amazon OpenSearch、AWS、Linux、c++ 中小企業診断士としては、会社地元台東区の中小企業向けにホームページやSNSを利用したマーケティングプロモーション支援を実施。

【採用情報】一緒に働く仲間を募集しています

採用情報
ページトップへ