Nuxt + Express 백엔드 API 서버 통합

 

Nuxt 프로젝트와 Express Backend API 서버 통합

 

Nuxt를 이용하여 프로젝트를 개발하다보면 한번씩 고민을 하게 될 것이다.

 

프론트엔드 서버  🤝   API 서버

이 2개를 각각의 프로젝트로 만들건지 하나로 통합할 것인지..

큰프로젝트라면 2개를 나누어서 별도의 서버로 운영할 것이다.

 

하지만 작은 프로젝트라면 그냥 하나로 통합해서 개발하고 하나의 서버로 배포하고 싶을 것이다.

 

Nuxt + Express API 통합

어떻게 통합을 할 수 있을까?

 

Nuxt 프로젝트에 Express 서버가 들어가면 된다.

 

방법은 아주 간단하다. 바로 serverMiddleware !!

 

👉   serverMiddleware

Nuxt에는 serverMiddleware 라는 것이 존재한다.

문자 그대로 server side에서 실행되는 middleware 라는 의미이다.

serverMiddleware를 이용하여 외부의 서버 필요없이 지정된 경로의 라우팅에 대한 처리를 지정할 수 있다.

 

/api로 오든 모든 라우팅을 이것을 처리할 인스턴스로 연결만 시켜주면 된다.

 

nuxt.config.js

serverMiddleware: [
    { path: '/api', handler: '~/api/index.js' }
],

nuxt 설정에서 serverMiddleware 항목에 이렇게 추가만 해주면 된다.

/api 로 시작하는 모든 요청은 ~/api/index.js 에서 처리해주겠다는 것이다.

 

그럼 handler로 사용할 API 서버를 아래처럼 express로 만들면 된다.

 

api/index.js

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

app.get('/', function (req, res, next) {
  res.send('ok')
})

// ERROR HANDLER
app.use(function (err, req, res, next) {
})

// EXPORT
module.exports = app

 

사이트 도메인이 example.com 라면 

모든 API는 example.com/api/~  이렇게 호출하도록 만든다.

 

 

그리고 nuxt start를 하면 express 서버가 같이 실행이 된다.