CRA 와 VITE proxy, env 비교

그동안 CRA를 통해 리액트 프로젝트를 사용하다가, 조금 더 빠른 vite를 이용해 프로젝트를 만들기 시작하며 배우게 된 CRA에서의 env 및 proxy설정과 vite에서의 proxy설정을 비교 정리해봅니다.

env

1. .env작성

CRA에서는 루트경로에 .env파일을 만들어 REACT_APP_SERVICE_KEY=xxx과 같이 REACT_APP으로 시작하게금 작성을 해주었다면 vite프로젝트의 경우 VITE_SERVICE_KEY와 같이 VITE로 시작하게 작성해주어야합니다.

CRA

REACT_APP_SERVICE_KEY=xxx

VITE

VITE_SERVICE_KEY=xxx

2. 사용

설정된 env를 CRA프로젝트에서는 process.env.REACT~로 바로 가져와 사용했지만 vite프로젝트에서는 const { VITE_SERVICE_KEY } = import.meta.env로 불러와 사용을 할 수 있습니다.

CRA

serviceKey: process.env.REACT_APP_SERVICE_KEY,

VITE

const { VITE_SERVICE_KEY } = import.meta.env

serviceKey: VITE_SERVICE_KEY,

2. proxy

CRA프로젝트에서는 package.json에 명시해 사용을 했다면, vite프로젝트의 경우 vite.config.js파일에 명시를 해줘야합니다.

설정

CRA
package.json

...
  },
  "proxy": "https://apis.data.go.kr/",
}

VITE
vite.config.js

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': {
        target: 'https://apis.data.go.kr',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
        secure: false,
        ws: true,
      },
    },
  },
})

• /api 앞 부분인 origin을 target에 설정되어 있는 부분으로 바꿔준다는 것을 의미합니다.

사용

CRA

axios.get('B552584/ArpltnInforInqireSvc/getCtprvnRltmMesureDnsty')

VITE

axios.get('/api/B552584/ArpltnInforInqireSvc/getCtprvnRltmMesureDnsty')