なぜ「あの人」には別の画面が見えるの？HTTPの「Varyヘッダー」が握るキャッシュの秘密
Webサイトを見ていて、「あれ、さっきまでスマホ版が表示されていたのに、PCからアクセスしたらレイアウトが崩れている…？」なんて経験はありませんか？
実はこれ、Webブラウザとサーバーの間にいる「キャッシュサーバー（CDN）」が、ちょっとした勘違いをしていることが原因かもしれません。今日は、インターネットという広大な世界で、郵便配達員が「誰に何を届けるべきか」を見失わないための重要ルール、「Vary（ヴェアリー）ヘッダー」について、一緒に紐解いていきましょう。
—
そもそも「キャッシュ」って何をしているの？
まず、基本のお話から。Webサイトを閲覧するとき、私たちのブラウザは「このページのデータちょうだい！」とサーバーに手紙（リクエスト）を出します。
しかし、毎回毎回、遠く離れたサーバーに手紙を出すのは大変ですよね。そこで、私たちの近所（あるいはネットワークの要所）には「キャッシュサーバー」という名の「自動販売機」や「保管所」が設置されています。
1. 初回： キャッシュサーバーが「本物のサーバー」からデータをもらってきて、手元にコピーを置く。
2. 2回目以降： 別の誰かが同じページを求めたら、本物のサーバーまで行かずに、手元のコピーをサッと渡す。
これがあるおかげで、インターネットは爆速で動いているのです。
—
そこで立ちはだかる「Varyヘッダー」の壁
さて、ここからが本題です。もし、「スマホでアクセスした人」と「PCでアクセスした人」で、全く別のWebページを表示させたい場合はどうすればいいでしょうか？
サーバーは、リクエストを受け取ったときに「おっ、この人はスマホだな。スマホ用のレイアウトを送ろう」と判断します。でも、キャッシュサーバーは「一度覚えたデータ」を使い回すのが仕事です。
もし、キャッシュサーバーが「PCの人」からのリクエストに対して、「スマホ用のデータ」を渡してしまったら……大変なことになりますよね。
ここで登場するのが「Varyヘッダー」です。これは、サーバーからキャッシュサーバーへの「注意書き」です。
> 「このデータはね、受け取った手紙の中の『User-Agent（ブラウザの種類）』という項目によって中身が変わるから、そこをちゃんと確認してから渡してね！」
というメモを添えるイメージです。
—
不適切な設定が招く「キャッシュ汚染」の恐怖
もしこのVaryヘッダーを正しく設定しなかったらどうなるでしょうか？
例えば、最初にアクセスしたのが「スマホ」だったとします。キャッシュサーバーは「このURLのデータはこれだ！」とスマホ用の画面を保存します。次に「PC」からアクセスが来ても、キャッシュサーバーは「もう持ってるよ！」とスマホ用の画面を渡してしまいます。
これを現場では「キャッシュ汚染（Cache Poisoning）」と呼びます。間違ったデータがキャッシュとして居座り、世界中のユーザーに誤った情報が配られ続ける……インフラエンジニアとしては冷や汗が止まらない状況です。
—
具体的な設定を見てみよう
実際に、サーバー側でどのように設定されているかを見てみましょう。Webサーバー（ApacheやNginxなど）の設定ファイルで、以下のような指示を出します。
Nginxの設定例
「User-Agent（ブラウザの種類）によって中身が変わるよ」と伝えます
add_header Vary “User-Agent”;
「Cookie（ログイン状態など）によっても変わる可能性があるよ」という場合
add_header Vary “User-Agent, Cookie”;
- Vary: User-Agent
- スマホかPCかを判断基準にする場合に設定します。
- Vary: Cookie
- ログインしているユーザー用と、そうでないユーザー用で画面を分ける場合に必要です。
注意点： 闇雲に何でもかんでもVaryに追加すればいいわけではありません。あまりに細かく設定しすぎると、キャッシュサーバーが「種類が多すぎて覚えきれない！」とキャッシュを諦めてしまい、結局サーバーの負荷が減らない……という本末転倒な事態にもなります。
—
まとめ：一歩ずつ理解していこう
Varyヘッダーを理解することは、インターネットの「交通整理」のルールを理解することに似ています。
1. キャッシュは「使い回し」の達人。
2. でも、人によって中身が違うページがある。
3. 「見分けるポイントはここだよ！」と教えてあげるのがVaryヘッダー。
もし実務で「特定のブラウザだけ表示がおかしい」「キャッシュをクリアしたら直った」という現象に出会ったら、まずはこのVaryヘッダーの設定を疑ってみてください。
ネットワークの世界は、こうした小さな「メモ書き」の積み重ねで、複雑で巨大な情報を正しく届けているんです。今日から少しだけ、ブラウザの向こう側にある「見えない配送ルート」に思いを馳せてみてくださいね。
皆さんのエンジニアライフが、よりスムーズなものになりますように！
コメント