[Vue] Nuxt에서 serverMiddleware 사용하기(server-middleware)

nuxt.config.js 설정

  serverMiddleware: [
    { path: '/logger', handler: '~/server-middleware/api/logger.js' },
    { path: '/api', handler: '~/server-middleware/users.js' }
  ]

 

프로젝트 루트 폴더 아래 server-middleware 폴더 생성 후 파일 생성

nuxt.config.js 에 추가된 파일이며, require로 사용되는 라이브러리를 못 찾는 경우 vue에 사용하는 라이브러리를 추가하듯이 npm install을 통해 설치하면 된다.

logger.js

export default function (req, res, next) {
    // req is the Node.js http request object
    console.log(req.url)
  
    // res is the Node.js http response object
  
    // next is a function to call to invoke the next middleware
    // Don't forget to call next at the end if your middleware is not an endpoint!
    next()
}

 

users.js

const express = require('express')
const axios = require('axios');
const url = require('url');
const app = express()

app.use(express.json())
app.get('/users', async (req, res) => {
    const uri = url.parse(req.url)

    try {
        const fullUrl = process.env.API_BASE_URL + '/' + uri.query
        const { data } = await axios.get(fullUrl)
        res.status(200).json(data)
    } catch (error) {
        res.status(error.response.status).json(error.message)
    }
})

module.exports = app

 

vue 컴포넌트 에서 설정된 패스로 호출

<h2 class="text-2xl leading-7 font-semibold" @click="getUsers">
	Welcome to your Nuxt Application11
</h2>
<h2 class="text-2xl leading-7 font-semibold" @click="getLogger">
	Welcome to your Nuxt Application22
</h2>
...

methods: {
    async getUsers() {
      const res = await this.$axios.get("/api/users?page=2&a=2")
      console.log(res)
    },
    async getLogger() {
      const res = await this.$axios.get("/logger")
      console.log(res)
    }
 },

 

참고사항

로그를 확인할때 server-middleware는 terminal에서, vue는 browser console에서 확인을 해야 한다.