5分で分かる Cloudflare Workers へのデプロイ

5分で分かる Cloudflare Workers へのデプロイ 2025-12-10 Cloudflare Meet-up Tokyo Vol.9 gyu-don 1

自己紹介 gyu-don (GitHub/Qiita: gyu-don, X/Zenn/note: beef_and_rice) 新卒のときは非ITのエンジニア (製鉄プラントの計装制御設計、現地試運転) 独学で駆け出しITエンジニア→C#とC++でWindowsアプリを書いていたが、 画像処理、自然言語処理、ブロックチェーン研究開発をやることになった 量子コンピューティングベンチャーに転職し、SDK開発 x.com/beef_and_rice いろいろ思うところがあり、SIerの研究開発へ 数年経っても消えない違和感があり、キャリアチェンジを固く決意 IBM Quantumで学ぶ量子コンピュータ (2021・秀和システム ) 2 2

• https://www.shuwasystem.co.jp/book/9784798062808.html
• http://x.com/beef_and_rice

バイブコーダーのみなさん、デプロイしたくなりませんか? 生成AIでWebアプリ開発の敷居はすごく下がった ⇒ ローカルにアプリが作れる デプロイにはハードルがある ⇒ Cloudflare Workers なら比較的簡単 ● ● npm run dev が必要 ローカルでしかアクセスできない ● ● Cloudflareでホスティング いつでも・どこからでもアクセス 3

Cloudflare Workersとは? V8 (JavaScriptエンジン) の動く環境をサーバーレスでホスティングできる 無料枠が豊富で、個人開発者にも嬉しい 項目 Workers 無料枠 リクエスト数 10万リクエスト/日 CPU処理時間 10ミリ秒/リクエスト Key-Valueストレージ (KV) ● ● ● 読み取り: 10万リクエスト/日 書き込み/削除/リスト: 1000リクエスト/日 ストレージ: 1GB オブジェクトストレージ (Durable Object) ● ストレージ: 10GB ○ sqlite-backed (new_sqlite_classes) のみ クラスA操作(書き込みなど ): 100万リクエスト/月 クラスB操作(読み込みなど ): 1000万リクエスト/月 ● ● ※最近はV8だけじゃなく、Pythonも使えるらしい(試せていない) 4

事前準備 - みなさん、既にありますよね? ● ● 開発環境 ○ Node.js ○ Git ○ テキストエディタなど アカウント ○ GitHubアカウント ○ Cloudflareアカウント 5

はじめてみよう npm create cloudflare@latest -- プロジェクト名 あとは適当に答えるだけでデプロイまで進む ● ● ● ● ● What would you like to start with? Hello World example Which template would you like to use? Worker only Which language do you want to use? TypeScript Do you want to use git for version control? Yes Do you want to deploy your application? Yes ○ これをやると、Hello Worldがデプロイされるので、嫌ならNoを選ぶ ○ 今回、それで問題なく、手動でWorkersを作成するのも面倒なのでYesにした 6

GitHubにリポジトリを作成し、pushする 手順略 最近買った自宅のマシンで生成したflux.2による猫画像をお楽しみください 7

dash.cloudflare.com からアプリを確認する ログインしたらすぐ出てくる「最近変更されたアプリケーション」欄、または、 「コンピューティングとAI」 > 「Workers & Pages」から作成したアプリを確認 ※デプロイしなかった場合は「アプリケーションを作成する」 8

• http://dash.cloudflare.com

GitHub連携
アプリのページから「設定」 > 「ビルド」 > 「Gitリポジトリ」 > 「接続」
設定が出来たら、Hello World!を書き換えてpushしてみよう
Gitアカウント > 「新しいGitHub接続」から、リポジトリへのアクセス権を設定
リポジトリ、ブランチを選択、他はそのまま→「接続」
以下の変更を加えて、commit, push
diff --git a/src/index.ts b/src/index.ts
--- a/src/index.ts
+++ b/src/index.ts
@@ -13,6 +13,6 @@
export default {
async fetch(request, env, ctx): Promise<Response> {
return new Response('Hello World!');
+
return new Response('Hello Cloudflare Workers');
},
} satisfies ExportedHandler<Env>;

9

バイブコーディング！ デプロイがうまくいくことが確認できたらバイブコーディングの時間です https://github.com/gyu-don/counter-app ドキュメントサーバー https://docs.mcp.cloudflare.com/mcp を追加しておくと便利 Durable Objectで、全世界で同期するカウンターを作ってみました！ この発表が面白かったらぜひ連打してください！ QRコードから よろ〜！ https://counter-app.gyu-don.workers.dev/ 10

• https://docs.mcp.cloudflare.com/mcp
• https://github.com/gyu-don/counter-app
• https://counter-app.gyu-don.workers.dev/

まとめ バイブコーディングで作ったWebアプリはCloudflare Workersにデプロイ 簡単な設定でGitHubと連携して自動デプロイができる Xもフォロー よろ〜！ x.com/beef_and_rice 11

• http://x.com/beef_and_rice

落穂拾い ● ● ● テスト→ @cloudflare/vitest-pool-workers vitest (v3.2.xまで) が使える ○ 最新のものはまだ対応していなかった 認証→機密保護や悪戯防止のためにつけたい場面が多いがベストプラクティスが分からない ○ WorkersにはブランチやコミットIDごとにデプロイをする機能もあるが、OAuth2なら callback_url設定はどうすれば? ○ バックエンド、自分用なら、固定乱数文字列をsecretに入れてトークンとするのもあり wrangler.jsonc を変えたら → wrangler types で型の自動生成やり直しが必要 ○ 変更されたときだけ自動生成するのをpre-commitなどに設定できないか? 12