react에서 vite로 env 설정해서 proxy 사용하기 (+CRA에서 proxy 설정)

 

매번 CRA(create-react-app)으로만 프로젝트를 설정하다가 이번에는 vite로 진행해보았다.

CRA에서 proxy 설정

CRA는 proxy를 설정하기 위해 "http-proxy-middleware" 라이브러리를 별도로 설치하여 진행했다.

npm install http-proxy-middleware

//setupProxy.js
const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function (app) {
  app.use(
    "/api",
    createProxyMiddleware({
      target: process.env.REACT_APP_SERVER,
      changeOrigin: true,
    })
  );
};

 

vite에서 proxy 설정

반면 vite는 자체적으로  proxy를 지원한다. 

https://ko.vitejs.dev/config/server-options.html#server-proxy

Vite

vite.config.ts 파일에서 다음과 같이 설정해준다.

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

// https://vitejs.dev/config/
export default ({ mode }) => {
  // .env 파일에서 환경 변수 로드
  const env = loadEnv(mode, process.cwd(), '')

  return defineConfig({
    plugins: [react()],
    server: {
      proxy: {
        '/api': {
          target: env.VITE_API_URL, // 환경 변수 값 사용
          changeOrigin: true,
        },
      },
    },
    // 환경 변수를 사용하는 다른 설정들도 여기에 추가할 수 있습니다.
  })
}

target에 도메인을 바로 적어도 되지만 env에 있는 값을 가져오기 위해서 loadEnv를 import 해야된다.

( 이 부분에서 시간을 많이 뺏겼는데... config에서 env를 가져올때 import.meta.VITE_API_URL로는 조회가 안된다... )

 

mode는 지금 개발상태인지 배포상태인지를 체크해 env.development 또는 env.production 을 가져온다.

console.log를 찍어보며 어떤 데이터가 들어있는지 직접 확인하는게 좋다.

vite에서 env 확인하기

vite에서 env값을 사용하는 방법이 CRA랑 살짝 다르다.

CRA로 진행할때는 .env.dev 도 가능했는데 vite는 그렇게 하면 못 가져오고 .env.develoment 이렇게 적어줘야 한다. 

//VITE_API_URL ="주소" 이렇게 앞에 VITE라는 수식어가 붙어야 가져올 수 있다.

console.log(import.meta.env.VITE_SOME_KEY) // "123" //컴포넌트에서 가져올때

 

더 자세한 env 설정은 여기서 참고하자

https://ko.vitejs.dev/guide/env-and-mode.html#node-env-and-modes

Vite