[Web] Nginx & Vue Proxy 연결하기

Node와 동일한 방법으로 진행하였으나, 연동이 되지 않아 방법을 바꾸어 진행하였습니다.

 

먼저 Nginx 쪽 코드 

다음과 같이 원하는 location을 지정합니다. 

그리고 proxy_pass 쪽에도 동일한 값을 입력해줍니다.

 

다음은 이제 Vue 쪽 config 파일을 수정합니다. 

만약 Vue쪽에 config 파일이 없다면, root 경로에 vue.config.js를 만들어 줍니다.

[vue.config.js 파일을 만드는 경우라면 반드시 root 경로인지 확인해주세요. 다른 경로에 작성 시 동작하지 않을 수 있습니다.]

다음 vue.config.js 파일은 아래와 같이 작성해줍니다.

 

module.exports = {
    // options...
    publicPath: process.env.NODE_ENV === 'production'
        ? '/frontend/' // run npm build 사용할 public path
        : '/frontend/', // run npm serve 시 사용할 pubilc path
    devServer: {
        disableHostCheck: true
    }
}

publicPath: process.env.NODE_ENV === 'production'? '/builid 시 /': '/serve 시/'

 

3항 연사자로 구분해줍니다. 

해당 부분의 경우 궁금하신 분들의 경우 3항 연산자를 확인해보시면 좋을 것 같습니다.

 

https://codevang.tistory.com/40

삼항연산자(3항연산자) 사용법 (if문 대체)

 

Vue 설정 관련한 공홈 페이지의 설명

https://cli.vuejs.org/config/#publicpath

Configuration Reference | Vue CLI