인프런 커뮤니티 질문&답변

지나가다가 들렸습니다.^^

api proxy 셋팅하는곳을

개발시 :  nuxt.js 셋팅

배포시 : nginx 셋팅

이렇게 나눠서 하던가

아니면 nginx 한곳에다만 하던가 정해야하지 않을까요?

모든 클라이언트 컴퓨터에서 페이지 호출시 많은 api를 호출하게 되는데

이것들이 모두 nuxt.js(node server) 통한다면 문제가 생기지 않을까요?

(특히 msa방법론으로 개발시 api를 더많이 호출하거든요)

nginx가 nuxt.js 연결다리 역할만하기에는 너무 일을 안하는거 같아요.

백엔드 express에 추가하셔야 합니다. 리액트 강좌버전 코드이긴 한데 28번째줄부터 58번째줄까지 보시면 됩니다.

https://github.com/ZeroCho/react-nodebird/blob/master/https/back/app.js

nginx 에 설정은 추가 하였습니다.

express에 추가하라고 말씀하신 코드는

소스 어느 부분에 추가 해야하는건가요?

/server/index.js에 파일 만들어서 추가해야할까요?

강의 후반부에 보면 배포할때 server.js 파일 참고해서 해보았는데 proxy가 안되는것 같아 여쭤봅니다.

네 남은 것은 nginx 설정 문제인 것 같습니다.

location 부분에

proxy_set_header x-forwarded-for $scheme;

한 줄 넣어주시고 nginx 재시작 해주시면 되고요.

express에서도

app.set('trust proxy', 1)을 production 환경일 때만 적용되게 넣어주시고

app.use(session({
  resave: false,
  saveUninitialized: false,
  proxy: true,
  cookie: { ... }
}))

이렇게 넣어주시면 됩니다.

답변 감사합니다.

proxy 처리 하기위해 아래 소스 처럼 작성해서 테스트 서버 환경에서 접속 되는건 확인 하였습니다.

백엔드 API에는 nginx를 적용하지 않으신건가요?

api 서버 주소가 192.168.1.11:1004/api/getData라고 하셨는데

proxy 설정을 /api: http://192.168.1.11:1004라고 하셨으니

https://11.11.11.11/api/getdata가 192.168.1.11:1004/getData로 갑니다.

192.168.1.11에서는 /api가 사라집니다

/api: http://192.168.1.11:1004/api를 원하시는 것 아닐까요?

계속된 질문에 친절히 답변해 주셔서 감사합니다.

제가 이해를 못해서 그런지 헷갈려서 확인부탁드립니다.

브라우저(axios) https://11.11.11.11/api/getdata => nginx(11.11.11.11) nginx proxy로 => nuxt.js(0.0.0.0:3000)  => nuxt.js proxy로 192.168.1.11:1004/api/getData 다시 요청 => 백엔드 API (192.168.1.11) 호출

이렇게 될꺼라 생각 했는데요.

제가 생각한 흐름과 강사님이 위에 적어주신 내용과 상이합니다. 

제가 잘못 이해하고 있는걸까요? 위에서 백엔드 노드(0.0.0.0)이라고 하셨는데  백엔드 API는 0.0.0.0 아니라 192.168.1.11:1004 입니다.

서버 정보는 아래와 같습니다.

1.프론트

-웹서버( nginx) : 11.11.11.11 (https://11.11.11.11/api/getdata)

-nuxt.js express server : 0.0.0.0:3000

2.백엔드

-api서버 : 192.168.1.11:1004/api/getData

3.nuxt.config.js 의 proxy : '/api': 'http://192.168.1.11:1004/',

nginx conf는 말씀을 참고+ nuxtjs.org document 참고해서 수정한 상태입니다.

axios로 브라우저에서 11.11.11.11/api/getData로  요청을 보내면

11.11.11.11은 nuxt프론트서버 주소이므로 프론트 서버로 요청이 가겠죠?

거기서 proxy 설정으로 192.168.1.11:1004/getData로 다시 요청을 보내게 되어있습니다.

이 때 192.168.1.11:1004가 nginx가 열어둔 것이 맞죠? 그렇다면 nginx log에도 /getData로 요청이 온 것이 기록이 되어있을 것입니다.

192.168.1.11:1004/getData에서 nginx가 다시 reverse proxy로 0.0.0.0:3000/getData로 노드서버에 요청을 보내줄 것인데요. 요청이 갔다면 pm2 log에 기록이 될 것입니다.

브라우저(axios) => nuxt(프론트서버, 11.11.11.11) => proxy 통해서 nginx(192.168.1.11)로 => reverse proxy 통해서 백엔드 노드(0.0.0.0)

어디서 요청이 기록이 안 되었는지 보시면 되고요. nginx까지는 왔는데 백엔드 노드로 오지 않았다면 proxy 관련 설정 문제일 가능성이 큽니다. 그리고 /getData 이 뒷부분 주소도 맞는지 확인해보세요. /api/getData였다가 /getData였다가 혹시 nginx location에서 다른걸로 또 바뀌지는 않나요?

로그를 확인해보니 백엔드 API 서버에 접근하지 않은것 같습니다. 

제 생각에는 nuxt.js에서  API가 호출되는 (출발)nginx --> node.js --> (도착)백엔드 API 흐름에서

1.API 호출

2.node.js

http://0.0.0.0:3000

의 흐름에서 nginx 리버스 프록시로 인해 nuxt.js proxy와 충돌(?)이 생기는건 아닐지요?

그리고 위에서 말씀주신 express(app.set('trust proxy', 1)와 express-session(proxy: true) 부분은 node.js 설정인것 같은데

소스 어느 부분에 적용해야하나요?

404 응답 코드를 nginx가 보내는 것인지 아니면 백엔드 서버가 보내는 것인지 확인해보셔야 합니다. 백엔드 서버라면 morgan 등을 통해 pm2 logs에 기록이 될 것입니다.

nginx를 빼면 해결이 될 것 같기는 한데 실무에서 쓰시려면 nginx를 빼는 것보다는 nginx에서 설정을 통해 해결하시는 것을 추천드립니다.

express(app.set('trust proxy', 1)와 express-session(proxy: true)에서 proxy 설정을 해야 하고, nginx 설정에서도 proxy_set_header x-forwarded-for $scheme를 추가해서 헤더들을 넘겨주셔야 합니다.

404 에러가 발생합니다.

아래 내용은 개발자 도구에서 확인 한 내용입니다.

소스에는 이상이 없을 것 같습니다.

같은 소스를 다른 테스트 서버(windows)에 올리고

build/start로 실행하여 테스트 하면 원하는 결과가 나옵니다.

질문

1. 아래 전송결과를 통해 오류 확인 가능할까요?

2. nginx를 빼고 node.js로만 운영하면 문제가 없을까요?

감사합니다.

----전송결과----

Genaeral

Request URL: https://11.11.11.11/api/getData

Request Method: GET

Status Code: 404 

Remote Address: 11.11.11.11:443

Referrer Policy: no-referrer-when-downgrade

Response Headers

accept-ranges: none

content-type: text/html; charset=utf-8

date: Thu, 03 Sep 2020 09:03:16 GMT

server: nginx

status: 404

vary: Accept-Encoding

via: 1.1 google

Request Headers

:authority: 11.11.11.11

:method: GET

:path: /api/getData

:scheme: https

accept: application/json, text/plain, */*

accept-encoding: gzip, deflate, br

accept-language: ko

cache-control: no-cache

pragma: no-cache

referer: https://11.11.11.11/

sec-fetch-dest: empty

sec-fetch-mode: cors

sec-fetch-site: same-origin

user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.83 Safari/537.36

네 nuxt 서버가 proxy 작업을 처리해줍니다. ip같은 것 확인해보시면 로깅도 가능할 것 같긴 한데 11.11.11.11 -> 192.168.1.11으로 변환하는 작업은 nuxt에 로깅하는 옵션이 없다면 로깅하기 힘들 것 같습니다.

참고로 nginx를 앞단에 두면 리버스 프록시 시에 쿠키들이 전달되지 않는 문제가 발생할 수 있습니다.

답변 감사합니다.

위 IP는 샘플로 작성한 것입니다.

서버간의 통신이 성공된건 체크했습니다.

그렇다면 위 코드 상으로는 되어야한다고 이해하면 되겠네요..

제가 아는범위에서 유추하면

nuxt/proxy를 적용후 API를 위와 같이 호출하게 된다면

API URL 11.11.11.11 --->192.168.1.11:1004 로  URL을 변경하여 API를 호출하게되고

API서버에서는 사용자 IP가 아닌 서버 IP(11.11.11.11)로 hostaddress가 확인됩니다.

이 proxy 작업은  node.js 서버단 에서 처리해 주는 건가요?

그렇다면 proxy 처리가 되는 과정들을 서버에서 log로 찍어서 확인도 가능할까요?

http://192.168.1.11:1004

이 주소는 api 서버의 외부 주소가 아닙니다. 내부 IP로 보입니다. 외부 IP를 적으시면 될 것 같습니다.