HonoとCloudflare Workersを使ったHello Worldを出力するwebアプリケーションを作成する手順

1. はじめに

最近では、手軽にスケーラブルなWebアプリケーションを構築するために、サーバーレスのサービスを活用するケースが増えています。その中でも Cloudflare Workers は、世界中に分散されたCloudflareのエッジネットワーク上でコードを実行できる、無料で使えるサーバーレスプラットフォームとして注目されています。

しかし、Cloudflare Workersでは通常の Node.js環境とは異なる制約があり、Node.jsに依存したフレームワークである Express を使うことができません。そのため、代替となる軽量なフレームワークとして Hono を導入するのが最適だと思いました。

このブログでは、HonoとCloudflare Workersを使って簡単なWebアプリケーションを構築し、デプロイする方法を紹介します。

2. 事前準備

Cloudflare Workersを利用するには、Cloudflareアカウントが必要です。アカウントを持っていない場合は、こちらのCloudflare公式から無料で作成できます。
アカウント作成後、以下のコマンドを実行してCloudflareにログインします。

npx wrangler login

3. 環境構築

プロジェクトを初期化して必要なパッケージをインストールします。

# プロジェクトディレクトリを作成
mkdir hono-cloudflare-hello && cd hono-cloudflare-hello

# npmプロジェクトを初期化
npm init -y

# HonoとCloudflare Workers用のTypeScript型パッケージをインストール
npm install hono wrangler --save

# TypeScriptと型定義パッケージをインストール
npm install typescript @types/node --save-dev

自動ビルド＆デプロイをするためpackage.jsonファイルのscriptsに下記の記述を追加します。

package.json

"scripts": {
  "build": "tsc",
  "deploy": "npm run build && npx wrangler deploy"
}

4. TypeScript設定ファイルの作成

tsconfig.jsonをプロジェクトのルートディレクトリに作成し、TypeScriptの設定を記述します。

touch tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "Node",
    "outDir": "./dist",
    "esModuleInterop": true,
    "strict": true
  },
  "include": ["src/**/*"]
}

5. Webアプリケーションの作成

プロジェクトにsrcフォルダを作成して、その中にindex.tsファイルを作成します。

mkdir src
touch src/index.ts

src/index.tsに以下のコードを記述します。

src/index.ts

import { Hono } from 'hono';

const app = new Hono();

app.get('/', (c) => c.text('Hello World from Hono and Cloudflare Workers!'));

export default app;

6. Cloudflare Workersのエントリーポイントを作成

Cloudflareではエントリーポイントが必要です。
エントリーポイントとはWorkersがリクエストを受け取った時、最初に実行するコードのことです。
Cloudflare WorkersはHttpリクエストを受け取ると、エントリーポイントのfetch関数を呼び出します。この関数がリクエストを処理してレスポンスを返します。
src/worker.tsファイルを作成し、以下のように記述します。

src/worker.ts

import app from './index';

export default {
  fetch: app.fetch,
};

7. Wrangler設定ファイルの作成

プロジェクトのルートにwrangler.tomlファイルを作成します。
wrangler.tomlファイルとはCloudflare Workers のプロジェクト設定ファイルです。このファイルを使ってCloudflare Workers の動作やデプロイ先、環境変数などを設定します。
wrangler.toml ファイルを Cloudflare Workers 用の CLI ツールである Wrangler が読み取り、ビルドやデプロイを行います。

touch wrangler.toml

wrangler.tomlに以下を記述します。
なお、nameはCloudflare Workers上で一意である必要があります。自分のプロジェクトに合わせて変更してください。
compatibility_dateについてはCloudflare WorkersのAPIの変更によって動作が変わらないように、この日付時点の互換性を保証するために記述します。

wrangler.toml

name = "hono-cloudflare-hello" # 自分のプロジェクトに合わせてnameを変更
main = "dist/worker.js"  # ビルド後のエントリーポイント
compatibility_date = "2025-01-05"  # 今日の日付に変更

8. プロジェクトのデプロイ

アプリケーションをCloudflare Workersにデプロイします。

npm run deploy

9. プロジェクトをブラウザで立ち上げする

デプロイが完了したら、ターミナルに表示されたURLをクリックします。
下記のように画面に表示されたら成功です！