react env

반응 ENT- 런타임 환경 구성

빌드 타임이 아닌 런타임 에 .env 파일에서 환경을 채 웁니다.

• 동형 - 서버 및 브라우저 호환.
• 정적 사이트 생성을 지원합니다.
• 여러 .env 파일을 지원합니다.

readme

• 예
• 시작하기
• 파일 우선 순위
• 일반적인 사용 사례
  • 환경 별 구성
  • ENV 파일을 지정합니다
  • Docker EntryPoint와 함께 사용
• 인수와 매개 변수

예

• 다음 .js를 사용하는 예제 (readme.md 참조)
• React App 작성 예제 (Readme.md 참조)

시작하기

이 패키지는 REACT_APP_ Prefix가있는 흰색 상장 환경 변수가 포함 된 여러 .env 파일에서 __ENV.js 파일을 생성합니다.

 < script src =" /public/__ENV.js " />

브라우저에서는 변수가 window.__ENV.REACT_APP_FOO 및 서버 process.env.REACT_APP_FOO 에서 사용할 수 있습니다. env.react_app_foo. 우리는 값을보다 쉽게 검색 할 수 있도록 도우미 기능을 포함 시켰습니다.

 # .env
REACT_APP_NEXT= " Next.js "
REACT_APP_CRA= " Create React App "
REACT_APP_NOT_SECRET_CODE= " 1234 "

...

 import env from "@beam-australia/react-env" ;

export default ( props ) => (
  < div >
    < small >
      Works in the browser: < b > { env ( "CRA" ) } </ b > .
    </ small >
    < small >
      Also works for server side rendering: < b > { env ( "NEXT" ) } </ b > .
    </ small >
    < form >
      < input type = "hidden" defaultValue = { env ( "NOT_SECRET_CODE" ) } />
    </ form >
    < small >
      Entire safe environment:
      < pre >
        < code > { { JSON . stringify ( env ( ) ) } } </ code >
      </ pre >
    </ small >
  </ div >
) ;

.ENV 파일 우선 순위

우리는 다음과 같은 우선 순위를 가진 일부 세인 기본값을 구현했습니다.

1. {path-to-file} // from the --path, -p argument
2. .env.{key} // from the --env, -e argument
3. .env.local
4. .env

구성은 브라우저 및 process.env 에서 사용할 수 있습니다. .gitignore 에 .env.local 을 추가하는 것이 좋습니다.

일반적인 사용 사례

환경 별 구성

다음과 같은 프레임 워크는 .env.local, .env.production, .env 와 같은 멋진 기본값을 허용합니다. 여기에는 "준비, 통합, QA"와 같은 다양한 환경에서 앱을 실행하려는 제한 사항이 있지만 여전히 NODE_ENV=production 사용하여 "프로덕션"앱을 구축합니다. React-env를 사용하면 다음과 같습니다.

 # .env.staging
REACT_APP_API_HOST= " api.staging.com "
# .env.production
REACT_APP_API_HOST= " api.production.com "
# .env.qa
REACT_APP_API_HOST= " api.qa.com "
# .env.integration
REACT_APP_API_HOST= " api.integration.com "
# .env.local
REACT_APP_API_HOST= " api.example.dev "
# .env
REACT_APP_API_HOST= " localhost "

스테이징을 위해서는 앱을 실행하는 곳에서 APP_ENV=staging 설정합니다.

 {
  ...
  "scripts": {
    "start": "react-env --env APP_ENV -- next start" // where .env.${APP_ENV}
  }
  ...
}

따라서 스테이징 환경에서 REACT_APP_API_HOST=api.staging.com .

환경 변수의 이름을 값이 아닌 --env 로 전달해야한다는 점을 명심하십시오.

• ✔ 유효한 사용법 (MACOS) : APP_ENV=staging react-env --env APP_ENV -- next start
• 일반적인 실수 : react-env --env staging -- next start

ENV 파일을 지정합니다

또한 특정 ENT 파일로의 경로를 지정할 수도 있습니다.

 {
  ...
  "scripts": {
    "start": "react-env --path config/.env.defaults -- next start"
  }
  ...
}

이 두 인수의 조합과 함께 기본 .env, .env.local 과 함께 런타임 구성을 빌드 할 수 있습니다.

흰색 상장 환경 변수에 대한 접두사를 지정합니다

또한 흰색 상장 환경 변수의 접두사를 지정할 수도 있습니다.

 {
  ...
  "scripts": {
    "start": "react-env --prefix NEXT_APP -- next start"
  }
  ...
}

 # .env
NEXT_APP_NEXT= " Next.js "
NEXT_APP_CRA= " Create React App "
NEXT_APP_NOT_SECRET_CODE= " 1234 " 

Jest와 함께 접두사 사용

테스트 중에 env() 사용하는 경우 JEST 명령 전에 REACT_ENV_PREFIX env 변수를 추가해야합니다.

 {
  ...
  "scripts": {
    "test": "REACT_ENV_PREFIX=NEXT_APP jest --maxWorkers=3"
  }
  ...
}

Docker EntryPoint와 함께 사용

이 패키지를 dockerfile 내부의 ENTRYPOINT 스크립트로 사용할 수 있습니다. 컨테이너 부츠 일 때 __ENV.js 구성 파일이 생성되고 package.json 스크립트가 변경되지 않도록합니다. 물론 컨테이너에 node 바이너리가 있어야합니다.

 FROM node:alpine

ENTRYPOINT yarn react-env --env APP_ENV

CMD yarn start

인수와 매개 변수

$ react-env < args > -- < command >

• <command>

Nodejs 항목 파일과 같은 명령을 react-env CLI 도구에 전달할 수 있습니다. 예를 들어 react-scripts , next dev , next start

• --env , -e (기본값 : null)

값이 원하는 환경의 이름 인 기존 환경 변수의 이름을 지정하여 환경 별 환경 파일로 반응식을 구문 분석합니다. 예를 들어, APP_ENV=staging 먼저 설정 한 다음 --env APP_ENV 플래그를 적용 할 수 있습니다. React-env는 .env.staging, .env.local, .env 순서대로로드합니다.

• --path , -p (기본값 : null)

react-env --path .env.testing .env.testing, .env.local, .env 할 특정 ENV 파일을 지정하십시오. APP_ENV=staging loads .env.testing, .env.staging, .env.local, .env 우선 순위 순서로 --env APP_ENV --path testing 의 조합.

• --dest , -d (기본값 : ./public)

__ENV.js 파일을 생성 할 기본 대상을 변경하십시오.

• --prefix (기본값 : React_app)

흰색 상장 ENV 변수의 기본 접두사를 변경하십시오. 예상 react-env --prefix CUSTOM_PREFIX 와 같은 화이트리스트 변수 : CUSTOM_PREFIX_PUBLIC_KEY=my-public-key

• --debug (기본값 : False)

React-env에 대한 디버깅 활성화. react-env --debug 실행할 때로드 된 브라우저 환경 변수를 콘솔에 로그로 기록합니다.

3.xx 차단 변경

---

상당한 파괴 변경으로 우리는 --env 인수를 통해 특정 파일을 지정할 수있는 기능을 삭제했습니다. 이 인수는 이제 실행중인 환경에 따라 환경 파일을 구문 분석 할 것을 지정합니다. 예를 들어 --env APP_ENV 또는 -e APP_ENV 여기서 APP_ENV=staging .env.staging 에서 읽습니다. 플랫폼이 스테이징, QA, NODE_ENV=production 사용하여 여전히 "생산"모드로 내장되어있는 staging, qa, integration 환경을 갖는 것이 매우 일반적입니다. 이것은 그 Usecase와 다른 많은 사람들을 허용합니다.

-당신은 여전히 --path, -p 인수를 통해 파일을 지정할 수 있습니다.

---

또한 보안 위험 이었기 때문에 기본적으로 NODE_ENV 추가를 삭제했습니다.

---

파일은 이제 __ENV.js 로 명명되었습니다

---

DePandand 명령은 이제 react-env <args> -- <command> 형식입니다.