Honoxでページを作っている時、サイト全体で利用したい動的な値を設定したくなることがあります。例えば「本番とステージングで呼び出すAPIを変えたい」や「アクセスされた地域に応じてリダイレクトさせたい」のようなものがそうですね。これを設定する方法を簡単にまとめましたので紹介します。

middlewareとcontextで設定する

解決策はとてもシンプルで、middlewareを使います。例えばアプリ内で利用するAPIのアドレスを動的にしたい場合、このようなコードを書きます。

const apiPathMiddleware = createMiddleware(async (c, next) => {
    const host = c.req.header('host')
    const protocol = c.req.header('x-forwarded-proto') ?? host?.startsWith('localhost') ? 'http' : 'https'
    const apiBase = `${protocol}://${host}/api`
    c.set('apiBase', apiBase)
    await next()
})

環境変数を使ってもよいのですが、この方法であればステージング・プレビューデプロイなどでもそのパスを使えます。

context.getで取得した値に、TypeScriptの型情報を設定したい場合は、このような型定義を追加しておくとよさそうです。

declare module 'hono' {
    interface ContextVariableMap {
      apiBase: string
    }
}