Webサイトが表示されるまでの数秒間

URLを入れてEnterを押してから、ページが出るまで。体感では一瞬ですが、その裏では毎回きっちり同じ手順が踏まれています。この手順を一度だけ通しておくと、この先に出てくる言葉がほとんど自動的につながります。

登場人物は4人だけです

難しそうな言葉が並びますが、役割で言えばこれだけです。

• ブラウザ：あなたのパソコンやスマホで動いている、ページを見るためのアプリ
• DNS：住所を調べる電話帳
• サーバー：中身が置いてあるコンピューター
• CDN：各地にある、中身のコピー置き場

ステップ1・2：住所を調べる

example.com のような文字は、人間が覚えるためのものです。コンピューター同士は、この名前では相手を見つけられません。実際の通信には 104.16.132.229 のような数字の住所を使います。

そこで、名前から数字を引くための電話帳が必要になります。それがDNSです。ブラウザは「example.com の住所を教えて」とDNSに聞いて、数字を受け取ってから、はじめて通信を始めます。

ステップ3・4：中身を取りに行く

住所がわかったので、中身をもらいに行きます。ここで登場するのがサーバーです。

ただ、毎回サーバーまで取りに行くのは、遠いと時間がかかります。そこで登場するのがCDNです。世界各地にコピーを置いておいて、近い場所から返します。第1章の「近所の営業所」の話です。

Cloudflareは、この流れのどこにいるのか

ここが面白いところなんですよね。Cloudflareは、この登場人物のうちDNSもCDNも、そしてサーバーの役まで引き受けられます。

• DNS … Cloudflareに任せられます（第7章）
• CDN … Cloudflareの標準機能です。設定不要で効きます
• サーバー … Workersが代わりに答えを返します（第6章）
• 置き場所 … 画像やファイルはR2に置きます（第9章）

つまり、この教科書を読み終わるころには、この図の登場人物がまるごとCloudflareの中で完結しています。借りるサーバーはありません。管理する機械もありません。

「静的」と「動的」の違い

この先ずっと出てくる区別なので、ここで押さえます。難しくありません。

静的（せいてき）は、誰が見ても同じものです。会社の紹介ページ、置いてある画像、PDFのメニュー表。あらかじめ作っておいて、聞かれたらそのまま渡せます。コピーを各地に置いておけるので、CDNと相性が抜群です。

動的（どうてき）は、見る人やタイミングで中身が変わるものです。ログインしたあとのマイページ、検索結果、「現在の登録者数は◯人です」といった表示。渡す前に、その場で作らなければなりません。

この2つは、置き場所も作り方も変わります。整理するとこうです。

• 静的なもの … 置いておくだけ。Cloudflareに置けばそのまま世界に配れます（第5章・第9章）
• 動的なもの … その場で作る係が必要です。それがWorkersです（第6章）

ちなみに、あなたが第5章で最初に公開するのは静的なページです。置くだけで動くので、いちばん転びにくいところから始めます。

この章のまとめ

ページが出るまでの流れは、住所を調べる、近くにコピーがあるか確認する、なければ取りに行く、この3つです。Cloudflareはその全部の位置に立てます。そして中身には、誰が見ても同じ「静的」と、その場で作る「動的」があります。

次の章では、Cloudflareのサービス名が大量に出てきます。ただし覚える必要はありません。4つのグループに畳んでしまえば、地図として頭に入ります。