React API URL 환경변수로 관리하기

1. 로컬 개발 환경: .env.local과 .env.development의 동시 로드 여부

React에서 npm start 실행 시, 기본적으로 NODE_ENV=development로 설정됩니다.
이때, React는 아래 순서로 환경 변수 파일을 로드합니다:
1. .env.local (가장 높은 우선순위)
2. .env.development (다음 우선순위)

환경 변수 병합 로직
• .env.local의 설정이 .env.development보다 우선합니다.
• 즉, 동일한 키가 두 파일에 존재할 경우, .env.local의 값이 우선됩니다.
• 만약 두 파일에 서로 다른 키가 존재하면, 두 도메인이 모두 적용될 수 있습니다.

예시: 두 파일이 병합되는 경우

.env.local:

REACT_APP_API_URL=http://localhost:8000/api/

.env.development:

REACT_APP_OTHER_URL=http://dev-server.com/api/

React 내에서:

console.log(process.env.REACT_APP_API_URL); // http://localhost:8000/api/
console.log(process.env.REACT_APP_OTHER_URL); // http://dev-server.com/api/

결론: 두 파일은 병합되어 적용되지만, 같은 키가 있다면 .env.local이 우선합니다.

2. 개발 서버: cross-env 사용 방법

React에서 기본적으로 npm build를 실행하면 NODE_ENV=production으로 설정됩니다.
이 상태에서 cross-env를 사용하여 NODE_ENV=development로 강제 설정할 수 있습니다.

cross-env 설치

먼저 cross-env를 설치합니다.

npm install cross-env --save-dev

cross-env로 NODE_ENV 설정

package.json 스크립트 수정:

{
"scripts": {
"start": "react-scripts start",
"build": "cross-env NODE_ENV=development react-scripts build",
"build:prod": "react-scripts build" // 기본 production 설정
}
}

사용 방법:
1. 개발 서버 빌드:
• npm run build → NODE_ENV=development으로 빌드 실행.
• .env.development 파일을 로드합니다.
2. 운영 서버 빌드:
• npm run build:prod → NODE_ENV=production으로 빌드 실행.
• .env.production 파일을 로드합니다.

3. cross-env의 역할
   • cross-env는 다양한 운영 체제 간 환경 변수 설정 차이를 해결합니다.
   • Windows와 Linux/Unix 계열의 환경 변수 설정 방식이 다르기 때문입니다.
   • cross-env를 사용하면 운영 체제에 관계없이 동일한 방식으로 환경 변수를 설정할 수 있습니다.

운영 체제 간 차이 예시:
• Linux/Unix 계열:

NODE_ENV=development react-scripts build

•	Windows:

set NODE_ENV=development&& react-scripts build

cross-env를 사용하면 운영 체제에 따라 다른 방식을 사용할 필요 없이 일관된 명령어를 실행할 수 있습니다:

cross-env NODE_ENV=development react-scripts build

4. 결론
   • 로컬 개발 환경에서는 .env.local과 .env.development가 병합되지만, 우선순위는 .env.local입니다.
   • cross-env를 사용하면 React에서 환경 변수 설정을 더욱 유연하게 관리할 수 있습니다.
   • 개발 서버에서 production 환경 설정을 무시하고 강제로 development 모드로 빌드할 때 유용합니다.
   • 환경 변수 파일과 cross-env를 활용하여 개발/운영 환경 간의 충돌을 방지하세요.

---

react 환경변수 load 규칙

맞습니다! React 환경 변수 파일 로드 우선순위에 따라 npm start 실행 시 NODE_ENV=development는 기본 설정이지만, 환경 변수 파일 로드 우선순위는 .env.local이 가장 높은 우선순위를 가집니다.

React 환경 변수 로드 규칙 요약

React는 실행 환경에 따라 아래 순서대로 환경 변수 파일을 로드합니다:
1. .env.local (항상 최우선, 어떤 실행 환경에서도 로드됨)
2. .env.development (개발 환경에서 로드됨)
3. .env.production (운영 환경에서 로드됨)
4. .env (공통적으로 로드)

npm start와 .env.local의 관계
• npm start:
• React 애플리케이션의 로컬 개발 서버를 시작합니다.
• NODE_ENV=development로 설정됩니다.
• .env.local이 존재하면 우선적으로 로드됩니다.

결론

npm start 실행 시:
• .env.local이 가장 우선적으로 로드됩니다.
• .env.development는 .env.local에서 정의되지 않은 환경 변수에 대해서만 보완적으로 사용됩니다.

수정된 설명

• start:
  • npm start 실행 시 로컬 개발 서버를 시작.
  • 기본적으로 NODE_ENV=development로 설정.
  • 환경 변수 파일 우선순위: .env.local > .env.development

---

React에서 환경변수를 찾을 때 프로젝트 루트 디렉토리에서 시작합니다. 즉, package.json 파일이 위치한 디렉토리를 기준으로 환경변수를 탐색합니다.

React 환경변수 파일 탐색 기준
1. 프로젝트 루트 디렉토리
• React는 항상 프로젝트 루트 디렉토리에 위치한 .env 파일을 기준으로 환경변수를 찾습니다.
• 아래와 같은 파일 이름이 사용됩니다:
• .env.local
• .env.development
• .env.production
• .env
2. 파일 로드 우선순위
React는 환경 변수 파일을 아래 순서대로 로드합니다:
1. .env.local (항상 최우선, 모든 환경에서 로드됨)
2. .env.[환경] (NODE_ENV 값에 따라 로드)
• .env.development: 로컬 개발 환경 (npm start)
• .env.production: 운영 환경 (npm run build)
3. .env (공통적으로 로드됨)

예시: React 환경 변수 파일 디렉토리 구조

프로젝트 루트 디렉토리에서 환경 변수 파일은 아래와 같이 위치합니다:

frontend/
├── package.json
├── .env.local # 최우선으로 로드되는 환경 변수 파일
├── .env.development # NODE_ENV=development에서 로드
├── .env.production # NODE_ENV=production에서 로드
├── .env # 공통적으로 로드
├── public/
└── src/

React가 환경변수를 찾는 방식
• process.env 객체는 위 파일들에서 설정된 환경변수를 자동으로 가져옵니다.
• React에서 사용하는 환경변수는 반드시 REACTAPP으로 시작해야만 React에서 인식됩니다.

.env.local
REACT_APP_API_URL=http://localhost:8000/api/

FAQ

1. 환경 변수 파일이 루트 디렉토리가 아닌 다른 곳에 있으면?

React는 환경변수를 package.json이 위치한 디렉토리에서만 찾습니다. 다른 위치의 파일은 자동으로 로드되지 않으므로, 환경 변수 파일은 반드시 루트 디렉토리에 있어야 합니다.

2. 환경 변수 이름에 제한이 있나요?

React는 환경 변수 이름이 REACTAPP으로 시작하는 것만 로드합니다. 이 규칙을 따르지 않으면 환경변수를 사용할 수 없습니다.

console.log(process.env.REACT_APP_API_URL); // 올바르게 로드된 값 출력
console.log(process.env.API_URL); // undefined

React 환경 변수 로드 문제 해결 정리

문제점
1. .env.local 파일이 React 환경 변수 로드 우선순위에서 항상 가장 높은 우선순위를 가짐.
2. npm run build:prod 실행 시 .env.production 대신 .env.local이 로드되어 운영 환경(API URL 등)이 제대로 적용되지 않음.

해결 방안

React에서 환경 변수 파일을 명시적으로 지정하기 위해 env-cmd 패키지를 사용했습니다.

적용 절차

1. env-cmd 패키지 설치

React 프로젝트 디렉토리에서 다음 명령어를 실행:

npm install env-cmd --save-dev

2. 환경 변수 파일 작성

환경에 맞는 환경 변수 파일을 프로젝트 루트 디렉토리에 작성:
• 로컬 개발 환경 (.env.local)

REACT_APP_API_URL=http://localhost:8000/api/

•	개발 서버 (.env.development)

REACT_APP_API_URL=https://poko-dev.com/api/

•	운영 서버 (.env.production)

REACT_APP_API_URL=https://www.hellopoko.com/api/

3. package.json 스크립트 수정

package.json 파일에서 scripts를 다음과 같이 수정:

"scripts": {
"start": "react-scripts start",
"build:dev": "env-cmd -f .env.development react-scripts build",
"build:prod": "env-cmd -f .env.production react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}

4. 환경에 맞는 명령어로 빌드 실행
   • 로컬 개발 환경

npm run start

•	개발 서버 빌드

npm run build:dev

•	운영 서버 빌드

npm run build:prod

작동 확인 방법
1. 빌드 결과 확인
빌드 후 환경 변수가 제대로 적용되었는지 확인:

grep "https://www.hellopoko.com/api/" build/static/js/*.js

2.	결과

운영 서버 빌드(npm run build:prod) 후, build/static/js/*.js 파일 내에 https://www.hellopoko.com/api/ 값이 포함되어 있으면 성공적으로 적용된 것.

결과
1. 문제 해결
운영 환경에서 .env.production 값이 제대로 반영되어 빌드됨을 확인.
2. 환경별 변수 관리 정리

•	로컬 개발 환경: .env.local
•	개발 서버: .env.development
•	운영 서버: .env.production

React 프로젝트에서 각 환경에 맞는 API URL 및 기타 환경 변수를 정확히 관리할 수 있도록 설정 완료.

---

3. React 환경변수 적용 문제 해결
   • 문제: npm run build:prod 실행 시 .env.production 파일의 변수(REACT_APP_API_URL)이 아닌 .env.local이 적용됨.
   • 해결:
   • cross-env 대신 env-cmd 설치 및 적용:
   • npm install env-cmd --save-dev
   • package.json 수정:

   •	환경변수 적용 여부를 확인하기 위해 console.log(process.env.REACT_APP_API_URL) 추가.

        "scripts": {
    "build:prod": "env-cmd -f .env.production react-scripts build"
}