서버사이드 랜더링 적용시 API 서버 연동에 대한 문의 드립니다.

Question

실무에 nuxt.js를 사용해보기 위해 강의를 듣고 있습니다. 앞부분 듣는 중이라 개념이 잘 안잡혀서 질문 드립니다. 예를 들어 아래 처럼 두개의 서버가 있다고 가정할때 웹서버 : 1번 서버(IP: 11.11.11.111) API서버 : 2번 서버(IP: 22.22.22.222)  2(API)서버에서는 1서버의 IP만 허용하고 다른 접근은 방화벽으로 막혀있습니다. 이전 개발 방식(jsp, asp.net mvc 등)은 서버사이드에서  API를 호출하여  1-->2 서버로 접근 가능 (출발지가 1 IP 이기 때문에) vue.js 경우 1에서 API 호출되는 것이 아니라 클라이언트 브라우저 --> 2로 접근 하는 것으로 생각됩니다. 그러면 방화벽에서 막혀서 접근이 안될꺼라 예상됩니다. (출발지가 무작위 즉, 1 IP가  아니기 때문에) nuxt.js의 경우는 1-->2로 접근이 가능하게 설계가 가능한 구조인가요? 실무에서 많이 접하게 될 환경인데 개념이 부족해서  nuxt.js에서 개발이 가능한지 궁금합니다. 감사합니다.

제로초(조현영) · Answer

1003:/api로 요청가는게 프록시입니다. 그럼 알아서 다시 proxy설정에 적어준 주소로 요청이 전달돼요. proxy 설정을 어떻게 하셨나요.

Sun.ahn · Answer

*호출   this.$axios.get(`/feach`) *nuxt.config.js axios: {     baseURL: process.env.NODE_ENV === 'production' ? 'https://api.nodebird.com/api' : 'http://localhost:1003/api',   }, 이렇게 바꿔서 호출해도 http://localhost:1003/api... 으로 request가 갑니다. proxy가 안타는것 같습니다. 혹시 다른 설정도 필요하나요? 계속 문의를 드려서 죄송스럽습니다. ㅜㅜ

제로초(조현영) · Answer

프록시를 적용하면 요청을 모두 localhost:포트/api로 보내셔야 합니다. 그러면 이 프론트서버에서 백엔드주소로 대신 요청을 보내줍니다.

Sun.ahn · Answer

안녕하세요. 강사님 도움으로 프로토타입 프로젝트를 진행하고 있습니다. proxy관련하여 다시 문의 드립니다. 아래처럼 nuxt.config.js 를 수정하였습니다. api를 호출하면  http://api.dev.com/api/....... 처럼 axios만 타고 proxy는 적용이 안되고 있습니다. 혹시 제가 놓치고 있는 부분은 무엇일까요? 도움 부탁드립니다. 감사합니다. --nuxt.config.js--   modules: [     '@nuxtjs/axios',     '@nuxtjs/proxy',   ],   axios: {     baseURL: process.env.NODE_ENV === 'production' ? 'https://api.nodebird.com/api' : 'http://api.dev.com/api',   },   proxy: {     // Simple proxy     '/api': 'http://proxy.com',   },

제로초(조현영) · Answer

제가 알려드린 proxy-module은 포워드 프록시입니다~

Sun.ahn · Answer

네~ 알겠습니다. 리버스 프로시쪽 참고 해보겠습니다.  답변 감사합니다.

제로초(조현영) · Answer

강의에서는 안 다룹니다. 정직하게 백엔드로 보냅니다. 다만 https를 할 때는 리버스 프록시를 쓰긴 합니다.

Sun.ahn · Answer

오~!!! 답변 감사합니다.^^ 한가지 더 여쭤보자면 혹시 저희 강의에서 proxy를 다루게 될까요?

제로초(조현영) · Answer

생각하고계신 개념이 맞습니다. 그렇다면 브라우저->1->2 이렇게 요청이 가게 햐야하는데 이 때 nuxt proxy 패키지가 있습니다. https://github.com/nuxt-community/proxy-module#readme nuxt.config.js에 설정하신 뒤 브라우저에서는 모두 프론트서버를 가리키게(1번 서버) 요청 주소를 바꿔주세요.