https 도메인의 proxy에 대해 문의 드립니다.

nginx 에 설정은 추가 하였습니다. express에 추가하라고 말씀하신 코드는 소스 어느 부분에 추가 해야하는건가요? /server/index.js에 파일 만들어서 추가해야할까요? 강의 후반부에 보면 배포할때 server.js 파일 참고해서 해보았는데 proxy가 안되는것 같아 여쭤봅니다.

https 도메인의 proxy에 대해 문의 드립니다.

답변 감사합니다. proxy 처리 하기위해 아래 소스 처럼 작성해서 테스트 서버 환경에서 접속 되는건 확인 하였습니다. https://11.11.11.11/api/getData ---> http://192.168.1.11:1004/api/getData 백엔드 API서버(윈도우환경이어서 nginx 적용안됨)에서 로그도 확인했습니다. 제가 궁금한건 테스트 서버에서 npm run start로 테스트 했을때는 proxy가 잘 되었는데 스테이징 환경에 nginx가 앞단에 적용되니 안되기 때문에(nginx의 reverse proxy로 인한 꼬임?) nuxt 또는 nginx에 설정을 추가로 해줘야 하는지? 입니다. 테스트하는 소스는 cli로 만든 nuxt 프로젝트에 nuxtjs/axios, nuxtjs/proxy 만 설치된 심플한 상태입니다. (소스 보시고자 하면 메일로 드리겠습니다~) -----테스트 시나리오(성공)-------- A서버(서버환경) nuxt.js 1003port 백엔드 1004port B서버(사용자환경) B서버에서 브라우저에 192.168.1.11:1003 입력하여 사이트를 열고 테스트 api 호출시 API 데이터 조회 성공 A서버의 백엔드 로그를 조회하면 API 호출한 기록이 남아 있고 접속한 로그는 B서버 IP임. 즉 서버단 proxy로 잘 접속한걸로 보여짐. -----소스-------- index.vue this.$axios.get(`http://192.168.1.11:1003/api/getData`) nuxt.config.js proxy: { '/api': 'http://192.168.1.11:1004/', },

https 도메인의 proxy에 대해 문의 드립니다.

계속된 질문에 친절히 답변해 주셔서 감사합니다. 제가 이해를 못해서 그런지 헷갈려서 확인부탁드립니다. 브라우저(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 참고해서 수정한 상태입니다.

https 도메인의 proxy에 대해 문의 드립니다.

로그를 확인해보니 백엔드 API 서버에 접근하지 않은것 같습니다. 제 생각에는 nuxt.js에서 API가 호출되는 (출발)nginx --> node.js --> (도착)백엔드 API 흐름에서 1.API 호출 this.$axios.get(`https://11.11.11.11/api/getData`) 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 설정인것 같은데 소스 어느 부분에 적용해야하나요?

https 도메인의 proxy에 대해 문의 드립니다.

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

https 도메인의 proxy에 대해 문의 드립니다.

답변 감사합니다. 위 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로 찍어서 확인도 가능할까요?

proxy 문의 드립니다.

네~~ 도움 감사합니다^^

proxy 문의 드립니다.

특별히 localhost로 설정하지는 않았는데 this.$axios.get(`/api/acc/keys`) 이 부분에 IP지정을 안해서 그랬나 봅니다. /api 앞부분에 IP 넣으니 잘 됩니다. 답변 감사합니다.

Vue 개발시 외부 ES5 Script 적용 문의 드립니다.

네 맞습니다. 문의를 어렵게 적은것 같아 정리합니다. 두 질문은 protorype으로 작성된 함수(또는 function를 어떻게 export, import하여 사용하는지? 였습니다. ---export) script--- export function Crypto(){ this.a =''; this.b = 0 } Crypto.prototype.setInfo =funtion(n,x){.....} Crypto.prototype.encrypt=funtion(n){.....} .. .. -------import) vue------- import {Crypto} from '....'; var crypto = new Crypto(); crypto.setInfo("",""); crypto.encrypt(""); 이런식으로 사용이 가능해야 할것 같은데 오류가 발생하여 문의 드렸습니다. 감사합니다.

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

*호출 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가 안타는것 같습니다. 혹시 다른 설정도 필요하나요? 계속 문의를 드려서 죄송스럽습니다. ㅜㅜ