Nuxt のバックエンドで Hono を使う

公開日:

はじめに

Nuxt のプロジェクト内で、バックエンドに Hono を使う方法を紹介します。

Nuxt は直接サーバーサイドのコードも書くことができます。ですが私は、なるべくフロントエンドとバックエンドを分離しやすく保っておきたいという思いがありました。

そこで、Nuxt の上に Hono のレイヤーを作って、その上にバックエンドのコードを書くことにしました。

Hono は 様々なサーバーレス環境や、Node.js で動くように設計されています。もしバックエンドを分離させたくなった時も移動させやすいはずです。

nuxt-hono_010

これから紹介するコードは、以下のリポジトリを参考にしました。

GitHub - TheAlexLichter/alexander-lichter-other-backend-in-nuxt

やりかた

  1. Hono をインストール
  2. nuxt.config.tsに設定を追加
  3. /hono/index.tsを作成
  4. アクセスして確認

最後にどのような仕組みになっているかも書いています。

1. Hono をインストール

まず Hono をインストールします。

npm install hono

2. nuxt.config.tsに設定を追加

nuxt.config.ts

export default defineNuxtConfig({
  serverHandlers: [
    {
      route: '/api/**',
      handler: '~/hono/index.ts',
      middleware: false,
    },
  ],
})

3. /hono/index.tsを作成

index.ts

import { Hono } from 'hono'

const app = new Hono()

app.get('/api/:param', (c) => {
  return c.text(`This is Hono with param: ${c.req.param('param')}`)
})

export default defineEventHandler((event) => {
  event.node.req.originalUrl = '' // /api/hono/
  const webReq = toWebRequest(event)
  return app.fetch(webReq)
})

プロジェクト直下にhonoという名前でディレクトリを作って、その中にindex.tsを作ります。

4. アクセスして確認

開発サーバーを起動して確認してみます。

npm run dev

http://localhost:3000/api/testにアクセスします。

nuxt-hono_020

できましたね。

しくみ

nuxt.configntsのserverHandlersを設定することで、特定のルートに対するイベントハンドラを設定できる。

そのイベントハンドラ内では UnJS の h3 のイベントを取得できる。Nuxt は内部で h3 を使用しています。

Hono では Web 標準のリクエストが必要なので、toWebRequestで Web 標準のリクエストに変換して渡しています。toWebRequestは h3 の関数です。

参考

GitHub - TheAlexLichter/alexander-lichter-other-backend-in-nuxt