[Vite] vite.config.js 설정 (proxy, console제거)

Vite는 최신 프론트엔드 개발을 위한 빠르고 효율적인 빌드 도구이다.

개발할 때는 콘솔 로그가 디버깅에 유용하지만, 프로덕션 배포 시에는 이러한 로그를 제거해야 하는 경우가 생긴다. 이와 개발 중에 API 요청을 프록시하여 CORS 문제를 해결하는 것을 모두 vite.config.js를 통해 두가지 기능을 쉽게 구현할 수 있다.

 

1. proxy설정

import { defineConfig, loadEnv } from 'vite';
import react from '@vitejs/plugin-react-swc';

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '');
  return {
    plugins: [react()],
    server: {
      // 프록시 설정
      proxy: {
        '/api': {
          target: env.VITE_SERVER_ADDRESS,
          changeOrigin: true,
        },
      },
    },
  };
});

 

import { defineConfig, loadEnv } from 'vite';

loadEnv 함수를 사용하면 .env 파일에서 환경 변수를 로드할 수 있다.

 

const env = loadEnv(mode, process.cwd(), '');

여기서 mode는 현재 실행 모드(개발, 프로덕션 등)를 나타내며, process.cwd()는 현재 작업 디렉토리를 나타낸다.

 

server: {
  proxy: {
    '/api': {
      target: env.VITE_SERVER_ADDRESS,
    },
  },
},

 

이 설정은 개발 서버에서 /api로 시작하는 모든 요청을 env.VITE_SERVER_ADDRESS로 프록시한다.이렇게 하면 프론트엔드 개발 중에 백엔드 API와 통신할 때 CORS(교차 출처 리소스 공유) 문제를 해결할 수 있다.

• /api: 프록시할 경로 패턴을 지정
• target: 요청을 전달할 서버의 기본 URL입니다. 환경 변수 VITE_SERVER_ADDRESS에서 값을 가져옴

server: {
  proxy: {
    '/api': {
      target: 'https://api.example.com',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api/, '')
    },
  },
},

추가적으로 사용할 수 있을만한 옵션으로는 changeOrigin과 rewirte옵션이 있다.
changeOrigin 옵션이 없는 경우 요청이 실패할 수 있다.

 

많은 서버는 요청의 Host헤더를 확인하여 유효한 요청인지 판단하는데,
changeOrigin: false인 경우 대상 서버는 Host: localhost:5173 헤더를 가진 요청을 받는다.

하지만 changeOrigin: true인 경우 대상 서버는 Host: api.example.com 헤더를 가진 요청을 받게 된다. 대부분의 API서버는 자신의 호스트 이름이 포함된 요청을 허용하기 때문에 true로 설정하는 것이 좋을 수 있다.

 

 

백엔드에서 발생하는 CORS문제도

rewrite 함수가 없으면, 요청은 https://api.example.com/api/users로 전달한다.

rewrite: (path) => path.replace(/^\/api/, '')

하지만 이처럼 되어있는 경우, https://api.example.com/users로 전달하게 된다.
말 그대로 rewite, 다시 작성하는 의미로 rewrite함수는 원래 요청 경로를 다시 써서 다른 경로로 변환하는 것이다.
프론트엔드에서 사용하는 API 경로 구조가 백엔드의 실제 경로 구조와 다를 때 특히 유용할 수 있다.

 

이해를 위해 추가 예시를 활용하면,

rewrite: (path) => path.replace(/^\/api\/v1/, '/v2')

프론트엔드는 /api/v1/users로 요청하지만, 백엔드에서는 /v2/users 엔드포인트로 전달되는 것이다.

2. console.log 및 debugger문 제거

실제 개발 중에는 console.log()와 dubugger는 필수적으로 필요하다.
하지만 배포 시에 일일이 찾아서 지우는 것도 번거로운 일일뿐더러, 해당 console.log를 지우면서 "chore: console 제거"와 같이 커밋하는 것도 좋은 방향은 아니다.

 

이런 이슈를 vite.config.js로 쉽게 해결할 수 있다.

 

build: {
  minify: 'terser',
  terserOptions: {
    compress: {
      drop_console: true,
      drop_debugger: true
    }
  }
},

 

이 설정은 프로덕션 빌드 시 Terser를 사용하여 코드를 최소화하고, 모든 console.* 호출과 debugger 문을 제거한다.

 

• minify: 'terser': Vite가 코드 최소화에 Terser를 사용하도록 지정
• terserOptions: Terser 관련 옵션을 설정
• compress: 코드 압축 관련 옵션을 설정
• drop_console: true: 모든 console.* 호출(console.log, console.warn, console.error 등)을 제거
• drop_debugger: true: 모든 debugger 문을 제거

주의사항: Terser 설치

Vite 3 이상 버전에서는 Terser가 선택적 의존성(optional dependency)으로 변경됨으로써 설치가 필요하다.

[Vite] terser not found 오류