Hono + Vite + Cloudflare Workers プロジェクト作成

Hono+Vite+Cloudflare Workersを使って、アプリのデプロイまでの方法を説明します。

環境

• macOS
• volta 2.0.2
• node 22.18.0
• pnpm 10.22.0

プロジェクト作成

まず、ターミナルで以下のコマンドを打って、新規プロジェクトを作成します。

pnpm create hono my-hono-app

コマンドを実行すると、いくつか質問されるので今回は以下の画像のように選択します。
※選択は十字キーでできます。

• cloudflare-workers+vite
• Yes
• pnpm

次に、作成したプロジェクトに移動して、アプリケーションを実行します。

cd my-hono-app

pnpm dev

以下のようになったら、http://localhost:5173にアクセスしてください。

以下の画像のように表示されたら成功です。

試しに編集してみましょう。

VSCodeで開きます。

code .

Hello Hono!と返すapiをつくります。

src/index.ts

import { Hono } from "hono";
import { renderer } from "./renderer";

const app = new Hono();

app.use(renderer);

app.get("/", (c) => {
  return c.render(<h1>Hello!</h1>);
});

+ app.get("/api/hello", (c) => {
+  return c.json({ message: "Hello Hono!" });
+ });

export default app;

先ほどアクセスしたリンクに戻り、URLに/api/helloを追加してください。
以下の画像のように表示されたら成功です。

デプロイ

Cloudflare Workersを使用してデプロイします。

コマンドラインツール Wranglerをインストールします。

npm install -g wrangler

インストールされたことを確認しましょう。

wrangler -v     

 ⛅️ wrangler 4.47.0
───────────────────

Cloudflareにアクセスするためにログインします。

wrangler login

コマンドを実行するとブラウザが開き、アクセスの許可を求められるので Allow を選択します。

ターミナルへ戻り、以下のコマンドを打ってデプロイします。
※サブドメインを登録していない場合、入力を求められるので任意の値を入力してください。

wrangler deploy

 ⛅️ wrangler 4.47.0
───────────────────
Total Upload: 112.27 KiB / gzip: 25.96 KiB
Worker Startup Time: 1 ms
Uploaded my-hono-app (3.19 sec)
Deployed my-hono-app triggers (2.93 sec)
  https://my-hono-app.u5-hono-app.workers.dev
Current Version ID: a26df5b7-8bf4-43e6-ae6b-2349d599c3f1

デプロイが完了するとURLが表示されるのでアクセスしてみましょう。