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

選択できなくなっていたサーバフレームワーク

Nuxt.jsインストール時にはExpressやKoa.jsなどのサーバサイドフレームワークを選択できていたと思うんだけど、最近のバージョンだとそれができなくなっていたので、フレームワークをKoa.jsに変更する方法を記載する。Expressでも同じかと。

デフォルトでは "connect"

https://ja.nuxtjs.org/api/configuration-servermiddleware
で次のように記載されているように、デフォルトではconnectが適用されるらしい。

Nuxt は内部で connect のインスタンスを作ります。
それはミドルウェアをスタックに登録したり、 外部サーバーを
必要とせず に API などのルートを増やす事を可能にしてくれます。
connect 自体はミドルウェアで、登録されたミドルウェアは
nuxt start と express-template のようなプログラム的な
使用法を持つミドルウェアとして使用されます。

connectのままでもいいんだろうけども、自分的にはKoa.jsの方が使い慣れてるし、今はまだKoa.jsの方が広く受け入れられてると思う。

手順

1. Nuxt.js、Koa.jsインストール

npx create-nuxt-app app
cd app
npm i koa

2. server/index.js 作成

アプリフォルダ直下にserverフォルダを作成し、その配下にindex.jsを作成する。

index.jsはKoa.jsのページにある"Hello World"のサンプルにexport defaultを追加。
あとは煮るなり焼くなり。

index.js

const Koa = require('koa')
const app = new Koa()

app.use((ctx) => {
  ctx.body = 'Hello World'
})

export default {
  path: '/api',
  handler: app.callback()
}

3. nuxt.config.js 編集

serverMiddleware: ['~~/server/'] を追加する。

nuxt.config.js

import colors from 'vuetify/es5/util/colors'

export default {

  serverMiddleware: ['~~/server/'],

以上で完了。/apiにアクセスするとKoa.jsが動く。