🔥

Hono + cloudflare worksで無料のBackend APIを建てる

2025/06/09に公開

SESあるあるだとは思うが、現場では枯れたレガシーシステムを開発/維持保守していることが多い。
レガシーシステムを扱っている都合上、モダンな技術から遠く離れていってしまう。
そうして、モダンな技術から離れると、自己のスキルセットがレガシーに汚染されてしまい、次の現場もレガシーになってしまうのだ。
レガシーの負の連鎖を断ち切る意味で、私はモダン技術を自己学習しているわけだが、自己学習しているだけだと会社の評価に繋がらず、給料に還元されない。
そのため、会社の年間目標にしれっと業務と関係しないモダンアプリを盛り込み、評価に反映させながら自己学習をするわけだ。

そんなわけで、今回はHono + cloudflare worksで無料のBackend APIを作る。
もちろん、年間目標がFrontで趣味がBackだ。

1. 構成要素の説明

1. Cloudflare worksとは

CDNとかを得意とするアメリカの企業がやっているクラウドサービス。
worksは、jsとかts限定ではあるが、非常に軽いFaaSサービスだ。
たぶん超軽量のコンテナイメージ化して動作しているはず。

githubアカウントとかgoogleアカウントと連携すれば、無料でAPIとか公開できる。
もちろん無料枠があるだけで、使いまくると課金になるが。
クレカなしで利用できるので扱いやすい。

2. honoとは

javascriptのWebフレームワークで、APIを作るのに便利。
Cloudflare worksは、FaaSサービスあるあるの縛りで実行できるライブラリに制限があり、そんな状況下でAPIを作成するために作成されたフレームワークっぽい。たぶん。

2. honoプロジェクトを作成する

npmとかを入れた状態で、レポジトリルートフォルダから以下コマンドを実行。

PS C:\LocalRepository> npm create hono@latest
create-hono version 0.19.1
✔ Target directory AnuualTargetFY2025-Backend
✔ Which template do you want to use? cloudflare-workers+vite
✔ Do you want to install project dependencies? Yes
✔ Which package manager do you want to use? npm
✔ Cloning the template
✔ Installing project dependencies
🎉 Copied project files
Get started with: cd AnuualTargetFY2025-Backend

3. Wrangler にログインする

PS C:\LocalRepository\AnuualTargetFY2025-Backend> npx wrangler login

 ⛅️ wrangler 4.19.1
───────────────────
Attempting to login via OAuth...
Successfully logged in.

4. デフォルト状態でテストする

構成が問題なく作れているのか確認するために、以下のコマンドを実行する。
viteが起動するので、http://localhost:5173/にアクセスすれば状態が見れる。

npm run dev

5. honoの基本をおさらいする

src/index.tsxを修正して、以下のようにする。
/apiにアクセスするとjsonが取れる。
/api/hello/testにアクセスすれば、Hello, test!と表示されるはず。
これで、ルーターの切り方と、URLからのパラメーターの取り方がわかった。

import { Hono } from "hono";

const app = new Hono();

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

// Add a new route
app.get("/api", (c) => {
  return c.json({ message: "Hello Hono!" });
});

// Add a new route with a parameter
app.get("/api/hello/:name", async (c) => {
  const name = c.req.param('name');
  return c.text(`Hello, ${name}!`);
});

export default app;

6. Git登録

ローカルのセッティングができてきたので、Git関係の処理をする。
私はgithubを使用しているので、ghコマンドでリモートレポジトリの作成、プッシュをしている。

git init
gh repo create

7. デプロイ

機能をまったく作っていないが、正常にデプロイできるか確認するため、一度デプロイしてみる。

npm run deploy

これを実行すると以下のエラーが出る。
windowsだけデフォルトコマンドでパスが通ってないエラーになるっぽい。

PS C:\LocalRepository\AnuualTargetFY2025-Backend> npm run deploy              

> deploy
> $npm_execpath run build && wrangler deploy

'$npm_execpath' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。

パスを通すでもいいが、めんどくさいので、package.jsonのdeployを$npm_execpathからnpmに変更する。
github actionsとかで実行するときにつまずくかもしれんけど、、、エラーになったらその時なおすってことで。

  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "$npm_execpath run build && vite preview",
    "deploy": "npm run build && wrangler deploy",
    "cf-typegen": "wrangler types --env-interface CloudflareBindings"
  },

デプロイコマンドが成功したら、cloudflareの管理画面から、デプロイされたworksを選択し、訪問するを選択する。
私の場合は以下URLにデプロイされていた。
表示して、ローカルテスト時と同じ挙動ができれば問題なし。

参考

https://hono.dev/docs/