Cloudflare Workers でサイトを作ってみた

技術

このサイトは Cloudflare Workers でホストしています。

普段は仕事で Azure を触ることが多いのですが、個人サイトまで同じノリで作るのも少し面白くないなと思い、今回は Cloudflare Workers を使ってみました。

結論から言うと、思っていたよりかなり手軽でした。個人サイトや小さなツールを置く場所としては、かなり相性が良さそうです。

全体像はこんな感じです。ビルド時に Markdown を静的 HTML 化しておき、配信時は Cloudflare のエッジから静的アセットを返す。動的な処理だけ Worker（Hono）がフォールバックで受け持つ、という構成です。

システム構成図：ビルド時に Markdown を静的HTML化し、配信時は Cloudflare エッジから静的アセットを返す

なぜ Azure ではなく Cloudflare にしたのか#

Azure で Webサイトをホスティングするなら、App Service、Azure Static Web Apps、Azure Container Apps あたりが候補になると思います。

ただ、今回はあえて Cloudflare Workers にしました。

理由はだいたいこのあたりです。

  • 業務で使っている環境をそのまま使っても面白くないし嫌
  • 最近 Cloudflare Workers が何かと話題
  • そもそも Azure とか AWS、GCP は個人の趣味程度では冗長すぎるし費用も高い
  • ドメイン管理や自宅鯖公開用途ですでにCloudflare を使っていた

特に最後は大きくて、すでにドメインを Cloudflare に寄せていたので、「せっかくならホスティングも寄せてみるか」という感じでした。

デプロイがとにかく速い#

一番驚いたのはここでした。

wrangler deploy

これだけでデプロイできます。

もちろん実際には設定ファイルやビルドの準備はありますが、一度形にしてしまえば、あとはコマンド一発で反映できます。数秒で反映されるので、個人サイトを触るにはかなり気軽です。

個人サイトで「ちょっと記事を出したい」という用途には、wrangler deploy の軽さはかなりありがたいです。

実行モデルの違いが面白い#

Cloudflare Workers は V8 isolate という仕組みで動いています。

雑に言うと、リクエストごとにコンテナやプロセスを起動するというより、軽量な実行環境でコードを動かす仕組みです。そのおかげで、よくあるサーバーレスの「久しぶりにアクセスしたときだけ遅い」感じがかなり薄いです。

このあたりは、Azure Functions や Lambda みたいなサーバーレスを触ったことがあると違いが分かりやすい気がします。

個人サイトだとアクセス数は多くないので、コールドスタートっぽい遅さは地味に気になります。その点で、Workers の体感の軽さはかなり好印象でした。

設定が見通しやすい#

このサイトの構成は、かなりの部分が wrangler.jsonc 一枚に集約されています。

ルーティング、静的アセット、デプロイ先など、見るべき場所が比較的少ないです。

クラウドの管理画面をいろいろ開いて、「結局どこで何を設定していたっけ」となることはよくありますが、個人サイトではそこまでしたくありません。

その点、Workers は設定の見通しが良くて、個人開発にはちょうどいいと感じました。

無料枠は噂どおり手厚い#

Workers の無料枠は 1 日あたり 10 万リクエストまで、と太っ腹なのですが、それ以前に 静的アセットへのリクエストはこのカウント対象外（無料・無制限） だったりします。

このサイトはページも CSS も画像もほとんどが静的アセットなので、普通に読まれている分にはリクエスト枠がほとんど減りません。枠を消費するのは、sitemap やリダイレクト、エラーページのように Worker が実際に動くときだけです。個人ブログの規模なら、まず使い切れないと思います。

アクセス解析も Cloudflare Web Analytics を使えます。

Google Analytics ほど細かく見るというより、ページビューや流入元、表示速度まわりをざっくり見る用途ならこれで良さそうです。個人サイトでそこまで細かい分析をするつもりもないので、今のところは Cloudflare Web Analytics で十分かなと思っています。Google Analytics と違って外部スクリプトを読み込まないのもいいですね。

フレームワークは Hono にした#

このサイトのアプリ部分は Hono という Web フレームワークで書いています。

最初は Cloudflare Workers と相性が良さそう、くらいの理由で選びました。実際に使ってみると、かなり薄く書けて気持ちいいです。

このサイトでは、記事を Markdown で書いて、それを読み込んで HTML にして返す、という構成にしています。React や Next.js を使うほどではないけれど、素の文字列連結で HTML を書くのもつらい。そういう温度感に Hono の JSX がちょうどよかったです。

Hono は作者が日本の方らしいです。 Hono のそもそもの始まりが「Cloudflare Workers でアプリを書きたいけれど、しっくりくるフレームワークが無かったから自分で作った」という経緯らしく、Workers との相性が良いのも納得です。名前の Hono（炎）も日本語の「ほのお」から来ていて、ロゴはそのまま🔥。

こういう軽量なフレームワークが世界中で使われていて、それを自分のサイトでも使っているというのは、少し嬉しいところですね。

技術的にも、Hono は Web標準の API をベースにしているので、Cloudflare Workers だけでなく、Deno、Bun、Node.js などでも動かせるようです。今後どこかで動かす場所を変えたくなっても、ある程度逃げ道がありそうなのも良いです。

さいごに#

Cloudflare Workers の身軽さは個人開発レベルのちょっとしたブログやツールを置く場所としてぴったりで、当面このサイトはここで育てていくつもりです。 Cloudflare Workers は無料で使えるのでぜひ使ってみてください。