[Vue.js] API 연동 - vue.config.js

vue.config.js

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'
  }
};

1. 개발 서버 설정 devServer : 개발 서버 관련 설정을 지정합니다.
   아래와 같은 옵션들을 설정합니다.

• hot : 핫 모듈 리로딩을 활성화합니다.
• disableHostCheck : 호스트 체크를 비활성화합니다. ( 보안에 관련된 설정 )
• https : HTTPS를 사용하지 않도록 설정합니다.
• proxy : 프록시 설정을 통해 API 서버와의 연동을 가능하게 합니다.
  현재 모든 요청이 / 경로로 시작하면 http://localhost:1004 주소로 프록시됩니다.
  이 때, 웹소켓 ws:true 과 오리진 변경 chainOrigin : true 을 지원하도록 설정되어 있습니다.

2. 웹팹 설정 수정 chainWebPack : 웹팩 설정을 수정하여 번들된 자원들의 파일명을 버전을 포함한 형태로 변경합니다.

3. 빌드 출력 설정 outputDir : 빌드 결과물이 생성될 디렉토리를 지정합니다.

4. 페이지 설정 pages : Vue.js 앱의 페이지 설정을 정의합니다.
   현재 index 페이지가 정의되어 있으며, 해당 페이지의 엔트리 포인트, 템플릿 파일, 출력 파일명 등을 설정할 수 있습니다.

위 코드에서 API와의 연동은 proxy 설정을 통해 이루어지며, / 경로로 들어오는 모든 요청은 http://localhost:1004 주소로 프록시되어 해당 포트의 API 서버와 통신하게 됩니다.

웹소켓을 사용하는 경우 ws : ture 에도 정상적으로 프로시될 것입니다.

API 서버가 포트 1004 에서 실행 중이라면, 이 코드를 사용하여 Vue.js 프론트엔드와 해당 API 서버를 연동할 수 있습니다.