はじめに
Cloudflare Workersやネットの技術記事で、定期的にhonoを見るようになりました。
せっかくなので、Honoのチュートリアルを触ってみます。
スターターテンプレートでプロダクトを作成します
$ npm create hono@latest my-app
cloudflare-workersを利用します。
? Which template do you want to use?
aws-lambda
bun
cloudflare-pages
❯ cloudflare-workers
deno
fastly
lagon
nextjs
nodejs
vercel
プロダクトが作成されたら、プロダクトのディレクトリへ移動して、npm iします。
$ cd my-app
$ npm i
下記のようなディレクトリ構成が展開されています。
.
├── README.md
├── node_modules
├── package-lock.json
├── package.json
├── src
│ └── index.ts
├── tsconfig.json
└── wrangler.toml
npm iが終わったら、下記のコマンドでローカルサーバーを立ち上げます。
$ npm run dev
> dev
> wrangler dev src/index.ts
⛅️ wrangler 3.22.1
-------------------
⎔ Starting local server...
[wrangler:inf] Ready on http://localhost:1234
[wrangler:inf] GET / 200 OK (33ms)
[wrangler:inf] GET /favicon.ico 404 Not Found (8ms)
表示されるlocalhostへアクセスすると、下記のようにHello Hono!が表示されます。
JSONを返す処理の実装
GET リクエストを処理し、レスポンスを返す例です。
import { Hono } from 'hono'
const app = new Hono()
app.get('/api/hello', (c) => {
return c.json({
ok: true,
message: 'Hello Hono!',
})
})
export default app
http://localhost:1234/api/hello へアクセスすると、
リクエストとレスポンスの実装
パス パラメーター、URL クエリ値を取得し、Response ヘッダーを追加する手順は次のように記述されます。
app.get('/posts/:id', (c) => {
const page = c.req.query('page')
const id = c.req.param('id')
c.header('X-Message', 'Hi!')
return c.text(`You want see ${page} of ${id}`)
})
http://localhost:1234/posts/123?page=1などにアクセスすると、下記のように渡した値に合わせて表示が返ってきます。
HTMLを返す
src/index.tsをsrc/index.tsxに変更します。
import { Hono } from 'hono'
const app = new Hono()
const View = () => {
return (
<html>
<body>
<h1>Hello Hono!</h1>
</body>
</html>
)
}
app.get('/page', (c) => {
return c.html(<View />)
})
export default app
ファイル名の変更に合わせてpackage.jsonのscriptsで、index.tsを指定している箇所をindex.tsxに修正します。
{
"scripts": {
"dev": "wrangler dev src/index.tsx",
"deploy": "wrangler deploy --minify src/index.tsx"
},
上記の変更を終えたら、$ npm run devし直し、localhost:1234/pageにアクセスすると、HTMLが表示されます。
生のResponseを返す実装
Responseを返すこともできます。
app.get('/', (c) => {
return new Response('Good morning!')
})
Middlewareの実装
チュートリアルでは、Basic認証の例です。
Firebase Auth などの外部ライブラリを使用したサードパーティのミドルウェアも提供されているとのことで、便利にログイン処理の実装ができそうです。
import { Hono } from 'hono'
import { basicAuth } from 'hono/basic-auth'
const app = new Hono()
app.use(
'/admin/*',
basicAuth({
username: 'admin',
password: 'secret',
})
)
app.get('/admin', (c) => {
return c.text('Your are authorized!')
})
export default app
実際にアクセスするとBasic認証が可能です。
終わりに
とりあえず、Honoのチュートリアルを走ってみました。
CloudflareWorkerを個人開発に使いだしているのですが、Workers+JSだけだと面倒な部分をHonoが良い感じに吸収してくれそうです。次のプロダクトではHonoを使ってみようかな？と思います。