メインコンテンツまでスキップ

Cloudflareでサーバーを立ててみる

この実習では、最もシンプルな構成で Web サーバーを作成し、それをクラウドに公開する方法を体験します。

「サーバーを立てる」と聞くと難しそうに思えるかもしれませんが、実際にはわずか数行のコードと数回のコマンド操作で、クラウド上に Web アプリケーションを公開することができます。

ステップ 1：Node.js と Wrangler の準備​

まず、Node.js と Cloudflare CLI「Wrangler」のインストールを確認・実施します。

node -v
npm install -g wrangler
wrangler login

ステップ 2：プロジェクトの初期化​

以下のコマンドで wrangler init を実行します：

wrangler init

対話形式で以下のように選択します：

  • What would you like to start with? → Hello World example
  • Which template would you like to use? → Worker only
  • Do you want to deploy your application? → Yes

この時点で、初期コードが含まれた Worker プロジェクトが作成され、クラウドに自動デプロイされます。

ステップ 3：Hello World コードの確認​

作成された src/index.js を開くと、次のようなコードが含まれています：

export default {
  async fetch(request) {
    return new Response("Hello World!");
  },
};

このコードは、どんなリクエストにも「Hello World!」というテキストを返す最小の Web サーバーです。

ステップ 4：ブラウザで確認​

デプロイ完了時に表示される URL（例：https://your-name.workers.dev）にアクセスすると、公開されたページに「Hello World!」が表示されていることが確認できます。

ローカルで確認したい場合：

wrangler dev

ステップ 5：JSON API に書き換えてみる​

次に、テキストではなく JSON を返す Web API に変更してみましょう。

src/index.js を次のように編集：​

export default {
  async fetch(request) {
    const data = {
      message: "こんにちは、COJT!",
      timestamp: new Date().toISOString(),
      requestUrl: request.url,
    };

    return new Response(JSON.stringify(data), {
      headers: {
        "content-type": "application/json",
      },
    });
  },
};

ローカル確認：​

wrangler dev

ブラウザや curl でアクセスすると、次のような JSON が表示されます：

{
  "message": "こんにちは、COJT!",
  "timestamp": "2025-04-21T12:34:56.789Z",
  "requestUrl": "http://localhost:8787/"
}

クラウドに再デプロイ：​

wrangler deploy

まとめ​

このレジュメでは以下のことを体験しました：

  • Wrangler CLI を使って Cloudflare Worker プロジェクトを初期化
  • Hello World を表示する最小構成の Web サーバーを作成
  • JSON を返す API に変更し、ローカルとクラウドの両方で確認

Cloudflare Workers は、わずかな準備とコードで、インターネット上に自分のサービスを公開できる強力なツールです。今後はリクエストの分岐、ルーティング、POST処理などにも挑戦していきましょう。