[React.js] vite.config.js에서 env사용하기

 

1. 문제 상황

 

vite.config.js에서 proxy를 설정하는 과정에서 그대로 URL를 작성하는 경우에 env처리를 하지 않다면, 그대로 서버 주소가 노출될 수 있다.

 

env환경을 사용하면서, .env파일을 통해

VITE_SERVER_URL="*****"
VITE_NAVER_MAP_API_KEY="*****"

위처럼 사용만 해봤었지만, 이번엔 vite.config.js파일과 .env파일을 모두 사용해보려고 한다.

그렇기에 env환경변수를 사용하여 

 

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

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/auth': {
        target:import.meta.env.VITE_SERVER_URL,
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/auth/, ''),
      },
      '/api': {
        target:import.meta.env.VITE_SERVER_URL, 
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
});

 

이처럼 작성하였는데, 오류가 발생하였다.

React Vite환경에서  import.meta.env. 방식은 vite.config.js에서 사용할 수 없었다.

 

 

 

 

그렇다면 어떻게 해야할까?

 

검색을 통해 process를 사용하여 해결하는 방법을 찾게 되었다. 

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

export default defineConfig(({ mode }) => {

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

  return {
    plugins: [react()],
    server: {
      proxy: {
        '/auth': {
          target: `${env.VITE_SERVER_URL}:8080`,
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/auth/, ''),
        },
        '/api': {
          target: `${env.VITE_SERVER_URL}:8080`, // 환경 변수 사용
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, ''),
        },
      },
    },
  };
});

 

process를 불러와서 사용하려 했지만, 이상하게 나만 process에서 오류가 발생하였다.

 

process를 찾을 수 없다는 오류였다.

 

????????

 

 

 

2. 해결방법

 

 

해결의 keyPoint는 .eslintrc.cjs에 존재했다.

  env: { browser: true, es2020: true} 설정에 node가 추가되어있지 않아 오류가 발생했던 것이다. 

process는 node환경에서 작동하는데, node옵션이 존재하지 않으니 오류가 발생할 수밖에 없던 것이다.

 

그렇게 .eslintrc.cjs 파일 env옵션에 node:true를 추가해주고 해결되었다. 

 

 

//.eslintrc.cjs
module.exports = {
  root: true,
  env: { browser: true, es2020: true, node: true },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:react/jsx-runtime',
    'plugin:react-hooks/recommended',
  ],
  ignorePatterns: ['dist', '.eslintrc.cjs'],
  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
  settings: { react: { version: '18.2' } },
  plugins: ['react-refresh'],
  rules: {
    'react/jsx-no-target-blank': 'off',
    'react-refresh/only-export-components': [
      'warn',
      { allowConstantExport: true },
    ],
    'no-unused-vars': 'off',
    'react/prop-types': 'off',
  },
};

 

//vite.config.js
import { defineConfig, loadEnv } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig(({ mode }) => {

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

  return {
    plugins: [react()],
    server: {
      proxy: {
        '/auth': {
          target: `${env.VITE_SERVER_URL}:8080`,
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/auth/, ''),
        },
        '/api': {
          target: `${env.VITE_SERVER_URL}:8080`, // 환경 변수 사용
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, ''),
        },
      },
    },
  };
});