Nuxt3のサーバフレームワークをKoa.jsに変更する #Nuxt3

以前、下記の記事でNuxt.js v2のサーバフレームワークをKoa.jsにする記事を書いたので、今回はそのNuxt3版。
「そんなことしたらせっかくのNitro機能が台無しじゃないか」と言う方も多々いらっしゃるでしょう。はい。すみません。でも全Methodを受け付けてしまうh3なんて要らないっす。しかもPatchは無かった気がする。

ソースはこちら。

フォルダ構成

私はNuxt.jsでPoCを作ったりする時はデフォルトのフォルダ構成ではなく、クライアント（Vue）とサーバ（Koa.jsやExpressなど）のフォルダを分けてソース管理するのが好きなので、こんな感じのフォルダ構成にする事が多い。

nuxt3-app
  └─ src
      ├─ client (Vueのソースを格納するフォルダ)
      └─ server (Koa.jsやExpressなどのサーバ機能のソースを格納するフォルダ)

nuxt.config.ts

srcDirとserverMiddlewareを追加する。handlerは"~/src"にしてしまうとsrcDir配下のパスになるので、"~~/src"にする。

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt3'

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
    srcDir: "src/client/",
    serverMiddleware: [
        {
            path: "/api",
            handler: "~~/src/server/index.ts"
        }
    ]
})

src/server/index.ts

index.ts

import Koa from 'koa'
import Router from 'koa-router'

const app = new Koa()
const router = new Router()

router.get('/', (ctx) => {
    ctx.body = 'Hello World'
})

app.use(router.routes())
app.use(router.allowedMethods())

export default app.callback()

これだけで http://localhost:3000/api にアクセスすればkoaが動いてくれるので、後はいつも通りよしなに。