create-react-app 빌드 스크립트를 실행할 때 build .env 변수를 설정하는 방법은 무엇입니까?

create-react-app 빌드 스크립트를 실행할 때 build .env 변수를 설정하는 방법은 무엇입니까?

create-react-app에서 다음 환경변수를 사용하고 있습니다.

console.log(process.env.REACT_APP_API_URL) // http://localhost:5555

달릴 때 작동한다.npm starta를 읽음으로써.env파일:

REACT_APP_API_URL=http://localhost:5555

다음과 같은 다른 값을 설정하려면 어떻게 해야 합니까?http://localhost:1234실행 시npm run build?

이건 내 거야package.json파일:

{
  "name": "webapp",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-scripts": "0.9.0"
  },
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

지금쯤은 작동했을 겁니다만, 이걸 발견한 다른 사람은 기본 환경변수를 설정해 두겠습니다..env"create-module-app" 프로젝트의 루트에 파일을 저장합니다.

사용할 때 사용되는 변수를 구분하는 방법npm start그리고.npm run buildenv 파일을 2개 더 만들 수 있습니다..env.development그리고..env.production.

npm start설정하다REACT_APP_NODE_ENV로.development이 때문에, 자동적으로,.env.development파일, 및npm run build놓다REACT_APP_NODE_ENV로.production, 그래서 자동으로 사용됩니다..env.production. 이 값들에 의해 설정되는 값은 에 있는 값보다 우선됩니다..env.

다른 사용자와 함께 작업하고 있으며 사용 중인 머신에만 고유한 값이 있는 경우 다음 위치에서 값을 재정의할 수 있습니다..env.development그리고..env.production이러한 값을 새 파일에 추가함으로써 -.env.development.local그리고..env.production.local각각 다음과 같다.

편집: 설정한 환경변수는 "REACT_APP_"로 시작해야 합니다(예: "REACT_APP_MY_ENV_VALUE").

EDIT 2: 개발 및 생산 이상의 것이 필요한 경우 이 코멘트에 따라 env-cmd를 사용하십시오.

를 사용할 수 있습니다.process.env.NODE_ENV다음과 같이 합니다.

const apiUrl = process.env.NODE_ENV === 'production' ? process.env.REACT_APP_PROD_API_URL : process.env.REACT_APP_DEV_API_URL;

이 경우,REACT_APP_PROD_API_URL그리고.REACT_APP_DEV_API_URL세트.

또는 프로덕션 URL이 항상 같은 경우 다음과 같이 단순화할 수 있습니다.

const apiUrl = process.env.NODE_ENV === 'production' ? 'https://example.com' : process.env.REACT_APP_DEV_API_URL;

Create React App은 다음을 설정합니다.NODE_ENV제작 시 '실가동'이 가능하므로 언제 실가동 상태로 설정할지 걱정할 필요가 없습니다.

주의: 서버를 재시작해야 합니다(예: 실행).npm start환경변수 변경을 검출합니다.

별도의 환경(stage, prod)에 구축 및/또는 배포하기 위해 별도의 dotenv 파일을 원하는 경우 다음과 같이 env-cmd를 사용할 수 있습니다.

npm install --save-dev env-cmd
./node_modules/.bin/env-cmd -f ./stage.env npm build

그럼 업데이트만 하면 됩니다.package.json다음과 같이 입력합니다.

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

그런 다음 다음 셸 명령을 실행하면 됩니다.

npm run build:stage

또한 추가 종속성 없이 수행할 수 있습니다.

"scripts": {
  "build": "sh -ac '. ./.env.${REACT_APP_ENV}; react-scripts build'",
  "build:staging": "REACT_APP_ENV=staging npm run build",
  "build:production": "REACT_APP_ENV=production npm run build"
},

그리고 가지고 있다.env.staging,.env.production파일링에 따라)

env-module 패키지 설치

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "deploy": "gh-pages -d build",
    "start:qa": "env-cmd -f .env.qa react-scripts start",
    "build:qa": "env-cmd -f .env.qa react-scripts build"
  },

로컬에서 QA 환경을 실행하려면 npm run start:qa를 사용합니다.

전개에 Heroku 를 사용하는 경우는, 다음의 순서에 따릅니다.

• 앱 설정으로 이동하여 [Config Vars 공개]버튼을 클릭합니다.
• 변수 추가
• 이전 process.env와 동일한 방법으로 앱에서 사용합니다.RECT_APP_VARILE_NAME
• 앱을 다시 배포하면 끝입니다.

언급URL : https://stackoverflow.com/questions/42458434/how-to-set-build-env-variables-when-running-create-react-app-build-script