ReactJS의 환경 변수.

ReactJS를 사용 중이고 일부 엔드포인트 API에 액세스하는 경우 환경 변수를 접했을 수 있습니다. 이 자습서에서는 환경 변수를 사용하는 방법을 안내합니다.

가정: Create React App에 익숙하고 이를 사용하여 React 애플리케이션을 만들고 있습니다.

환경 변수가 필요한 이유

프로덕션, 개발 또는 스테이징 등 환경에 따라 변수를 사용자 정의하기 위해

매우 민감한 API 키 및 암호와 같은 민감한 정보를 저장하기 위해 버전 제어로 푸시하면 안 됩니다.

Create React App은 다른 패키지를 설치하지 않고도 사용자 지정 환경 변수를 지원합니다.

환경 변수를 추가하는 두 가지 방법

.env 파일 사용(이것이 우리가 사용할 접근 방식입니다).

셸을 통해(임시, 셸 세션이 지속되는 동안 지속되며 OS 유형에 따라 다름).

.env를 사용하여 환경 변수 정의

1단계: 애플리케이션의 루트 폴더에서 .env라는 텍스트 파일을 만듭니다. 작업 디렉토리는 다음과 같습니다.

my-react-app/ 
 |-node-modules/
 |-src/
 |-public/
 |-.env
 |-gitignore
 |-package.json
 |-package.lock.json.
 |-README.md

2단계: 맞춤 변수를 만듭니다. CRA(Create React App)는 모든 사용자 지정 변수에 접두사REACT_APP를 적용합니다.
접두사REACT_APP가 없는 변수는 번들링 중에 무시됩니다. CRA가 이를 수행하는 방법에 대해 자세히 알고 싶으면 설명서here를 확인하십시오.
변수는 다음과 같아야 합니다.

REACT_APP_CLIENT_ID=12345
REACT_APP_KEY=aaddddawrfffvvvvssaa

3단계: 반응 앱에서 액세스합니다. 인쇄할 수 있고 다른 변수에 할당할 수도 있지만 응용 프로그램에서만 사용할 수 있습니다(값을 변경할 수 없음을 의미).

import React from 'react';

function App() {
  console.log(process.env.REACT_APP_CLIENT_ID);//printing it to console
  console.log(process.env.REACT_APP_KEY);//printing it to console

  return (
    <div className="app">
      <p>{process.env.REACT_APP_KEY}</p>//printing it to screen
    </div>
  );
}

export default App;

4단계: NODE_ENV 라는 내장 환경 변수가 있습니다. process.env.NODE_ENV 에서 액세스할 수 있습니다. 이 변수는 현재 어떤 모드에 있는지에 따라 변경됩니다.npm start를 실행하면 "개발"과 같으며,
실행하면npm test "test"와 같고npm run build를 실행하면 "생산"과 같습니다.
사용 사례에 대한 자세한 내용은 여기에서 확인할 수 있습니다.

5단계: .gitignore 파일을 엽니다. 아래와 같이 #misc 아래에 .env 및 기타 환경 변수를 넣는 것을 좋아합니다.

# dependencies 
/node_modules 
# testing 
/coverage 
# production 
/build 
# misc 
.DS_Store 
.env    #<--------Put the custom env files here 
.env.local 
.env.development.local 
.env.test.local 
.env.production.local 
npm-debug.log* 
yarn-debug.log* 
yarn-error.log*

이 프로세스를 따른 후에도 왜 작동하지 않습니까🤔?

모든 변수에 REACT_APP 접두사를 사용했는지 확인하십시오

.

.env 파일의 변수 이름이 js 파일의 변수 이름과 일치하는지 확인합니다. 예: .env의 REACT_APP_KEY 대 process.env.REACT_APP_KEY

개발 서버가 실행 중인 경우 중지한 다음 npm start it을 사용하여 다시 실행하십시오. 나는 이것으로 정말 고생했습니다 (변수는 정의되지 않은 오류입니다).

환경 변수는 빌드 중에만 업데이트되므로 .env 파일을 업데이트할 때마다 서버를 중지하고 다시 실행해야 합니다(변수는 정의되지 않은 오류임).

변수 값에서 인용 부호를 제거합니다.

Create React App의 환경 변수 사용에 대한 공식 문서는 here 에서 찾을 수 있습니다.