Vue.js 프로젝트에서 API와의 연동을 설정하는 vue.config.js
파일에 대해 코드를 분석해보려 합니다.
vue.config.js
파일을 사용하여 개발 서버에서의 프록시 설정을 통해 API서버와의 통신을 가능하게 할 수 있습니다.
아래의 코드는 API 서버가 http://localhost:1004
에서 실행중일 때 Vue.js 프론트엔드 프로젝트와 API 서버를 연동하는 코드입니다.
const version = '0.0.1';
module.exports = {
devServer: {
hot: true,
disableHostCheck: true,
https: false,
proxy: {
'^/': {
target: 'http://localhost:1004',
ws: true,
changeOrigin: true
}
},
},
chainWebpack: config => {
config.output
.filename(`js/[name].${version}.js`)
.chunkFilename(`js/[name].${version}.js`)
},
outputDir: 'dist',
pages: {
index: {
entry: 'src/main.js',
template: 'public/index.html',
filename: 'index.html',
title: 'Index Page',
chunks: ['chunk-bisz', 'chunk-bi', 'index']
},
// subpage: 'src/subpage/main.js'
}
};
devServer
: 개발 서버 관련 설정을 지정합니다.hot
: 핫 모듈 리로딩을 활성화합니다.disableHostCheck
: 호스트 체크를 비활성화합니다. ( 보안에 관련된 설정 )https
: HTTPS를 사용하지 않도록 설정합니다.proxy
: 프록시 설정을 통해 API 서버와의 연동을 가능하게 합니다./
경로로 시작하면 http://localhost:1004
주소로 프록시됩니다.ws:true
과 오리진 변경 chainOrigin : true
을 지원하도록 설정되어 있습니다.웹팹 설정 수정 chainWebPack
: 웹팩 설정을 수정하여 번들된 자원들의 파일명을 버전을 포함한 형태로 변경합니다.
빌드 출력 설정 outputDir
: 빌드 결과물이 생성될 디렉토리를 지정합니다.
페이지 설정 pages
: Vue.js 앱의 페이지 설정을 정의합니다.
현재 index
페이지가 정의되어 있으며, 해당 페이지의 엔트리 포인트, 템플릿 파일, 출력 파일명 등을 설정할 수 있습니다.
위 코드에서 API와의 연동은 proxy
설정을 통해 이루어지며, /
경로로 들어오는 모든 요청은 http://localhost:1004
주소로 프록시되어 해당 포트의 API 서버와 통신하게 됩니다.
웹소켓을 사용하는 경우 ws : ture
에도 정상적으로 프로시될 것입니다.
API 서버가 포트 1004 에서 실행 중이라면, 이 코드를 사용하여 Vue.js 프론트엔드와 해당 API 서버를 연동할 수 있습니다.