Zenn
Open4

Nuxt.js v2とExpressで簡単なBFFを作ってみる

Nuxt
TypeScript
Express
rikusen0335rikusen0335

Nuxt.js

srcなどのディレクトリの中に、apiというフォルダーを作成する
apiフォルダの中にroutesフォルダ、app.js、index.jsを作成
routesの中にhello.jsを作成する

apiフォルダは人によってはserverだったり

最終的な構造はこんな感じに

.
└── src/
    └── api/
        ├── routes/
        │   └── hello.js
        ├── index.js
        └── app.js

以下をコピペ

nuxt.config.js
  serverMiddleware: [
    '~/api/index',
  ],
app.js
import express from 'express'
const app = express()

import hello from "./routes/hello"

app.use(express.json())
app.use("/hello", hello)

export default {
  path: "/api",
  handler: app,
}
index.js
const moduleAlias = require('module-alias')
moduleAlias.addAliases({
  '@'  : __dirname + '/../'
})
module.exports = require('./app')
routes/hello.js
import express from "express"

const router = express.Router()

router.get("/", (req, res) => {
  res.json({ message: "Hello!" })
})

export default router;
rikusen0335rikusen0335

これで、http://localhost:3000/api/helloにアクセスすると（またはGETメソッドなどでcurlを使う）、jsonでメッセージが返ってくるようになります。

rikusen0335rikusen0335

module-aliasを使っている理由

Nuxt.js v2では、serverMiddlewareの中では絶対パスからのインポートが使用できません。
そこで、module-aliasを使用してwebpackに無理矢理読み込ませることによって@でのインポートを可能にしています。