Create React App / Vite 프록시 설정

netlify serveless(functions)를 사용할 때 키를 감추기 위해 프록시 사용
CRA로 설계했다가 Vite로 마이그레이션하는 과정 중에 설정하는 법 정리

Create React App (CRA)

src 폴더 내 setupProxy.js 생성

const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function (app) {
  app.use(
    "/.netlify/functions",
    createProxyMiddleware({
      target: "http://localhost:9999",
      changeOrigin: true,
    })
  );
};

Vite

vite.config.js 파일에서 server -> proxy 내부에 설정 적용

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

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000, // FE 포트 변경 / 기본은 5173
    // 프록시 설정
    proxy: {
      "/.netlify": {
        // 요청 전달 대상 서버 주소 설정
        target: "http://localhost:9999",
        changeOrigin: true,
      },
  },
});