はじめに

この記事では Hono と Cloudflare Workers を使って REST API を作成する方法を紹介します。

Hono とは

Hono は Cloudflare Workers / Pages だけではなく様々な環境で利用できる JavaScript / TypeScript のフレームワークです。

詳しくは様々な記事があるので省かさせていただきます。

プロジェクトの作成・準備

Hono のテンプレートの中から cloudflare-workers テンプレートを選んでプロジェクトを新規作成します。

$ npm create hono@latest

create-hono version 0.6.3
? Target directory .
? Which template do you want to use? cloudflare-workers
✔ Cloning the template
? Do you want to install project dependencies? yes
? Which package manager do you want to use? npm
✔ Installing project dependencies
🎉 Copied project files
Get started with: cd .

次に Wrangler にログインしましょう。
Wrangler は Cloudflare Workers の CLI ツールです。

$ npx wrangler login

 ⛅️ wrangler 3.50.0
-------------------
Attempting to login via OAuth...
Opening a link in your default browser: https://dash.cloudflare.com/oauth2/auth
Successfully logged in.

起動

プロジェクトのディレクトリに移動して、以下のコマンドを実行します。

$ npm run dev

http://localhost:8787 にアクセスすると、Hello Hono! と表示されるはずです。

REST API の作成

src/index.ts を以下のように編集します。

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', (c) => {
	const name = c.params.name;
	return c.text(`Hello, ${name}!`);
});

export default app;

/api にアクセスすると JSON データが返ってくるようになりました。

/api/hello/:name にアクセスすると、:name に指定した名前が表示されるようになります。

デプロイ

以下のコマンドでデプロイします。

$ npm run deploy

> deploy
> wrangler deploy --minify src/index.ts

 ⛅️ wrangler 3.50.0
-------------------
✔ Select an account › Your Account
Total Upload: 19.15 KiB / gzip: 7.27 KiB
Uploaded hono-introduction (1.14 sec)
Published hono-introduction (5.03 sec)
  https://hono-introduction.your-account.workers.dev
Current Deployment ID: 00000000-0000-0000-0000-000000000000

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

まとめ

Hono と Cloudflare Workers を使って REST API を作成する方法を紹介しました。

詳しくは公式ドキュメントを参照してください。

Hono
Cloudflare Workers