【初心者向け】Hono + Cloudflare Workersで爆速なWeb APIを作る方法

cloudflareworkers-hono インフラ・サーバー

Web APIをサクッと作って公開したい時、「サーバーのセットアップが面倒」「レスポンス速度を極限まで速くしたい」と思ったことはありませんか？

今回は、エッジサーバーレス環境の Cloudflare Workers と、軽量・超高速フレームワーク Hono を組み合わせて、超高速なWeb APIを爆速で構築・デプロイする流れを解説します。

1. Cloudflare Workersの概要

Cloudflare Workers は、Cloudflareが提供するサーバーレス（Function-as-a-Service）の実行環境です。

従来のAWS Lambdaなどのコンテナベース（Dockerなど）のサーバーレスとは異なり、V8エンジン上の「Isolate」という技術を用いて動いているのが大きな特徴です。

主な特徴・メリット

  • コールドスタートがほぼゼロ: コンテナの起動待ちが発生せず、リクエストに対して即座にレスポンスを返せます。
  • グローバルなエッジ配信: 世界中のデータセンターにコードが自動デプロイされ、ユーザーに一番近い場所で処理が行われます。
  • 強力な無料枠: 1日あたり10万リクエストまで無料で利用できるため、個人開発や実験的プロジェクトに最適です。

2. Honoの概要

Hono は、Web Standards（Fetch APIなど）に準拠した、超軽量かつ爆速のWeb Webフレームワークです。

TypeScriptとの親和性が抜群で、Expressライクな直感的な書き方ができることから、現在JavaScript/TypeScriptコミュニティで非常に高い人気を集めています。

自分も今までは DockerコンテナでPython FastAPIを使うことが多かったのですが、サーバーレスで動かせるHonoに出会ってからはこちらをメインに使っています。

主な特徴・メリット

  • 圧倒的な高速性: 高速なルーティングエンジン（RegExpRouter）を搭載しており、レスポンス速度が極めて高速です。
  • 超軽量: 依存ライブラリがほぼなく、コードサイズが非常にコンパクトです。
  • TypeScriptフルサポート: 型補完が強力で、開発体験（DX）が非常に優れています。

3. なぜ相性が良いのか？（Cloudflare Workers × Hono）

Cloudflare WorkersでAPIを構築する際、Honoはまさに「ベストパートナー」と言えます。その理由は以下の3点です。

  1. Web Standards互換: Honoは標準的な Request / Response オブジェクトをベースに設計されているため、Cloudflare WorkersのV8 Isolate環境でネイティブかつ極めて効率的に動作します。
  2. 容量制限を回避しやすい: Cloudflare Workers（無料枠）にはスクリプトサイズ制限がありますが、Honoは超軽量（約14KB〜）なため制限に余裕を持って開発できます。
  3. エコシステムとの連携: Cloudflareが提供するストレージサービス（KV、D1、R2など）を、Honoのコンテキスト（c.env）から型安全かつ簡単に操作できます。

4. 活用事例

Hono × Cloudflare Workersの組み合わせは、主に以下のような用途で真価を発揮します。

  • WebアプリケーションのバックエンドAPI
    • フロントエンド（React, Vue, Next.js等）から呼び出すRestful APIの構築。
  • マイクロサービス・Webhook受け口
    • GitHubやStripeなど外部サービスからのWebhook受信用エンドポイント。
  • BFF（Backend For Frontend）
    • 複数のマイクロサービスのデータを集約・整形してフロントエンドへ返す層。
  • 軽量な認証・プロキシサーバー
    • APIキーの検証やヘッダーの付与、エッジでのリダイレクト処理。

5. 必要な環境構築

開発に必要なツールは非常にシンプルです。

必須のツール

  • Node.js: v18.x 以上（推奨: v20 LTS 以降）
  • npm (または pnpm / yarn / bun)
  • Cloudflare アカウント: （無料登録可能）

6. プロジェクト作成コマンド

公式のCLIツール create-cloudflare (C3) を使用すると、一瞬でHonoの環境をセットアップできます。

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

npm create cloudflare@latest -- my-hono-app --framework=hono

my-hono-app は新たに作成するプロジェクトのディレクトリ名（およびアプリ名）です。

  • 任意の名前に変更可能です。
  • カレントディレクトリにこの名前のフォルダが自動作成され、その中に必要なファイル一式が展開されます。

コマンドを実行すると、ターミナル上で対話形式の質問がいくつか行われます。

  1. Do you want to use git for version control? → Yes（推奨）: プロジェクト直下に Git リポジトリ（.git）を初期化します。特別な理由がなければ Yes を選ぶのがおすすめです。
  2. Do you want to deploy your application? → 今すぐデプロイする場合は Yes（後でデプロイする場合は No）今回はローカルで試してからデプロイするのでNoを選択します。

wrangler 等の依存パッケージなどが自動でインストールされます。

７．生成されるファイルやフォルダ

📁 フォルダ（Directory）

フォルダ名役割・解説
src/【一番重要】 メインのソースコードを格納する場所です。エントリーポイントとなる src/index.ts が入っており、ルーティングやAPIロジックは基本的にここに書いていきます。
public/画像やファビコン、静的HTMLなどの静的ファイル（Static Assets）を置く場所です。Cloudflare Workers with Assets の機能で配信されます。
node_modules/HonoやWranglerなど、プロジェクトに必要なnpmパッケージがインストールされているフォルダです。
.vscode/VS Code用の設定ファイル（おすすめ拡張機能やエディタ設定など）が入っています。

📄 ファイル（Files）

ファイル名役割・解説
wrangler.jsonc【Cloudflare設定ファイル】 Cloudflare Workersの挙動を管理する最重要設定ファイルです（JSON with Comments形式）。環境変数の定義、D1データベースやKVのバインディング（紐付け）などをここに記述します。
package.jsonプロジェクトの依存ライブラリや npm run dev などの実行コマンド（スクリプト）が定義されている管理ファイルです。
worker-configuration.d.tsCloudflare Workersの環境変数やバインディング（D1やKVなど）のTypeScript型定義が自動生成されるファイルです。補完を効かせるために重要です。
tsconfig.jsonTypeScriptのコンパイル設定ファイルです。Web Standards（Fetch APIなど）やCloudflare環境に最適化された設定があらかじめ書き込まれています。
.gitignoreGitでバージョン管理に含めないファイル（node_modules やビルド成果物など）を指定する設定ファイルです。
package-lock.jsonインストールされたnpmパッケージの正確なバージョン情報が記録されているファイルです。
README.mdプロジェクトの概要や基本的なコマンド（起動・デプロイ方法など）が書かれた説明ドキュメントです。

8. 開発サーバーの立ち上げ

先ほど生成したプロジェクトフォルダに移動します。

cd my-hono-app

ローカル環境で動作確認を行うため、Cloudflareのローカルエミュレータ（Wrangler）を利用して開発サーバーを起動します。

npm run dev

ターミナルに以下のような出力が表示されたら起動成功です。

Ready on http://localhost:8787

ブラウザやAPIクライアント（Postman等）で http://localhost:8787 にアクセスすると、Hello Hono! と表示されることが確認できます。

サンプルコード（src/index.ts）

標準で生成される src/index.ts は以下のようになっています。

import { Hono } from "hono";

const app = new Hono<{ Bindings: CloudflareBindings }>();

app.get("/message", (c) => {
  return c.text("Hello Hono!");
});

export default app;

これを少し編集して実践的なコードに変えてみます。
商品A〜Cの「価格（price）」と「在庫数（stock）」をオブジェクトとして用意し、2つのエンドポイント（全件取得・個別取得）を作成しています。

import { Hono } from 'hono'

const app = new Hono()

// 商品データの定義（メモリ上に保存される疑似データ）
const products = {
  a: { name: '商品A', price: 1000, stock: 15 },
  b: { name: '商品B', price: 2500, stock: 8 },
  c: { name: '商品C', price: 4200, stock: 0 },
}

// 1. 全商品の一覧を取得するAPI
app.get('/api/products', (c) => {
  return c.json({
    status: 'success',
    data: products
  })
})

// 2. 指定した商品（a, b, c）の詳細情報を取得するAPI
app.get('/api/products/:id', (c) => {
  const id = c.req.param('id').toLowerCase() as keyof typeof products
  const product = products[id]

  if (!product) {
    return c.json({ status: 'error', message: '商品が見つかりません' }, 404)
  }

  return c.json({
    status: 'success',
    data: { id, ...product }
  })
})

export default app

ローカルでの動作確認

コードを変更したら、ターミナルで開発サーバーを立ち上げて動作確認します。

npm run dev

起動したら、ブラウザで以下のURLにアクセスしてみてください。

下記のようなJSONデータが返ってくれば成功です。

{
  "status": "success",
  "data": {
    "a": { "name": "商品A", "price": 1000, "stock": 15 },
    "b": { "name": "商品B", "price": 2500, "stock": 8 },
    "c": { "name": "商品C", "price": 4200, "stock": 0 }
  }
}

９．Cloudflare Workersへのデプロイ

動作確認ができたら、ターミナルで Ctrl + C を押して一度開発サーバーを止め、以下のデプロイコマンドを実行します。

npx wrangler deploy

初めてデプロイする場合の流れ

  1. コマンドを実行すると、自動的にブラウザが開いて Cloudflare のログイン画面が表示されます。
  2. ログインを行い、「Allow（許可）」 をクリックしてWranglerに権限を与えます。
  3. ターミナルに戻ると、自動的にビルドとデプロイが開始されます。

4. ブラウザでの本番確認

デプロイが完了すると、ターミナルの最後に以下のような本番用URLが出力されます。

Deployment complete!
Uploaded 1 files (1.20 sec)

Published my-hono-app (1.50 sec)
  https://my-hono-app.<あなたのサブドメイン>.workers.dev

この出力されたURLの末尾にパスを付け加えて、ブラウザのアドレスバーに入力してアクセスしてみてください。

  • 全商品: https://my-hono-app.<あなたのサブドメイン>.workers.dev/api/products
  • 商品B: https://my-hono-app.<あなたのサブドメイン>.workers.dev/api/products/b

世界中のエッジサーバーから即座に商品情報のJSONが返ってくることが確認できます。

まとめ

Cloudflare Workers と Hono の組み合わせは、「爆速・軽量・型安全」の3拍子が揃った現代のWeb API開発における最強の選択肢の1つです。

次回以降では、Cloudflareのデータベース機能である「Cloudflare D1」と連携して、実際にCRUD操作を行うAPIの構築手順を解説したいと思います。

コメント