Cloudflare Workersの始め方：Wranglerによるローカル環境構築と世界公開の手順

CloudFlareWorkersとは？

Cloudflare Workersは、世界中に配置されたCloudflareのエッジネットワーク上でプログラムを実行できる「サーバーレス（FaaS）」環境です。

従来のクラウドのように特定の場所に置かれた1台のサーバーにアクセスするのではなく、ユーザーから「最も物理的に近い場所（エッジ）」でコードが起動するため、圧倒的な高速処理を実現できるのが最大の特徴です。

主な特徴とメリット

• サーバー管理が完全不要（メンテナンスフリー）
  • OSの管理やインフラのスケールアップなどをすべてCloudflare側が自動で行うため、開発者はコードの記述だけに集中できます。
• 圧倒的な低レイテンシ（超高速レスポンス）
  • 世界中にある最寄りの拠点（エッジ）でミリ秒単位でコードが実行されるため、ユーザーを待たせません。
• 破格のコストパフォーマンス
  • 個人開発の規模であれば、非常に強力な機能をほぼ完全無料で運用可能です。
• P2P通信などのシグナリング・マッチングに最適
  • プレイヤー同士を繋ぐP2Pゲーム等のマッチングサーバー（初期接続用のサーバー）として利用する場合、中央集権的な常時起動サーバーを立てるのに比べて、「より低レイテンシで高速」かつ「動いた分だけしかコストがかからない圧倒的な低コスト化」を実現できます。

cloudflareworkerの特徴(公式blogより引用)

今回は、この強力なサーバーレス環境を手元のPCに構築し、コマンド一発で世界へデプロイするまでのセットアップ手順を爆速で解説していきます！

0.アカウント作成

すでにアカウントがある人は不要です。コンソールおよびこの先の開発のため、CloudFlare公式サイトからCloudFlareアカウントを作成しましょう。

Cloudflare Workers

比類なきパフォーマンス、信頼性、スケールでサーバーレスコードを実行。

www.cloudflare.com

画像１：cloudflareworkersの公式ページ

1.Workers＆Pages

コンソールにログインできたら、まず、Workerが使えるように設定します。左側のサイドバーから”Workers & Pages”を選択し、Workerと公開Pageの設定を開きます。

画像２：cloudFlareコンソール Workers＆Pages

(UIはCloudFlareのページ更新によって場所や仕方が変わる可能性があります。表示は.2026/05/16時点での操作です)

1.1 サブドメインを決める（初回のみ）

初めてWorkersのページを開いた場合、あなた専用のサブドメイン（例: あなたの名前.workers.dev）を決める画面が表示されます。

これは世界中で重複できない一意の名前になります。後から変更するのが少し面倒なので、お好みの名前を入力して確定させてください。(作りたいサービスがわかりやすい名前や作成したいサービスに使う自身のペンネームとかがあればそれにしておくとよいでしょう）

最終的に作成するワーカーのurlに使われます。
https://<ワーカーの名前>.<今決めたサブドメイン>.workers.dev

画像３：サブドメインの設定

1.2.アプリケーションを作成する

画面が切り替わったら、右上にある 「Create application（アプリケーションを作成）」 ボタンを押します。

画像４：左上の青いボタン”Create application”から新規アプリ（プロジェクト）作成

画像５：公開するページの方法選択

githubとの連携などもできますが、初めてなら”Start with Hello World”でテンプレートページを作り、そこから改良していくことをお勧めします。

画像６：ワーカーの名前設定

ワーカーの名前を決めます。ここは基本的に自由に決められる（半角英数）ので今回のワーカーの目的（ゲームのマッチとかなら gamemachなど）

デプロイするとコンソールで以下のような感じで、現在デプロイされているアプリケーションの状況をモニタ出来るようになります。

画像７：ワーカーのモニタ

この状態で 右上のVisitを押すと、Hello Worldというページが表示されます。この時点で外部からもアクセスできるので、他のPCとかスマホから接続できるか確認してみましょう。

画像８：HelloWorld page

2.開発環境をPCに建てる

ダッシュボード上の画面でもコードは書けますが、ゲームの複雑な処理やTypeScriptを扱う場合は、手元のPC（ローカル環境）でコードを書いて、コマンド一発でダッシュボードへ送信（デプロイ）するのが一般的な開発スタイルです。

ここからは、お使いのPCの「ターミナル」（WindowsならコマンドプロンプトやPowerShell、Macならターミナル.app linuxならターミナル）を開いて操作します。

2.1 プロジェクトをPC上に作成する

ターミナルで、ゲームのプロジェクトを作りたいディレクトリ（フォルダ）に移動し、以下のコマンドを実行します（Node.jsがインストールされている必要があります）。

npm create cloudflare@latest <ここは先ほど決めたワーカーの名前にしてください>

例：npm create cloudflare@latest p2p-worker

2.2 セットアップの質問に答える

コマンドを実行すると、いくつか英語で質問されるので、以下のように矢印キーとエンターで選択してください。

• Do you procces? →実行するかどうかの質問なので y (yes)
• What type of application do you want to create? ➔ Hello World Worker を選択

Which template would you like to use? は注意が必要

○ Worker only
  ○ Static site
  ○ SSR / full-stack app
  ● Worker + Durable Objects
  ○ Worker + Durable Objects + Assets
  ○ Workflow
  ○ Scheduled Worker (Cron Trigger)
  ○ Queue consumer & producer Worker
  ○ API starter (OpenAPI compliant)
  ◁ Go back

ここは注意が必要です。作りたいアプリの動作に応じて決める必要があります。

1. Worker only
   • 一言でいうと： 画面のない、純粋な「バックエンドAPI」
   • 向いている目的： * 別の場所（GitHub PagesやVercelなど）に置いたフロントエンドから叩かれるAPIサーバーを作りたいとき。
     
2. Static site
   • 一言でいうと： HTML/CSS/JavaScriptだけの「静的なWebサイト」
   • 向いている目的： * データベースとの通信が発生しない、個人のポートフォリオサイトやLP（ランディングページ）。
3. SSR / full-stack app
   • 一言でいうと： フロントもバックエンドも1つにまとまった「モダンWebアプリ」
   • 向いている目的： * Next.js、Remix、Nuxt、Astroなどのフレームワークを使って、サーバーサイドレンダリング（SSR）を行う本格的なWebアプリ。
4. Worker + Durable Objects
   • 一言でいうと： 状態（ステート）を維持できる「リアルタイム・バックエンド」
   • 向いている目的： チャットルームの管理、同時編集ドキュメント、オンラインゲームの同期ロジック。
5. Worker + Durable Objects + Assets
   • 一言でいうと： 状態管理バックエンド ＋ ゲーム画面（フロント）の「完全統合パック」
   • 向いている目的： * マルチプレイ対戦ゲーム、リアルタイム投票システム、対話型ダッシュボード。
6. Workflow
   • 一言でいうと： 数日〜数週間かけて実行するような「長期的なタスク自動化」
   • 向いている目的： * 「ユーザー登録から3日後にリマインドメールを送り、その2日後にクーポンを付与する」といった、時間を跨ぐステップ型のアクション。
7. Scheduled Worker (Cron Trigger)
   • 一言でいうと： 定期的に裏で動く「バッチ処理・定期実行」
   • 向いている目的： * 「毎朝7時に天気をスクレイピングしてLINEに通知する」タスク。
8. Queue consumer & producer Worker
   • 一言でいうと： 大量のリクエストを順番に処理する「順番待ちシステム」
   • 向いている目的： * アクセスが集中するチケット予約サイトや、大量の画像アップロード処理。
9. API starter (OpenAPI compliant)
   OpenAPI（Swagger）の規格に準拠しており、コードを書くだけで「API仕様書（ドキュメント画面）」が自動的に作成されるため、仕様の管理が劇的に楽になります。
   • 一言でいうと： 仕様書が自動生成される「きっちりしたREST API開発」
   • 向いている目的： * チーム開発や、将来的に一般公開する予定の本格的なWeb APIサービス。

簡単にまとめると上記のような感じなので、自分の開発目的に合ったものを選んでください。

• Which language do you want to use? ➔ TypeScript やjavaScriptなど自身が使いやすいものを選んでください
• Do you want to add an AGENTS.md file to help AI coding tools understand Cloudflare APIs?
  これは、Cursor、GitHub Copilot、WindsurfといったAIコーディングツール（AIエージェント）向けに、Cloudflareの最新のAPI仕様やルールを教えるための説明書（AGENTS.md）をプロジェクト内に自動生成するかどうかという質問です。
  自身でフルスクラッチしないと気が済まない！という人以外は yesと答えておくと、補完や環境に応じたコーディングサポートが受けられます。
  
• Do you want to use git for version control? ➔ Yes（あとでGitを使うと便利です）
• Do you want to deploy your application? ➔ No（コードを書き換えてからデプロイするため、ここではNoにします）

ここまでの質問に答えると、環境設定が完了します。

画像９：環境構築完了

3. ローカルでエミュレ―トしてみる

環境のベースは完成しましたが、ローカルでテストできないと開発できないので、その手順をまとめます。
まず、先ほど作成した開発環境のディレクトリに移動してください。
例：cd p2p-matchmaker

3.1 エミュレータ起動して確認

Cloudflare Workersには、手元のPC上にCloudflareの環境を完全に再現する「Wrangler」という超優秀なエミュレータ（開発サーバー）が備わっています。

1. ターミナルで、プロジェクトのフォルダの中にいることを確認します。
2. 以下のコマンドを実行します。
   npm run dev
3. コマンドを実行すると、ターミナルに http://localhost:8787 や http://127.0.0.1:8787 といったアドレスが表示されます。
4. ブラウザでそのURLを開いてみてください。 初期状態の画面（テンプレートのデフォルト画面）が表示されれば、ローカルでの起動は成功です！

画像１０：環境構築完了

画像11：デフォルトページ

上記のような表示がでていれば成功です。

3.2 少し書き換えてみる

VScodeとかのエディタを開き、publicの中にあるindex.html (公開ページのhtml)を書き換えてみました。
例: <p>tukumolog 開発中</p>　を追記

保存すると、run devはホットリロード対応なので、変更が反映されていることを確認できます。
このように、基本ローカルで変更→実行テストを行い、完成してからデプロイする形で開発していけます。

画像12：デフォルトページ編集後

4. クラウドへデプロイ（世界へ公開）

ローカルで編集できることが分かったので、いよいよCloudflareの本番環境（先ほどセクション1で作ったアプリ）に紐付けてデプロイします。

4.1. 設定ファイルの確認

プロジェクトのルート（一番上の階層）にある wrangler.jsonを開きます。 一番上の "name" の項目が、ダッシュボードで作った名前と一致しているか確認してください。名前（name）を一致させておけば、Wranglerが自動的にブラウザ側のアプリを認識して、手元のコードで綺麗に上書きしてくれます。

"name": "決めたワーカー名",

4.2 アカウントの紐づけ

すでに一回ログインコマンドを試している場合でも、プロジェクトを作り直した際は以下の順番で確認しながら進めると確実です。

PCをCloudflareにログインさせる

ターミナルで以下のコマンドを実行します。

npx wrangler login

上記コマンドを打つと自動的にブラウザが起動するので、それに従ってログインしてください。

画像13：ログイン成功画面

4.3. デプロイコマンドの実行

一度、ローカルサーバーを停止（ターミナルで Ctrl + C）するか、新しいターミナルを開いて、以下のコマンドを叩きます。

npx wrangler deploy

数秒〜数十秒ほどログが流れ、最後に以下のような公開URLが表示されます！

# 例
# Deployed logic-buckshot-backend triggers (0.80 sec)
#  https://logic-buckshot-backend.tukumosoftware.workers.dev

このURLをスマホで開いたり、友達にLINEで送ったりしてみてください。世界中のどこからでも、あなたが書き換えた「Hello Worker!」の画面にアクセスできるようになっています！

画像14：デプロイできたことを確認

さいごに

お疲れ様でした！これで Cloudflare Workers を使った、世界に1つだけのサーバーレス環境が手元に完成しました。

今回は「Hello World」を表示させるだけのシンプルな構成でしたが、驚くべきは「PCでコードを書いてコマンドを叩くだけで、数秒後には世界中からアクセスできるようになる」というこの圧倒的な開発スピード感です。しかも、個人開発の範囲ならほぼ完全無料で運用できてしまいます。

「環境ができたなら、次は何を作る？」

ということで、次回からはこの環境（logic-buckshot-backend）を120%フル活用して、学祭での出展を見据えた「スマホで遊べるP2Pリアルタイム心理戦ゲーム」をガチ開発していきます！

実弾と空砲を込めたショットガンを前に、確率の計算とアイテムのシナジーで相手の裏をかく……あの某人気ルーレットゲームをリスペクトした、情報系学生の脳汁を枯らすゲームロジック（Durable Objectsによる状態管理や、D1データベースを使った簡易認証など）を実装していく予定です。

指定された記事(ID: 7931)は現在公開されていません。