[Proxy] Proxy 설정 (또 다른 방법!)

😄 팀 프로젝트를 진행하면서 백엔드 서버 연결 시 발생하는 CORS 문제를 Proxy 설정을 통해 해결한 적이 있다.
이전에 Vite에서 제공하는 자체적인 방식으로 환경 변수를 로드하는 loadEnv를 사용하여 Proxy 설정을 했었는데, Vite나 Next.js 등이 아닌 CRA와 같이 설정이 없는 환경에서는 어떻게 Proxy를 설정해야 할지 간단하게 소개하려고 한다. 
추가로 Vite, CRA 등 Proxy 설정 시, 어떻게 하면 더욱 편리하게 관리할 수 있는지 새로운 방법으로 소개하려 한다!

 

 

 

---

💁‍♀️ 기존 소개 방법 (Vite + Proxy) 

✅ loadEnv(mode, process.cwd(), ‘’ ) 

🤔 현재 작업 디렉터리에 있는, 모드에 해당하는 ‘.env’ 파일을 찾아서 모든 환경 변수를 로드함 ➡️ .env 파일의 환경 변수에 접근하여 해결

https://cyjcyj.tistory.com/191

[Vite + Proxy] 백엔드 서버 연동 CORS 문제 Proxy 설정으로 해결!

 

 

 

 

---

🙋🏻‍♀️ 환경 변수를 활용하여 production 모드와 development 모드를 구분하여 설정(Node.js 환경에서 실행)

➡️ .env.development 파일과 .env.production 파일을 만들고, 각각에 다른 프록시 설정

1️⃣ 환경 변수 설정 파일 생성 (ex) .env 
2️⃣ 파일에 따라서 프로덕션 모드와 디벨롭먼트 모드 구분하여 설정

 

✅ .env.development 파일 : 

MODE=development
HTTP_PROXY=http://development-proxy.example.com
HTTPS_PROXY=http://development-proxy.example.com

 

✅ .env.production 파일 : 

MODE=production
HTTP_PROXY=http://production-proxy.example.com
HTTPS_PROXY=http://production-proxy.example.com

 

✅ Node.js에서 dotenv 라이브러리 이용하여 간편하게 환경 변수 파일 로드

require('dotenv').config({
    path: `.env.${process.env.NODE_ENV}`
})

💁‍♀️NODE_ENV 환경 변수에 따라서 다른 .env 파일을 로드
➡️ 따라서 배포 단계에서는 NODE_ENV=production으로 설정, 개발 단계에서는 NODE_ENV=development로 설정
➡️ 이러한 설정을 통해 각각의 단계에서 서로 다른 프록시를 사용
➡️ 이처럼 환경 변수와 같은 메타데이터를 이용하면, 서로 다른 환경에서의 설정을 편리하게 관리

✅ 기존 Vite + Proxy에서도 각각 파일을 다르게 설정한 뒤, loadEnv 함수를 사용하여 관리할 수 있다.