ゼロからわかるCloudflare
章タイムスタンプ
この動画をテキストで読む
Cloudflareをゼロから紹介
こんにちは、しゅうへいです。今日は、Cloudflareというサービスを、ゼロから紹介します。名前は聞いたことがあっても、結局なにができるのかよく分からない。ぼくも、ずっとそうでした。
でもこの6分を見終わるころには、Cloudflareで何ができるのか、その全体像がつかめるようにします。じつは、ぼくが作った学習サイトも、まるごとこのCloudflareの上で動いています。むずかしい言葉はできるだけ使わずに、順番に見ていきましょう。
DNS設定という地獄
まずは、ぼくの昔の話をさせてください。ぼくはずっと、ホームページまわりの設定でつまずいてきました。なかでもきつかったのが、DNSという設定です。これは、ドメインとサーバーをつなぐための設定なんですが、とにかく分かりにくい。
一文字でもまちがえると、サイトがまるごと表示されなくなります。しかも、どこがまちがっているのか、画面はなにも教えてくれません。何時間もにらめっこして、結局つながらなくて心が折れる。これを、何度もくり返してきました。
毎月のサーバー代に消耗
もうひとつ、じわじわ消耗していたのがサーバー代です。サイトをネット上に置いておくだけで、毎月お金がかかります。アクセスが増えると表示が重くなって、上のプランに変えてくださいと言われる。
使っていても使っていなくても、請求だけは毎月きちんと来ます。ぼくみたいに、いくつもサイトを作りたい人間には、これがずっと重荷でした。サーバーの管理そのものも面倒で、正直、逃げ出したいとずっと思っていました。
Cloudflareとは何か
そんなときに出会ったのが、Cloudflareです。Cloudflareは、世界中のサイトを裏側で支えているサービスです。大きな会社だけのものだと思われがちですが、そんなことはありません。ぼくのような個人でも、ほとんどの機能を無料の枠のまま使えます。
あれだけ苦しんだDNSの設定も、画面に沿って進めるだけで終わります。毎月のサーバー代からも、解放されました。ここからは、そのCloudflareでできることを、ひとつずつ見ていきます。
おぼえるのは4つの部品
Cloudflareには、役割ごとにいくつかの部品があります。今日おぼえてほしいのは、大きく4つです。サイトを公開するPages、プログラムを動かすWorkers。データをためるD1、そして大きなファイルを置くR2。
名前はどれもいかついですが、ひとつずつ見れば、やっていることはシンプルです。この4つを軸に、順番に説明していきますね。
Pages：サイトを公開する
ひとつ目が、Pagesです。これは、作ったサイトをインターネットに公開してくれる機能です。自分のパソコンで作ったサイトのデータを、Cloudflareに預けるだけ。それだけで、世界中の人が見られる状態になります。
むかしのように、サーバーを別で借りる必要はもうありません。表示もとても速くて、アクセスが増えても落ちにくい。サイトの置き場所で悩むことは、これでなくなりました。
GitHub連携で自動反映
このPagesと相性がいいのが、GitHubというサービスです。GitHubは、サイトのデータを保管しておく場所だと思ってください。ここにサイトの更新を保存すると、その瞬間にPagesがそれを受け取ります。
そして、公開中のサイトへ自動で反映してくれるんです。自分でファイルをアップロードしなおす手間は、いっさいありません。直したら、勝手に世に出る。更新のたびに感じていた面倒くささが、まるごと消えました。
Workers：処理を動かす
ふたつ目が、Workersです。Pagesが公開の担当なら、Workersはプログラムを動かす担当です。ボタンを押したらなにかが起きる、といった動きのある処理を受け持ちます。
ふつう、こういう処理には、ずっと動かしておくサーバーが必要でした。でもWorkersは、サーバーを借りなくても動きます。しかも、呼ばれたときだけ動くので、待っているあいだの費用はかかりません。使ったぶんだけ、という気持ちのいいしくみです。
D1：会員データを扱う
みっつ目が、D1です。これは、データベースと呼ばれるものです。データベースというのは、情報をきれいに整理してためておく場所のこと。たとえば、誰が会員で、どの動画をどこまで見たのか。
そういう会員のデータを、このD1であつかえます。ぼくの学習サイトも、みなさんの学習の記録を、このD1にためています。これも、Cloudflareの中で、無料の枠から使いはじめられます。
R2：動画配信もできる
よっつ目が、R2です。これは、大きなファイルを置いておくためのストレージです。写真やPDF、それから動画のような、重たいデータを預けられます。
そしてすごいのが、ここから動画の配信までできてしまうこと。これまで動画は、Vimeoのような外部サービスに頼っていました。その役割を、R2でそのまま置きかえられます。外に払っていた月額を、まるごと減らせるということです。
決済もメールもつながる
ここまでで、公開、処理、データ、保管がそろいました。でもCloudflareは、これで終わりではありません。Stripeという決済サービスとつなげば、サイトの上で商品を売って、お金を受け取れます。
さらにResendというサービスを使えば、会員へメールを送れます。登録ありがとうございます、といった自動のメールも、ここから飛ばせます。決済とメールまで、同じ場所でそろってしまうんです。
Cron：自動で動かす
そして、最後の部品がCronです。これは、決めた時間に処理を自動で動かしてくれるしくみです。毎朝きまった時間にメールを送る、毎週きまった曜日にお知らせを出す。そういう作業を、ぼくが寝ているあいだも勝手にやってくれます。
自分でボタンを押しにいく必要が、ありません。公開、処理、データ、保管、決済、メール、自動実行。このぜんぶが、Cloudflareのなかでつながっています。
実例：フリ校の学習サイト
これはぜんぶ、机の上だけの話ではありません。ぼくが作ったフリ校の学習サイトが、まさにこの組み合わせで動いています。サイトの本体はWorkersで動いていて、会員データはD1にためています。ファイルの配信はR2、決済はStripe。
それを全部つないで、ひとつの学習サイトにしています。そしてこのサイトには、いま月に1万人が訪れてくれています。エンジニアではないぼくでも、Cloudflareなら、ここまで作れました。
全体像のおさらい
というわけで今日は、Cloudflareの全体像を紹介しました。サイトを公開するPages、処理を動かすWorkers。データをためるD1、ファイルを置くR2。そこに、決済とメールと自動実行までつながる。
しかも、その多くを無料の枠からはじめられます。名前だけ聞くと難しそうですが、やっていることは、意外とシンプルなんです。
本編でゼロから解説
もっとくわしく知りたい方は、ぜひ本編を見てみてください。本編では、この一つひとつを、ゼロから順番に、65分かけて解説しています。ぼくがつまずいたところも、正直にぜんぶ話しています。ポンコツのぼくでも動かせたので、きっと大丈夫です。
なお、この講義の音声はAIで生成しています。