More than 3 years have passed since last update.

Nuxt2のServerMiddleware+Express構築の際の覚書

Posted at 2022-02-20

Nuxt3の正式リリースも近そうですが、まだまだ2で構築する機会もありそうなので覚書。

ServerMiddleware

NuxtのserverMiddlewareプロパティを利用すると、サーバサイドで動作するアプリをつくることができます。
これを利用してシンプルなAPIサーバを立てられるので、ちょっとしたWebアプリやモックなどに重宝します。

しかし、そのままだと若干開発時に設定が必要でいつも詰まるので覚書。

公式ドキュメントにExpressを使えるよ的な事が書いてありましたが自分の環境では

import express from 'express'

て書いたらエラーになりました。
内包しているわけではないので、インストールが必要です。（あたりまえ）

npm install express

serverMiddleware以下のコードでは、importするときに、tsconfigのcompilerOptions:pathsを適用してくれません。

import AAA from '@/aaa'

とか書いてしまうとエラーになります。

tsconfig-paths-webpack-plugin で解決できます。

参考:

例: 以下のように設定している場合、そのままでは、server/index.ts で import aaa from '@/aaa' とかできないので、server以下のディレクトリでコードを書いたときも paths が使えるようにします。

nuxt.config.js

serverMiddleware: [{ path: '/api', handler: '@/server/index.ts' }],

npm install --save-dev tsconfig-paths-webpack-plugin

tsconfig.js

...
"paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ],
      "@server/*": [
        "./server/*"
      ]
...

package.json...

"dev": "node -r tsconfig-paths/register ./node_modules/nuxt/bin/nuxt.js",

これで

npm run dev

したときにpathsを適用してくれます。

ServerMiddleware配下のファイルはホットリロードしてくれないので不便です。
nuxt.config.js　の設定で対応できます。

nuxt.config.js

build: { watch: ['@/server/api/*.ts'] },

ほんの覚書程度なので足りない内容などは以下を参考にしてください。