Vite 환경 변수로 Proxy 설정하기

이번 포스트에서는 Vite의 Proxy 설정을 환경변수를 활용해 적용하는 과정을 보여드리겠습니다.

 

왜 Proxy 설정을 해야 함?

가장 중요한 이유는 cors 에러를 해결하기 위해서이다.

cors란?

Cross-Origin Resource Sharing의 준말로 현재 웹 페이지의 경로와 다른 출처(도메인, 프로토콜, 포트)에서 자원을 가져오는 것을 말한다.

 

기본적으로는 동일한 출처에서 가져오는 리소스만 허용한다.

왜 그럴까?

보안의 문제가 있을 수 있기 때문이다. 외부에서 리소스를 가져오는 것 을 허용하면 해커가 심어놓은 코드로 인해 사용자가 모르는 웹 페이지로 사용자의 개인 정보가 넘어가는 문제가 발생할 수 있다.

따라서 이런 위험을 방지하기 위해 기본적으로 동일한 출처에서만 리소스를 가져올 수 있게 제한하고 있다.

 

왜 외부에서 리소스를 가져와?

동일한 출처에서 리소스를 가져올 수 있다면 좋겠지만 우리는 보통 api 서버와 클러이언트 서버를 가지게 된다. 따라서 api와 클라이언트의 출처 (보통 도메인 또는 포트)가 다를 가능성이 높다.

 

이때문에 우리는 외부 출처를 허용하기 위한 설정을 해줘야 한다.

Proxy 설정하기

일단 아래의 공식문서를 읽어보면 proxy 설정하는 방법을 알 수 있다.

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

Vite

핀더펜의 경우 당연히 해당 코드를 적용해 proxy 설정을 해줬다.

// vite.config.ts
server: {
	proxy: {
    	"/local": {
        	target: "http://localhost:8080",
			changeOrigin: true,
			rewrite: (path) => path.replace(/^\/local/, ""),
		},
        "/api": {
        	target: "https://server.domain",
			changeOrigin: true,
			rewrite: (path) => path.replace(/^\/local/, ""),
		},
	},
}

// url.ts
export const DOMAIN = process.env.NODE_ENV === "production" ? "/api" : "/local";

그래서 위와 같이 domain을 정의해서 프로덕트에서는 실제 서버로 연결하고, 로컬에서는 특정 경로를 추가하도록 구현했다.

const fetchSignIn = async (credentials: SignIn) => {
  return fetch(`${DOMAIN}/sign-in`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(credentials),
  });
};

 

그렇다면 왜 다시 proxy 설정을 건들이는 것일까?

 

왜냐면 우리에게는 개발 서버와 실제 프로덕트 서버가 있고, 각각 다른 페이지를 배포해야하기 때문이다. 한 번에 다른 페이지를 배포하기 위해서는 환경변수를 활용해 api url을 관리해야 했다.

 

환경 변수 적용

설정 파일에서 환경변수를 사용할 때에는 import.meta.VITE_를 사용할 수 없다.

대신 loadenv라는 vite에서 제공하는 메서드를 사용해야 한다.

https://ko.vite.dev/config/#using-environment-variables-in-config

Vite

코드

import { defineConfig, loadEnv } from "vite";
import react from "@vitejs/plugin-react";
import tsconfigPaths from "vite-tsconfig-paths";

// https://vitejs.dev/config/
export default ({ mode }) => {
  const env = loadEnv(mode, process.cwd(), "");

  return defineConfig({
    plugins: [react(), tsconfigPaths()],
    css: {},
    base: "/",
    server: {
      proxy: {
        "/server-api": {
          target: env.VITE_LOCAL_DOMAIN,
          changeOrigin: true,
          secure: false,
          rewrite: (path) => path.replace(/^\/server-api/, ""),
        },
      },
    },
    build: {
      ...
    },
  });
};

 

이렇게 작성하면 환경변수에 정의한 domain 주소를 가져올 수 있다.

환경변수를 적용하는 김에 dev와 product를 구분하던 url도 환경변수로 관리하기로 했다. 따라서 하나의 프록시 설정만으로도 정의할 수 있게 됐다.

export const DOMAIN = "server-api";

도메인 정의는 요렇게 바꿨다.