Cloudflare Workers と Go でプロフィールサイトを作った

Cloudflare Workers と Go でプロフィールサイトを作りました。

Cloudflare Workers で Go と言ったら syumai/workers です。その作者の syumai さんのサイトである syum.ai のソースコードが GitHub に公開されていたため、技術スタックはそれを真似ていますので特に目新しいことはありません。

しかし、Cloudflare Workers で Web サイトを作ってみたのは初めてで楽しかったため、簡単にまとめておきます。

今回の作成したサイトとソースコードは以下のリンクから確認できます。

• https://card.tsurutatakumi.info
• https://github.com/zztkm/card.tsurutatakumi.info

必要なもの

• Cloudflare アカウント
• Go
  • 僕は Go 1.24.0
• TinyGo
  • 僕は TinyGo 0.37.0
• Node.js

手順

自分と同じようなことをやりたいと思った場合には、以下の手順を参考にしてください。

プロジェクトを作成する

syumai/workers ではプロジェクトを簡単に始めるために、テンプレートを用意してくれています。

自分は Wasm のサイズを小さくするために、TinyGo を使おうと考えていたため、TinyGo 用のテンプレートを使いました。

https://github.com/syumai/workers/tree/main/_templates/cloudflare/worker-tinygo

依存関係の追加

今回利用する以下のライブラリとツールをインストールします。

• Go
  • (workers はテンプレートの main.go に含まれており、go mod tidy でインストールされます)
  • a-h/templ: HTML テンプレートエンジン
  • air-verse/air: Go アプリケーションを Live Reload するためのツール
    • go tool としてインストールします
• Node.js
  • wrangler: Cloudflare Workers のデプロイなどに利用します
  • @tailwindcss/cli と tailwindcss: CSS フレームワーク
    • https://tailwindcss.com/docs/installation/tailwind-cli を参考にインストールします

開発用設定

syumai/workers は、Cloudflare Workers で Wasm として動くアプリケーションのためのライブラリですが、ローカル開発中は、普通の Go の HTTP サーバーとして動かすことができます。

そうなると、Live Reload の仕組みを手軽に導入できる air を利用するのが楽です。

また、今回利用する Tailwind CSS と a-h/templ も CLI ツールとして watch 機能を提供しており、変更を検知して自動でリビルトしてくれます。

これを組み合わせることで、Go のアプリケーションを Live Reload しながら開発することができます。

以下に Makefile の例を示します。

.PHONY: templ
templ:
	go tool templ generate --watch

.PHONY: tailwind
tailwind:
	pnpm exec tailwindcss -o ./server/pages/style.css --minify --watch

.PHONY: server
server:
	go tool air .

.PHONY: dev
dev:
	make -j3 templ tailwind server

これで make dev を実行すると、いい感じに Live Reload しながら開発することができます！

開発

後は好きなように開発していきます。

デプロイ

package.jsoni に wrangler deploy の設定が入っているでしょうから、以下のコマンドを実行することでデプロイできます。

pnpm run deploy

おわりに

Cloudflare Workers を Go で書いて、SSR で Web サイトを作るというのは、個人的にはとても楽しかったです。

また何か思いついたら作ってみようと思います！