【Nuxt】serverMiddlewareでAPIサーバーを構築する方法【サンプルあり】

どーも、ぐるたか@guru_takaです。

NuxtのserverMiddlewareを使って、APIサーバーを立てたので、そのやり方をまとめます。

MEMO

typescriptを使用しています。

スポンサードリンク

serverMiddlewareとは？
主な手順
参考リンク

serverMiddlewareとは？

serverMiddlewareについて簡単にまとめると、APIリクエストやアセットなどのサーバー固有の処理をやってくれます。

BFF（Backends For Frontends）のように使える優れものです！

参考 API: serverMiddleware プロパティ - NuxtJS 参考 Nuxtに「serverMiddleware」を設定して、API サーバ的な動きをさせてみた | 東京のWeb制作会社LIG

主な手順

STEP.1

APIサーバー構築

STEP.2

nuxt.config.jsの編集

STEP.3

axiosで確認

STEP.1:APIサーバー構築

expreeを使用して、APIサーバーを構築します。

まずはソースから！

import { Request, Response } from 'express'

const express = require('express')
const app = express()

// for parsing application/json
app.use(express.json())
// for parsing application/x-www-form-urlencoded
app.use(express.urlencoded({ extended: true }))

// post:オウム返し
app.post('/api/post', async (req: Request, res: Response) => {
  await res.end(req.body.params.test)
})

// get:hello world
app.get('/api/get', (req: Request, res: Response) => {
  res.send('hello world')
})

export default app

bodyParserを使ってパースする記事が多いですが、Express4.16以降からexpress搭載のメソッドでできるようになりました。
参考 Express 4.x - API リファレンス

ここでは、Hello WorldをGetできるAPIと、POSTでオウム返しするAPIをサンプルとして挙げています。

STEP.2:`nuxt.config.js`の編集

続いて、nuxt.config.jsを以下のように追記します。

nuxt.config.js

serverMiddleware: ['~/api'],

STEP.3:axiosで確認

後は$ yarn devでローカル環境を立ち上げてみましょう。

すると、localhost:3000/api/getを開くと、Hello Worldが出てくるはずです！

Postについては、以下のコードで確認すると良いでしょう。

pages/ondex.vue

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component({
  components: {
    Logo: () => import('@/components/Logo.vue')
  },
  async asyncData({ app }) {
    const posts = await app.$axios.$post('http://localhost:3000/api/post', {
      params: { test: 'オウム返し' }
    })
    console.log(posts)
  }
})
export default class Index extends Vue {}
</script>

MEMO

typescriptで@nuxt/axiosを使うときは、tsconfig.jsonに"types": ["@nuxtjs/axios"]を追加しないと、$axiosが使えなくなります！