[Vue] devServer 구성하고 proxy 설정하기

로컬에서 실행시킬 때 간혹 안 돌아갈 때가 있었다. (400번대 에러)

그럴 때마다 항상 요청하는 url로 잘 날아가고 있는지, 클라이언트와 서버 사이의 연결이 잘 설정되어있는지 확인해야한다.

vue.config.js는 Webpack 설정을 확장하거나 사용자 정의하는 데 사용되는 구성 파일이다.

🔔 vue.config.js가 필요한 경우 

- 기본 설정을 넘어 프로젝트에 특정 요구사항이 있을 때
- 개발 서버 설정을 변경하거나 webpack 플러그인을 추가할 때
- API 프록시를 설정하거나 외부 CSS/JS 라이브러리를 추가할 때 

위와 같이 해당 파일을 통해 기본적인 설정을 변경하거나 새로운 기능을 추가할 수 있다. 

이 파일에서 설정할 수 있는 옵션들은 다음과 같다. 

 

 

🔹 주요 설정 옵션들 

• publicPath 
  • 앱이 배포될 기본 URL 경로 지정 👉 해당 경로로 호스팅됨

module.exports = {
  publicPath: '/my-app/'
};

• outputDir
  • 빌드된 파일이 저장될 디렉토리 설정

module.exports = {
  outputDir: 'dist'
};

• assetsDir
  
  • static resource가 저장될 디렉토리 설정

module.exports = {
  assetsDir: 'static'
};

• devServer
  • 개발 서버 설정 정의

module.exports = {
  devServer: {
    port: 8080, // 개발 서버 포트
    proxy: 'http://backend.example.com' // API 프록시 설정
  }
};

• lintOnSave
  • 개발 중 lint 오류 처리 방법 설정

module.exports = {
  lintOnSave: false // ESLint 오류 무시
};

• configureWebpack
  • Webpack 설정 추가 혹은 수정

module.exports = {
  configureWebpack: {
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  }
};

• productionSourceMap
  • 배포 시 소스 맵 생성 여부 결정

module.exports = {
  productionSourceMap: false
};

 

 

개발 서버 구성 및 프록시 설정

devServer: {
		host: 'localhost',
		port: 8081,
		proxy: {
			'^/sys': {
				target: 'http://localhost:9320',
				changeOrigin: true,
				logLevel: 'debug',
			},
			'ws://localhost:8080/*': {
				// WebSocket 프록시 설정
				target: 'ws://localhost:8080',
				ws: true, // WebSocket 프록시 활성화
			},
			'^/abcapi': {
				//target: 'https://dev-api.abc.com',
				target: 'http://localhost:8989',
				pathRewrite: { '^/abcapi': '/' },
				changeOrigin: true,
				logLevel: 'debug',
			},
			'^/fileapi': {
				target: 'https://dev-file.abc.com',
				pathRewrite: { '^/fileapi': '/' },
				changeOrigin: true,
				logLevel: 'debug',
			},
		},
	},

 

 

• proxy 객체 : 특정 유형의 HTTP 요청을 다른 백엔드 서버로 리다이렉트 👉 CORS 문제 처리 
  • `/sys`, `/abcapi`, `/fileapi` 로 시작하는 요청을 해당하는 target으로 프록시됨
  • changeOrigin : 호스트 헤더의 출처를 대상 URL로 변경하여 CORS 문제 해결 👉 cross origin 허용
  • pathRewrite : 해당하는 경로로 바꾸기