オリジンサーバーとは？CDN・エッジとの違いと、更新が古いままのときの見方

サイトの画像を新しいものに差し替えた。なのに、スマホで開くと古い画像のまま。CDNの管理画面には「オリジン」という言葉が並んでいて、何を指しているのか分からない。

オリジンサーバーとは、Webサイトや配信データの「元」を持っているサーバーで、CDNやエッジサーバーに控えがないときや更新が必要なときに、元のファイルや処理結果を取りに行く先です。 古い画像が残る場面では、「元」が新しいのか、「控え」が古いのかを分けることが最初の一歩になります。

漫画：元を変えたのに、古いまま？ 全4ページ

イトは模型の元の絵を丸から三角へ変えたのに、端末には丸が残ることに気づく。ピコとオリジンとエッジの札を確かめ、元を持つ引き出しを開いて見る。最後にイトは元と控えの札を分け、更新を調べる場所を選ぶ。

先に本文の解説を読む ↓

画像を押すと拡大できます。＋／−で大きさを変え、拡大中はドラッグして読めます。

1 / 4変えたはずの絵と違う

ラボの更新模型で、イトが持つ新しい絵は橙の三角。端末の画面には前の青い丸が残り、ピコも一緒に見ている。

1ページ目のセリフ

• イト「新しくしたのに、変わらない？」

2 / 4元の側と控えの側

同じ展示棚の上の箱はオリジンで三角、下の別の箱はエッジで丸。場所ごとに内容が違う例を確かめる。

2ページ目のセリフ

• 模型の役割「オリジン」
• 模型の役割「エッジ」

3 / 4元を持つ場所で確かめる

イトはオリジン模型の引き出しを開き、元の絵が橙の三角になっていると確かめる。ピコはそこへ元の札を添える。

3ページ目のセリフ

• 模型の役割「オリジン」
• 内容の札「元」

4 / 4元と控えを分けて見る

イトが元の札をオリジンへ、控えの札をエッジへ置く。元を確認したあと、古い絵が残る控えの場所を調べると決める。

4ページ目のセリフ

• 模型の札「元」・「控え」
• イト「元と控えを、分けて見よう。」

横にスワイプして次のページへ。画像を押すと拡大できます。

絵と引き出しは元と控えを区別する模型です。古い表示の原因が必ずCDNだとは限らず、ブラウザのキャッシュや元の更新漏れ、アプリの処理なども関係します。オリジン側は複数の機器やストレージで成り立つ場合があり、すべてが一台の中に固定ファイルで置かれるわけではありません。更新が自動で瞬時に全拠点へ届くとは示していません。

本文の解説へ ↓

閉じる ×

← 前

−

100%

＋元の大きさ

次 →

拡大中はマウスや指でドラッグできます。100%では左右スワイプ・左右キーでページ送り。

オリジンサーバーとCDN・エッジ・キャッシュの違い（本館と分室）

オリジンサーバーは、CDNやエッジサーバーと並べると一番早く分かります。図書館で言えば、オリジンが本館、エッジが近所の分室、CDNが分室のネットワーク全体、キャッシュが分室の棚にある控えです。

イト

エッジサーバーの奥に、本館って書かれた扉があったよ

ピコ

そこがオリジンサーバーのたとえだよ。元のコンテンツを持つ場所として見よう

ユイ

分室の控えではなく、元データを見る場所なんですね

分室に控えがあれば、分室がそのまま返します。控えがないときや、控えを新しくするときに、分室は本館へ取りに行きます。この「取りに行く先」がオリジンサーバーです。第59話「オリジンサーバーは何を持っている？」の本館が、そのたとえです。

では本館の棚には、具体的に何が置いてあるのでしょうか。

オリジンサーバーが持っているもの：HTML・画像・APIの返事の元

オリジン側には、サイトやサービスの元になるものが置かれるか、そこで作られます。

• HTMLや、ページを組み立てた結果
• 画像、CSS、JavaScript、フォント
• 動画や音声の元ファイル
• APIの返事
• アプリケーションの処理と、データベースから取り出した内容

本館は1台の機械とは限りません。実際には、Webサーバー、アプリケーションサーバー、データベース、ストレージに分かれていることが多く、まとめて「オリジン側」と呼びます。入口の見方は一つで足ります。CDNの控えではなく、元を持つ側です。

マコト

オリジンは本館、エッジは近くの分室、CDNはその全体の仕組みなんだね

ユイ

元と控えを分けるだけで、古い表示の原因も追いやすくなります

元と控えが分かれていると便利な反面、冒頭の「差し替えたのに古いまま」が起きます。見る順番を決めておきます。

更新したのに古いまま？オリジンサーバーとキャッシュを順に見る

画像やCSSを差し替えたのに画面が変わらないときは、元から外へ向かって、この順に見ます。

1. オリジンサーバーの元ファイルは新しいか。ここが古ければ、CDNの控えを消しても古いものが戻ってくるだけです。
2. エッジサーバーの控えは新しいか。元は新しいのに控えが古いなら、CDNの管理画面で控えを消す操作（パージ）をします。
3. ブラウザの控えは新しいか。自分の端末だけ古いなら、ページの再読み込みで直ります。

三つを見ても変わらないときに、ファイル名やURLが変わっていないか、アプリケーションが古い結果を作り続けていないかを疑います。「どこが古いか」を先に決めるだけで、むやみにパージをくり返す時間がなくなります。

サイトが落ちたとき、オリジンサーバーを疑う症状

オリジンサーバーが止まると、見える場所と見えない場所が分かれます。分室に控えがある画像やCSSは返せるのに、新しいページ、ログイン後の画面、APIの返事のように本館が要るものだけ開かない。この症状が出たら、オリジン側が候補です。

確認するときは、返ってこないものを五つに分けます。

• エッジの控えから返っているもの
• オリジンへ取りに行く必要があるもの
• アプリケーションやデータベースが要るもの
• ログイン状態やCookieが関係するもの
• DNSやCDNの設定が関係するもの

「サイトが落ちた」と一言でまとめず、どの経路のどの内容が返っていないかを言えると、問い合わせの相手も、直す場所も決まります。

オリジンサーバーを守る考え方：CDNの後ろに置く

オリジンサーバーは元を持つ場所なので、守り方も決まります。CDNを使う構成では、利用者からのアクセスをエッジサーバーで受け、オリジンへ直接つなぐ道を制限します。本館に殺到する負荷を分室で受け止め、本館の住所を外から見えにくくする、という考え方です。

細かい設定は環境ごとに変わりますが、見る項目は同じです。オリジンをどこに置くか、CDNからのアクセスだけ受け付けるか、管理画面をどう守るか、バックアップをどう取るか。サーバーを置く建物はデータセンターとは、借りて使う考え方はクラウドとはで続きます。

オリジンサーバーから順に確かめるワーク

画像を差し替えたのに古い表示が残る場面を思い浮かべ、次の三つを順に声に出してみてください。

1. オリジンサーバーの元ファイルは新しいか
2. エッジサーバーの控えは新しいか
3. ブラウザの控えは新しいか

オリジンサーバーでよくある質問

Q1. 自分のサイトのオリジンサーバーは、どれですか？

サイトのファイルを置いているサーバーです。レンタルサーバーやクラウドの仮想マシンにファイルを置いているなら、それがオリジンで、CDNはその前に立つ分室です。

Q2. エッジサーバーが新しければ、オリジンは古いままでもいいですか？

いいえ。控えには期限があり、切れると分室は本館へ取りに行きます。そのとき本館が古ければ、古いものが全体へ広がります。

Q3. オリジンが新しいのに、古い表示が出ることはありますか？

あります。エッジサーバーかブラウザに古い控えが残っているときです。前の節の2と3を見ます。

古い画像が直らないときは、オリジンサーバーから順に見る

冒頭の「差し替えたのに古いまま」に戻ります。古い画像が残っている場所は、オリジンの元ファイル、エッジの控え、ブラウザの控えの三つしかありません。元から順に見れば、どこで止まっているかが分かります。漫画でイトが丸と三角の札を分けたのと同じことです。

次にサイトのファイルを差し替えるときは、先にオリジンのファイルが新しいことを確かめ、それからCDNのパージ、最後に自分のブラウザの再読み込み、の順でやってみてください。分室の仕組みをもう少し追うなら、エッジサーバーとはとCDNとはが続きです。