[Vue.js] Nuxt - Server Middleware로 백엔드 API 만들기

참고) Nuxt - The serverMiddleware Property (nuxtjs.org)

The serverMiddleware Property

Nuxt에서는 외장 서버를 구축할 필요 없이 내부적으로 커스텀 미들웨어를 추가할 수 있다.

(Connect : Node.js에서 활용할 수 있는 HTTP 서버 프레임워크)

this.addServerMiddleware() 메소드를 통해 서버 미들웨어 또한 사용할 수 있다.

기본값이 true인 접두사를 통해 서버 미들웨어에 라우터 기반 기능을 추가할 수 있다.

서버 미들웨어와 라우트 미들웨어는 서로 다르다.

서버 미들웨어는 vue-server-renderer보다 먼저 서버 측에서 실행되고, API 요청 처리같은 서버 특정 작업에 사용한다.

라우트 미들웨어는 페이지 이동에 사용되는 미들웨어다.

Express는 백엔드에서 자주 사용하는 서버 프레임워크다.

app.all은 get 또는 post 방식으로 /getJSON에 들어온 어떤 요청을 콜백함수의 내용으로 처리하는 메소드다.

보통 app.all은 get 또는 post 방식 둘 다 읽을 수 있으나, get 또는 post를 명확하게 사용하는 것이 오류가 적다.

module.exports를 통해 내보내면 해당 모듈을 serverMiddleware에 등록할 수 있다.

 

밑의 serverMiddleware: 를 살펴보면 path가 /server-middleware라고 되어있는데, 이는

https://도메인주소/server-middleware/ 하부 URL로 들어오는 요청을 handler로 처리하겠다는 의미를 가진다.

 

즉, 이를 통해 movie 페이지에서 그 주소를 통해 영화 정보를 가져오는 과정을 구현할 수 있다.

실제 예시

/nuxt-movie-app/server-middleware/movie.js 생성

경로를 직접 입력하므로 굳이 폴더 이름이 server-middleware일 필요는 없다.

express 프레임워크를 사용하기 위해 다음의 명령어로 express를 설치한다.

npm i --S express

express.json()은 HTTP통신 시 POST 방식에서 body부분을 해석하는 플러그인이다.

body-parser를 사용하는 방법은 위의 Custom API endpoint 부분에 나와있으나 이는 조금 예전 방식이다.

위와같이 app.post를 이용하여 기본적인 로직을 구성하고,

로직이 완성이 되면 res.status(200)을 통해 정상적인 응답으로 .json('원하는내용')을 담아 내보낸다.

 

프론트엔드 측에서는 'xxxx'라는 특정한 주소로 요청을 날리게 되면 RIAM!이라는 문자열을 받을 수 있다.

서버리스 함수 이전하기

기존의 프로젝트의 /functions/movie.js 에서 서버리스 함수 로직을 복사해온다.

좌: 기존 Vue 프로젝트, 우: Nuxt 프로젝트

내용 수정

express.json()라는 body부분 해석기를 사용하기 때문에 JSON.parse()는 더 이상 필요없다.

밑의 로직에서 await를 사용하므로 콜백함수 앞에 async 키워드를 작성한다.

수정 전

수정 후

try-catch문도 문법에 맞게 수정해준다.

nuxt.config.js에 추가

우리는 더이상 netlify의 서버리스 함수를 사용하지 않으므로 경로를 다음과 같이 수정해준다.

환경변수 생성

npm i -D @nuxtjs/dotenv

nuxt.js에 등록

/.env 에 환경변수를 선언한다.

 

개발서버를 열어 테스트 진행

npm i
npm run dev

movie 페이지가 정상적으로 출력되지 않는다.

 

이는 Nuxt에서 CSR과 SSR 방식을 공존하여 사용하기 때문에 발생하는 문제다.

처음에 요청할 때는 SSR 방식으로 페이지를 렌더링하지만, 이후 페이지에서는 CSR방식으로 동작하기 때문인데,

따라서 _fetchMovie() 메소드에서 참고해야 하는 URL 주소를 제대로 찾지 못해서 이런 오류가 발생한다.

 

이를 해결하려면 영화 상세정보 요청 코드를 SSR과 CSR일 때를 구분지어주어야 한다.

/store/movie.js

기존 _fetchMovie()

1차적으로 3항 연산자를 활용해 CSR환경과 SSR 환경을 구분해준다.

그다음 http://localhost:3000 부분을 동적으로 만들어준다.

.env에 환경변수 추가

HEROKU에 런칭할 때는 해당 페이지의 실제 주소를 CLIENT_URL로 넣어주면 된다.

/pages/movie/_id.vue

created() 단계에 작성된 로직은 SSR 이후 클라이언트로 넘어왔을 때 제공되는 기능이다.

따라서 SSR 단계에서 처리가 가능할 수 있게 asyncData()를 추가해준다.

created() 단계에는 더이상 저 로직이 필요하지 않으므로 삭제한다.

 

asyncData()는 SSR에서 작동하기 때문에 this 키워드를 제공하지 않는다. (Nuxt의 Lifecycle이다)

그 대신 context라는 매개변수를 제공하여 route나 store, params 등의 정보에 접근할 수 있다.

 

비동기로 작동되므로 async await 키워드를 사용해준다.

 

참고) Nuxt - Context and Helpers (nuxtjs.org)

Context and Helpers

참고) Nuxt - Nuxt Lifecycle (nuxtjs.org)

Nuxt Lifecycle

개발서버 테스트

잘 작동한다.