vs code + spring boot + vue.js 설치 가이드 (3) - 프록시 설정

개요

왜 프록시 설정을 해야하는지 References 1. 을 읽어보고 알게되었다. 그전에는 이해를 못해서 기본적인 설치만 했었다.

운영일 때는 어떻게 해야할지 또 찾아봐야겠지만 일단 개발이니까 설정을 해보고, 확인하는 내용까지 진행하려고 한다.

진행하는 중에 서버에서 응답을 받아보는 내용이 있었기에 시작하게 되었다.

 

프록시 설정

 

npm 으로 필요한 모듈을 설치한다.

frontend 폴더 내에서 진행한다!  (필자의 경우 폴더 경로 중에 띄어쓰기가 있으니 package.json을 제대로 찾지 못하였다. 그리고 refer에서도 해당 폴더 내에서 진행하라고 했다.)

npm install request
npm install path

 

포트번호를 재설정한다.

vue : 8090

module.exports = {
    outputDir: "../main/resources/static",
    indexPath: "../static/index.html",
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:8090',
                ws: true,
                changeOrigin: true
            }
        }
    }
}

spring: 8091

server.port = 8091

 

vue 쪽 포트 번호가 auto_increment 되서 좀 헤맸는데(npm install --save-dev portfinder@1.0.21) 그냥 킬 시켰다..

(References 2. ~ 7.)

포트확인

netstat -anvp tcp | awk 'NR<3 || /LISTEN/'

포트 킬

npx kill-port 3000

 

 

 

 

 

References

1. deockstory.tistory.com/26

Vue.js + Spring boot 개발 환경 및 빌드 환경 설정

2. stackoverflow.com/questions/39322089/node-js-port-3000-already-in-use-but-it-actually-isnt

Node.js Port 3000 already in use but it actually isn't?

3. stackoverflow.com/questions/47219819/how-to-change-port-number-in-vue-cli-project

How to change port number in vue-cli project

4. github.com/vuejs/vue-cli/issues/4452

'vue-cli-service serve --port' does not work as advertised · Issue #4452 · vuejs/vue-cli

5. github.com/mcheolpark/calendar-front/issues/1

npm run serve 실행시 port 번호 설정 안되는 현상 · Issue #1 · mcheolpark/calendar-front

6. github.com/vuejs/vue-cli/issues/36

The default port 8080 cannot work · Issue #36 · vuejs/vue-cli

7. apple.stackexchange.com/questions/117644/how-can-i-list-my-open-network-ports-with-netstat