개발 환경에서 특정 값을 사용하고 싶은 경우를 접했을 수 있습니다.
생산 환경의 또 다른 가치
예를 들어 사용자 목록을 가져오는 API 엔드포인트가 있다고 가정해 보겠습니다.
이제 프로덕션 환경에서 개발 데이터를 가져오지 않도록 각 환경에 대해 서로 다른 URL을 갖게 됩니다.

현재 어떤 환경에 있는지 식별하기 위해 특수 환경 변수( process.env.NODE_ENV )를 사용할 수 있습니다.
Create React App을 사용할 때,
반응 스크립트는 NODE_ENV가 실행될 때 development의 값을 npm start로 설정하고production를 실행하면 npm run build로 변경됩니다.

따라서 NODE_ENV를 사용하여 현재 어떤 환경에 있는지 확인하고
아래 코드 스니펫에 표시된 대로 그에 따라 API 끝점의 값을 설정합니다.

let API_ENDPOINT
if (process.env.NODE_ENV === "production") {
  API_ENDPOINT = "https://example.com"
} else {
  API_ENDPOINT = "https://dev.example.com"
}

그러나 위 접근 방식의 문제점은 환경별 값을 사용하고
환경을 추가하거나 특정 환경에 대한 값을 변경하려는 경우
번거로운 작업인 전체 코드베이스를 스캔해야 합니다.

이 문제를 해결하기 위해 React는 .env 파일 지원과 함께 제공됩니다.
즉, 우리 프로젝트의 루트 디렉터리에 .env라는 파일이 있고 거기에 값이 정의되어 있을 수 있습니다.
다음 단계에서 어떻게 구현할 수 있는지 봅시다.

프로젝트 설정

먼저 아래 명령어를 사용하여 새로운 반응 프로젝트를 생성해 봅시다.

npx create-react-app environment-variables

이제 루트 디렉토리에서 다음 내용으로 3개의 파일 .env , .env.development 및 .env.production를 만듭니다.

REACT_APP_API_ENDPOINT = https://default.example.com

REACT_APP_API_ENDPOINT = https://dev.example.com

REACT_APP_API_ENDPOINT = https://example.com

다음 코드로 업데이트App.js:

function App() {
  console.log({ REACT_APP_API_ENDPOINT: process.env.REACT_APP_API_ENDPOINT })
  return <div>Home</div>
}

export default App

위의 코드에서 process.env.REACT_APP_API_ENDPOINT 값을 기록하고 있습니다.
이는 .env 파일에 저장된 모든 값이 process.env를 통해 액세스될 수 있음을 의미합니다.

Create React App requires all the environment variables to begin with REACT_APP_, any other variables will be ignored.
This is done to avoid developers from accidentally committing any environment variables that may contain app secrets.

이제 npm start를 사용하여 애플리케이션을 시작하고 브라우저 콘솔에 무엇이 기록되는지 확인합니다.



이를 통해 npm start가 실행될 때마다 NODE_ENV가 개발로 설정되고
환경 변수는 .env.development에서 가져옵니다.

이제 npm run build를 사용하여 애플리케이션을 빌드하고 아래 명령을 사용하여 애플리케이션을 실행해 보겠습니다.

serve -s build

If you don't have serve installed globally, please do so by running npm i -g serve

https://localhost:5000 을(를) 열면 엔드포인트가 .env.production에서 가져와 기록되는 것을 볼 수 있습니다.



CRA Documentation에는 NODE_ENV를 수동으로 재정의할 수 없다고 나와 있습니다.
따라서 2개의 환경(예: qa 및 스테이징)을 더 갖고 싶다면 재정의NODE_ENV할 수 없으며 작동할 것으로 예상할 수 있습니다.

여러 환경 보유

여러 환경을 지원하려면 추가 라이브러리를 설치하고 빌드 스크립트를 약간 수정해야 합니다.
다음 명령을 사용하여 env-cmd 을 개발 종속성으로 설치해 보겠습니다.

npm i -D env-cmd

env-cmd는 응용 프로그램을 빌드하는 동안 고려할 특정.env 파일을 지정하는 데 도움이 됩니다.

이제 qa 및 스테이징 환경을 위한 파일.env을 추가해 보겠습니다.
.env.qa:

REACT_APP_API_ENDPOINT = https://qa.example.com

.env.staging:

REACT_APP_API_ENDPOINT = https://stage.example.com

그리고 몇 가지 빌드 스크립트를 package.json에 추가합니다.

{
  // ...
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "build:qa": "env-cmd -f .env.qa npm run-script build",
    "build:staging": "env-cmd -f .env.staging npm run-script build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

  // ...
}

이제 npm run build:qa 또는 npm run build:staging 를 실행하고 애플리케이션을 제공하면
각각의 끝점 URL이 기록되는 것을 볼 수 있습니다.

모든 구성을 하나의 파일에 보관

각 환경에 대한 별도의 파일이 마음에 들지 않으면 모든 구성을 하나의 파일에 저장할 수 있습니다!

다음 내용으로 프로젝트의 루트 디렉터리에 .env-cmdrc라는 파일을 만듭니다.

{
  "development": {
    "REACT_APP_API_ENDPOINT": "https://devapi.example.com"
  },
  "qa": {
    "REACT_APP_API_ENDPOINT": "https://qaapi.example.com"
  },
  "staging": {
    "REACT_APP_API_ENDPOINT": "https://stagingapi.example.com"
  },
  "production": {
    "REACT_APP_API_ENDPOINT": "https://prodapi.example.com"
  }
}

이제 package.json에 몇 가지 스크립트를 추가하여 위 파일에서 변수를 읽습니다.

{
  //...
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "build:dev": "env-cmd -f .env.development npm run-script build",
    "build:qa": "env-cmd -f .env.qa npm run-script build",
    "build:staging": "env-cmd -f .env.staging npm run-script build",
    "build-dev": "env-cmd -e development npm run-script build",
    "build-qa": "env-cmd -e qa npm run-script build",
    "build-staging": "env-cmd -e staging npm run-script build",
    "build-prod": "env-cmd -e production npm run-script build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
  //...
}

이제 npm run build-dev 명령을 사용하여 개발 코드를 빌드하고 serve -s build를 사용하여 빌드된 코드를 실행합니다.
올바른 API URL이 인쇄되는 것을 볼 수 있습니다.

소스 코드

전체source code here를 볼 수 있습니다.