Varnish勉強会でフロントエンド担当が学んだこと
緒方 恭平
こんにちは、モチヤでフロントエンドを担当している緒方です。
モチヤでは、毎週水曜日に社内勉強会を開催し、数ヶ月に一度外部講師をお招きしています。
2022年8月29日の勉強会では、レッドボックスの小川さんをお招きし、キャッシュ（Varnish）についてご教示いただきましたので、フロントエンド担当の目線から今回の感想をブログにまとめます。
最初に小川さんのご紹介です。
合同会社レッドボックス
CEO 小川 勝久（Katsuhisa Ogawa）
キャッシュ屋ブログも運営しており、CDNやキャッシュについて詳しく投稿されています。
以前代表の阿部もWebサイトの高速化について一緒に登壇いたしました。
https://knowledge.cpi.ad.jp/tech/238/
今回、内容としてはインフラ・バックエンド向けですが、結果的にページの読み込み速度にも貢献できるVarnishはフロントエンド担当としても重要な課題であり大変勉強になりました。
Varnish（バーニッシュ）とは
Varnishとは、コンテンツキャッシュに特化したミドルウェアです。
Apache、Nginx、SQUIDなど、他のミドルウェアと比べ多くのリクエストが捌け、リソースの消費が少ないという点でハイパフォーマンスだと言われています。
また標準ツール（コンソールなど）でデバッグが容易なこともVarnishのメリットです。
Varnishの設置イメージは以下の図のようになり、HTTPリクエストに応じてキャッシュを返す仕組みを提供します。
※上図はVarnish設置の一例のため要件によってチューニング可能です。
※Varnishを導入できるのは、専用サーバーなどのミドルウェアがインストールできるサーバーに限られます。
GitHubのリポジトリを見ても、2011年ごろから開発されているようで、調べてみると当時のブログが散見され、歴史を感じました。
キャッシュできるコンテンツ
キャッシュ可能なコンテンツは、一般的にWebでアクセスできるあらゆるコンテンツ（Web Socketは除く）が対象です。
その中でもSTATICコンテンツとDYNAMICコンテンツの2種類に分類することができます。
STATICコンテンツは、更新頻度が低いコンテンツのため比較的安全に取り扱えます。
例として、会社概要ページやCSSファイルがあげられます。
DYNAMICコンテンツとは、プログラムで表示内容を生成しているコンテンツなどであり、更新頻度が高いため、取り扱いには注意が必要です。
例として、お知らせ一覧ページや検索結果ページがあげられます。
モチヤで主に取り扱っているDrupalは、基本的にはDYNAMICコンテンツのためキャッシュすることで効果が出やすい構成です。
そのほか、WordPress等のCMSもDYNAMICコンテンツとして配信されるものが多いため効果が出やすいでしょう。
キャッシュ対象を決定するためのポイント
小川さんのお話を伺って、プロジェクトの要件ごとに最適な設計が細かくできることを知り、キャッシュ設計の奥深さを知りました。
1.課題・目的に応じて、キャッシュすべきコンテンツを精査
すべてをキャッシュ対象としても効果的ではなく、そのプロジェクトにおける課題や目的に応じて精査する必要があります。
2.DYNAMICコンテンツにおける効果とリスクの最適なバランスを選択
得られる効果はリクエストの高速化によるユーザー体験の向上です。
一方、リスクとは古いキャッシュコンテンツが対象者以外の方に見えてしまうことです。
これらの兼ね合いを見ながら十分に検討しキャッシュ設計を行う必要があります。
3.キャッシュ削除やコンテンツの反映時間を考慮
具体的には、お知らせ更新時にお知らせ一覧に反映させるためには各キャッシュをクリアする必要があります。
また、CSSファイルや画像など更新が少ないコンテンツには保持時間を長くしておくことでサーバー側の負荷を軽減できます。
VCL（Varnish Configuration Language）で設定する
Varnishの設定はVCLという独自言語を用いて設定します。
プログラム形式で設定ができ、プロジェクトの要件にあわせて臨機応変に設定することができます。
ただし、VCLのフローを理解した上で要件にあわせたキャッシュ構成を考えておく必要があり、難易度は少し高めに感じました。
それでも、ユーザーエージェントや会員認証状態に応じたキャッシュの条件分岐設定ができるVCLの存在がVarnishを使うメリットであると考えます。
VCLフローについて
小川さんに作成していただいた資料をもとに、実際にアクセスがあった際のVarnishの処理フローをご説明します。
- クライアントからのHTTPリクエストを受け取り初期処理をします。【vcl_recv】
- キャッシュの有無を確認し、hash keyを定義します。【vcl_hash】
キャッシュが見つからなかった場合【vcl_miss】
- バックエンドセクションに移動
- Varnishからバックエンドサーバーにコンテンツ取得をリクエスト【vcl_backend_fetch】
- バックエンドから取得した後の処理が実行【vcl_backend_response】
- クライアントにコンテンツを返却【vcl_deliver】
キャッシュが見つかった場合【vcl_hit】
- キャッシュ済みコンテンツを返却【vcl_deliver】
※この時、バックエンドセクションは通過しません。
ご説明したフローは簡易的なものですが、受け取ったキャッシュの状況やVCLの記述でさらに複雑な設定をすることも可能です。
VCL設定デモ
勉強会では、VCLの設定によるキャッシュ生成から削除までの一連の流れを実際のコンソール画面を使って見せていただきました。
VCL設定によって、お客さまの要件に沿ったチューニングが柔軟にできることを学び、
インフラ側でどのようにチューニングしているか触れる機会が少なかったので非常に有意義な時間になりました。
まとめ
今回のVarnish勉強会によってフロントエンド側だけでなくバックエンド・インフラ側とも協力することによって最適なコンテンツ配信を行うことができると感じました。
フロントエンド担当として、コンテンツの高速化は今後も取り組みが必要です。
そのうえで、ユーザー体験を向上させる目的のためにインフラ側でキャッシュするアプローチがあるということを学び、視野を広げることができました。
勉強会では、いろいろな質問や困りごとに対応してくださり、具体的な事例についても詳しく教えていただけたので、とても充実した時間になりました。
モチヤでは今回講師を務めていただいた小川さんと業務提携をしており、適切なキャッシュチューニングされたサーバーを構築できます。
また、Drupalでの開発・運用、Webサイト構築全般をおまかせいただけますのでぜひお気軽にご相談ください。
緒方 恭平/ フロントエンドエンジニア
フロントエンド開発を担当しています。
マシンリーダブルを意識した正しいHTML構造を日々追い求めています。
最近の目標は体重を増やして献血をすることです。
