Vue & NodeJS & Express 통합 배포시 API Proxy

Frontend 로 Vue

Backend 로 Node/Express 를 사용한다면,

 

개발장비에서 보통은

Vue 는 80xx (8001, 8002 ...) 번 포트,

Express 는 30xx (3001, 3002 ...) 번 포트로 나눠서 개발하게 될겁니다.

개발 테스트는 각각 서비스를 띄워서 해볼거구요.

 

Frontend 에서 API 접속은 Backend 쪽으로 URL을 접속하는데

이 때 프록시 Proxy 라는 걸 이용하게 됩니다. (Vue 에서 프록시 테이블)

매번 api 주소를 http://localhost:3001 라고 써야하는걸

vue.config.js 에서 편하게 설정하면 되는 식이죠.

브라우저에서 접속해서 테스트 한다면,

프론트인 http://localhost:8081 로 접속하면 됩니다.

현재 프론트엔드나 백엔드나 똑같이 /board 를 엔드포인트로 잡아도 잘 돌아갑니다.

포트가 다르니까 URL이 각각 다르게 작동됩니다.

 

개발 장비에서 api 설정

 

배포 서버에서는

Nginx 나 아파치 같은 앞단 프록시 웹서버에서 80번 포트를 받아서

해당 도메인에 연결된 Express 포트로 연결해 줍니다.

 

이렇게 배포될 때는

Vue 프로젝트를 빌드해서 Express 프로젝트의 public 으로 전달해 주고

Frontend와 Backend가 함께(한 프로젝트/폴더 안에) 서버로 배포됩니다.

 

이 때는 Vue, Express 가 별도 서비스로 띄워지는게 아니고,

특히 80번 포트를 독점해서 쓰지 않을 때-

개발자나 서버관리자가 Express 설정 그대로 3001 번과 같은 포트에서 함께 띄워주겠죠?

아니면 내부 IP를 쓰는 다른 서버에서 띄울 수도 있습니다.

 

하지만 사용자 브라우저에서 접속하는건 80번 포트로 동일합니다.

 

같은 기능 안에서 묶이는 Frontend 와 Backend 때문에

API 접속 포인트를 '/api/xxx' 라고 설정하고,

vue.config.js 에서 api target 을 설정했는데,

Vue의 접속 라우터와 Express 라우터 이름을 같게 하면

백엔드 쪽에서 반응이 없습니다.

 

같은 Vue 쪽 엔드포인트로 접속하게 되니 당연히 데이터를 받아올 수 없습니다.

보안상 3001번 포트는 막혀있을거에요.

 

API 엔드포인트 변경

 

그래서

처음부터 Vue 컴포넌트들의 라우터 URL와 Express 라우터 접속 포인트를

다르게 설정하고 작업하시길 바랍니다.

 

예를 들어,

바닷바람클럽이라는 대서양 깊은 곳 아틀란티스 카페의

게시판의 글 리스트 페이지에 사용자가 접속한다고 합시다.

 

접속 URL : https://ocean.winds/board 

 

Vue 에서는 '/board/list' 를 라우터로 잡았다면.

사용자는 리스트가 있는 페이지를 보게 됩니다.

 

Backend 에서 게시글 리스트 데이터를 가져오는 것은

Express 에서 /beboard/list 와 같이

라우터 접속 URL을 API 엔드포인트 로 설정해서 접속해야 합니다.

 

데이터를 가져오는 API URL(예시)은

'https://ocean.winds/beboard/list'가 됩니다.

 

그러면 통합 배포시에도 문제없이 작동됩니다.

 

규칙만 잘 정하면,

Frontend 개발자나 Backend 개발자나 각자의 엔드포인트로 작업하면 됩니다.

 

Vue 프락시 설정에 '/api' 가 있으면,

배포용일 때 Vue 쪽에서 '/api' 를 제거하시면 됩니다.

전역 변수를 하나 지정해서

NODE_ENV 값으로 개발/배포에 따라 다르게 적용되도록 해 보세요.