Hono on 高木のブログ

【Hono】create-hono コマンド

Sat, 25 Feb 2023 00:00:00 +0000

Hono v3.0.0 から create-hono コマンドが追加された

create-react-app コマンドみたいもので、npm create hono@latest アプリ名 もしくは yarn create hono アプリ名 でサクッと Hono のアプリケーションを作成できる

$ yarn create hono sample-app

どのプラットフォームで使うか選べる

? Which template do you want to use? › - Use arrow-keys. Return to submit.
    bun
    cloudflare-pages
❯   cloudflare-workers
    deno
    fastly
    lagon
    nextjs
    nodejs

cloudflare-workers を選んだら、以下のファイル構成でアプリが作成された

$ cd sample-app
$ tree .
.
├── README.md
├── package.json
├── src
│   └── index.ts
├── tsconfig.json
└── wrangler.toml

1 directory, 5 files

$ yarn install
$ yarn dev

$ curl http://0.0.0.0:8787
Hello Hono!

今までの wrangler init して、yarn add hono する手順から解放されて良き

関連リポジトリは以下の2つかな

【Hono】v3.0.0 からバリデーションの書き方が変わった

Sun, 19 Feb 2023 00:00:00 +0000

Hono v3.0.0 がリリースされた！めでたい！

バリデーションの書き方が変わった 🔗

以前の Validator Middleware は廃止されて、薄いバリデーターしか提供されなくなった
サードパーティのバリデーターと組み合わせて使うと良いらしい
公式では Zod が推奨されていて、Zod Validator Middleware が用意されている

ちょうど手元に簡単なバリデーションを書いているものがあったので書き換えてみた

Before 🔗

import { Hono } from 'hono'
import { validator } from 'hono/validator'

const app = new Hono()

app.get(
  '/',
  validator((v) => ({
    tags: v.query('tags').isRequired().message('tags is a required parameter.'),
    associate_id: v.query('associate_id').isRequired().message('associate_id is a required parameter.'),
    count: v.query('count').isOptional().isNumeric().message('count must be numeric.'),
  })),
  async (c) => {
    const { tags, associate_id, count } = c.req.valid()
    // ...
  }
)

export default app

After 🔗

$ yarn add zod @hono/zod-validator

import { Hono } from 'hono'
import { z } from 'zod'
import { zValidator } from '@hono/zod-validator'

const app = new Hono()

app.get(
  '/',
  zValidator(
    'query',
    z.object({
      tags: z.string({ required_error: 'tags is a required parameter.' }),
      associate_id: z.string({ required_error: 'associate_id is a required parameter.' }),
      count: z.number({ invalid_type_error: 'count must be numeric.' }).optional(),
    }),
    (result, c) => {
      if (!result.success) {
        return c.text(result.error.issues.map(i => i.message).join('\n'))
      }
    }
  ),
  async (c) => {
    const { tags, associate_id, count } = c.req.valid('query')
    // ...
  }
)

export default app

所感 🔗

Zod が使えるのが良い（以前も使おうと思えば使えたのかな？）
バリデーションエラー時のレスポンスを変えたくなくて、以下のコードを追加したため以前よりコードが長くなってしまったのが気になる

(result, c) => {
  if (!result.success) {
    return c.text(result.error.issues.map(i => i.message).join('\n'))
  }
}

他にシンプルな書き方がないか引き続き調査、もしくはレスポンスを変えてしまうかの検討をしたい

Cloudflare Workers と Hono でランダムに記事を表示させるやつを作った

Tue, 03 Jan 2023 00:00:00 +0000

Cloudflare Workers と Hono を使ってちゃんとした成果物を作ってないなと思ったので、ランダムに記事を表示させるやつを作った

これが “ちゃんとした成果物” に入るかどうかは疑問

成果物 🔗

https://random.takagi.blog

対象の記事はデータの入れ込みに手を抜いたので、現時点では2022/12/31までの記事になっている

仕組み 🔗

Cloudflare Workers と Hono に加えて、記事データの保存先として Cloudflare D1 も使っている

アクセスが来たらデータベースからランダムに記事を1つ取り出してリダイレクトさせているだけ

import { Hono } from 'hono'

interface Env {
  DB: D1Database
}

type Article = {
  id: number
  title: string
  link: string
}

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

app.get('/', async (c) => {
  const article = await c.env.DB.prepare(
    `select * from articles order by random()`
  ).first<Article>()

  return c.redirect(article.link)
})

export default app

ランダムに記事を1つ取り出すのに、order by random() という SQL アンチパターンを使ってしまっているが、このくらいの用途では問題ないだろうと判断した

記事データは書き慣れている Ruby でサクッと INSERT 文を生成して D1 にぶっ込んだ

require 'rss'

rss = RSS::Parser.parse('https://takagi.blog/rss.xml')
rss.items.each.with_index(1) do |item, i|
  puts "INSERT INTO articles VALUES (#{i}, '#{item.title}', '#{item.link}');"
end

$ ruby app.rb > data.sql

リポジトリ 🔗

https://github.com/ytkg/random-takagi-blog

余力があればやりたいこと 🔗

最新の記事も対象にしたいので、記事データを自動更新する仕組み

【Hono】Basic 認証で認証失敗時のレスポンスをカスタムする方法

Tue, 09 Aug 2022 00:00:00 +0000

Hono で Basic 認証を実装したい時、ミドルウェアを使えばサクッと実現できる

import { Hono } from 'hono'
import { basicAuth } from 'hono/basic-auth'

const app = new Hono()

const username = 'hono'
const password = 'acoolproject'

app.use('/auth/*', basicAuth({ username, password }))

app.get('/auth', (c) => c.json({ message: 'Authorized.' }))

export default app

$ curl --user hono:acoolproject localhost:8787/auth
{"message":"Authorized."}

しかし、認証に失敗した時のレスポンスが固定で「Unauthorized」なっている

$ curl --user hono:foooooo localhost:8787/auth
Unauthorized

https://github.com/honojs/hono/blob/8879f241e895ab5229baa40d12144817ca1aa3d3/src/middleware/basic-auth/index.ts#L58
ソースを見たけど、ベタ書きになっていて指定できそうにもなかったので、Issue に質問を投げてみた

ステータスコード 401 をキャッチするカスタムミドルウェアを書いたら実現できるよとすぐに返答が

app.use('/auth/*', async (c, next) => {
  await next()
  if (c.res.status === 401) {
    return c.json({ message: 'Unauthorized.' }, 401)
  }
})

$ curl --user hono:foooooo localhost:8787/auth
{"message":"Unauthorized."}

これで成功時も失敗時も同じ JSON 形式のレスポンスに統一することができる

【Hono】POST リクエストで JSON データを受け取る

Mon, 01 Aug 2022 00:00:00 +0000

Cloudflare Workers 向けフレームワーク、Hono を触っていて、POST リクエストで JSON データを受け取るところで詰まったのでメモ

cURL で以下のように JSON データを送った時、c.req.parseBody() で受け取ることができる

$ curl -X POST localhost:8787 -H 'Content-Type: application/json' -d '{"id":"takagi","password":"thisispassword"}'

import { Hono } from 'hono'

const app = new Hono()

app.post('/', async (c) => {
  const { id, password } = await c.req.parseBody()

  console.log({ id, password })
  // { id: 'takagi', password: 'thisispassword' }

  return c.text('Hello, Hono!')
})

export default app

上のやり方はドキュメントにも書いてあるやり方で

Content-Type を指定しない場合 🔗

$ curl -X POST localhost:8787 -d '{"id":"takagi","password":"thisispassword"}'

Content-Type を指定しないと
{ id: undefined, password: undefined } になってしまった

c.req.parseBody() の結果を確認してみると、丸ごとキーに格納されていた

app.post('/', async (c) => {
  const body = await c.req.parseBody()

  console.log(body)
  // { '{"id":"takagi","password":"thisispassword"}': '' }

  return c.text('Hello, Hono!')
})

c.req.json() で受け取ることができる

app.post('/', async (c) => {
  const { id, password } = await c.req.json()

  console.log({ id, password })
  // { id: 'takagi', password: 'thisispassword' }

  return c.text('Hello, Hono!')
})