こんにちは、Offers を運営している株式会社 overflow のバックエンドエンジニアの shun です。今回は、レスポンシブでないページを CDN へキャッシュする方法が Amazon CloudFront だと楽にできたので、それについて書きたいと思います。
Aamazon CloudFrontとは？
Amazon CloudFront は、高いパフォーマンス、セキュリティ、デベロッパーの利便性のために構築されたコンテンツ配信ネットワーク (CDN) サービスです。
（公式 より引用）
仕組みはこちら（オリジンサーバー到達まで遠いです。-> いいこと）
内容の更新性が薄いページへのアクセス時に、毎回サーバーからデータを取得して描画して...をするとサーバーの負荷が高まります。また、そもそもページロードが遅い場合はユーザ体験を損ないますし、SEO 的にもいいことがありません。
CDN 配信することで、内容の更新性が薄いページ自体をキャッシュして保持しておき、紐づいている URL へのアクセス時、事前に用意していたキャッシュを配信が可能です。また、オリジンサーバーへのアクセスを回避できるため、サーバー負荷の心配は無用かつ、SEO 対策としても有効です。
レスポンシブでないページのキャッシング方法
キャッシュポリシーを新規作成
適応したい環境のディストリビューションを選択し、ビヘイビアタブからデバイス毎にキャッシングしたい path タイプを選択後に編集ボタンをクリックします。
ページ下部に キャッシュキーとオリジンリクエスト というセクションがあるので、キャッシュポリシー > ポリシーを作成 をクリックします。
キャッシュキー設定から、最低限必要なヘッダーに追加で以下を指定
- CloudFront-Is-Tablet-Viewer
- CloudFront-Is-Mobile-Viewer
- CloudFront-Is-Desktop-Viewer
キャッシュポリシーが完成したら作成ボタンをクリックで保存。これだけです。簡単ですね。
準備が整いましたので、動作確認していきます。直近、弊社でリリースした キャリア特化型Q&A機能のパブリックなページ をもとに確認してみます。（ユーザ様のキャリアに対する悩みなどを解決すべく、Q&A 機能をリリースしております。）
PC 版は以下のような UI になってます。
SP 版は以下のような UI になってます。
PCでキャッシュ対象のページへアクセス
開発者コンソールの Networkタブ > Response Headers > x-cache: Miss From CloudFront となっていること
初回はキャッシュされないため、Miss From CloudFront の表示は正常です。オリジンサーバーへアクセス後、指定のページを表示しています。この時、Request Headers の user-agent からデバイス判定し、 desktop からのアクセスのため CloudFront-Is-Desktop-Viewer が true となります。
よって CloudFront 側でキャッシュ対象としてみなされキャッシュされています。当然ですが、PC 版の UI となっています。
ここで、同じ URL 上でリロードを行い以下を確認します。
開発者コンソールの Networkタブ > Response Headers > x-cache: Hit From CloudFront となっていること
このレスポンスの場合、正常に CDN へキャッシュされていることになります。以下のように PC 版のページが表示されていますが、これはオリジンサーバーからのレスポンスではなく CloudFront にて Hit したキャッシュページとなります。
SPでキャッシュ対象のページへアクセス
次に、開発者コンソールから UA を Mobile にして同じ URL にアクセスします。
開発者コンソールの Networkタブ > Response Headers > x-cache: Miss From CloudFront となっていること
この時には Request Headers の user-agent からデバイス判定し、mobile からのアクセスのため CloudFront-Is-Mobile-Viewer が true となります。
よって CloudFront 側でキャッシュ対象としてみなされキャッシュされています。PC 版のものとは別物としてキャッシュされているわけですね。
ここで、同じ URL 上でリロードを行い以下を確認します。
開発者コンソールの Networkタブ > Response Headers > x-cache: Hit From CloudFront となっていること
このレスポンスの場合、正常に CDN へキャッシュされていることになります。以下のように PC 版のページが表示されていますが、これはオリジンサーバーからのレスポンスではなく CloudFront にて Hit したキャッシュページとなります。
同じ URL だけども、デバイスによってページのキャッシングができていることがわかりました。非常に便利で楽ちんでした。
まとめ
今回は Amazon CloudFront を用いたデバイス毎のページキャッシュ方法について説明しました。グロースしていく中でどうしてもデバイスごとの UI/UX 設計する必要があるため、このキャッシュキー設定には非常に助けられました。ただ、User-Agent 文字列廃止に向けて各ブラウザが動き出している状況でもあるため、一部のヘッダーはキャッシュキーとして設定できなくなる可能性ありです。しかし、きっとなんとかしてくれるんだろう...!
最後にはなりますが、本記事を最後まで読んで頂き、ありがとうございました。「こんな記事を書いてほしい！」などありましたらコメントいただけると幸いです。
関連記事
副業転職の Offers 開発チームがお送りするテックブログです。【エンジニア積極採用中】カジュアル面談、副業からのトライアル etc 承っております💪 jobs.overflow.co.jp
Discussion