[React js] .env 파일로 설정

로컬에서 할 때는 문제가 안되지만 

저장소에 올릴때는 토큰/api 설정이나 서버url을 안올리는게 좋겠다.

그래서 .env파일에 별도로 관리하는 것이 좋다.

 

[사전 조건]

1. create-react-app을 이용해 생성한 리액트 프로젝트

 

create-react-app으로 생성했다면 ' dotenv '를 통해 .env 파일을 import하지 않아도 된다. 

 

다만 리액트에서 .env 설정값을 가져와 사용하려면 조건이 있다.

 

REACT_APP_ 접두사 사용:

• 리액트에서는 환경 변수의 이름이 REACT_APP_로 시작해야 합니다. 예를 들어, REACT_APP_API_KEY=your-api-key와 같이 설정합니다.

.env 파일의 재시작 없는 변경은 불가능:

• .env 파일의 내용이 변경되면, 개발 서버를 다시 시작해야 합니다. .env 파일의 내용은 애플리케이션이 시작될 때 읽히기 때문입니다.

변수의 재할당 불가:

• 환경 변수는 빌드 시점에 설정되기 때문에, 런타임 중에 환경 변수를 변경할 수 없습니다. 애플리케이션이 로딩되는 동안 고정된 값으로 존재합니다.

.env 파일은 Git에 포함되지 않아야 함:

• .env 파일은 보안 이슈를 방지하기 위해 Git 저장소에 포함되지 않아야 합니다. 따라서 .gitignore 파일에 .env를 추가하여 Git에서 무시되도록 설정해야 합니다.

 

변수명에 대문자 사용:

• 리액트에서는 변수명이 모두 대문자인 경우 환경 변수로 간주되어 번들링됩니다. 따라서 환경 변수의 이름은 일반적으로 대문자로 작성합니다.

변수 참조 시 process.env 사용:

• .env 파일에서 정의한 변수를 사용할 때는 process.env.REACT_APP_VARIABLE_NAME 형태로 참조합니다.

 

#.env 파일
REACT_APP_API_KEY=your-api-key
REACT_APP_BACKEND_URL=http://localhost:5000


# 사용시에
// React component 또는 모듈에서
const apiKey = process.env.REACT_APP_API_KEY;
const backendUrl = process.env.REACT_APP_BACKEND_URL;

 

 

[참고]

.env 파일을 로컬과 운영에서 서로 다른 정보를 참조해야 할 것이다.

그래서

.env.local (로컬에서 실행시 참고)

.env.production (빌드할때 참고/ 운영시 사용)

나는 이렇게 둘로 나누어서 저장한다.

(.env 참조 우선순위는 https://reference-m1.tistory.com/376 여기가 정리 잘되있으니 참고)

 

그런데 

.env.production이 build할때 참고해야 하는데 .env.local을 바라볼때가 있다..

 

그럴땐 

npm install env-cmd 으로 해당 모듈을 설치하고 

env-cmd는 Node.js 환경에서 환경 변수를 로드하고 실행할 명령을 지정하는 도구입니다. 주로 프로젝트의 스크립트에서 특정 환경 변수를 설정하고 실행할 때 사용

 

package.json에 아래 내용 추가하고 npm install한 다음 다시 배포해보자 

"scripts": {
    "start": "react-scripts start",
    "build": "env-cmd -f .env.production react-scripts build", //이부분
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },