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つの​グループに​畳んでしまえば、​地図と​して​頭に​入ります。