[React] .env로 경로 숨기기 (배포, 개발)

들어가며

---

이전에 다크모드 기능을 추가하여 만들었던 noteapp은 axios를 이용해서 REST API를 호출했다.

데이터 서버는 json-server를 glitch를 통해 배포했고, axios에 사용한 URL도 glitch 사이트에서 배포한 URL을 넣었다.

나중에 이 프로젝트를 누군가에게 배포할 때, 보안상 데이터 서버의 url을 그대로 컴포넌트에 넣어두기엔 불안했다.

그래서 .env를 사용하여 나만의 암호키를 만들기로 했다.

 

.env 사용법

먼저 컴포넌트의 root 경로에 .env 파일을 생성한다.

# /.env
REACT_APP_API_URL = https://서버경로

# /src/App.js
const data = useFetch(`${process.env.REACT_APP_API_URL}/notes/`);

 

npm run start로 서버를 가동중이라면 확인을 위해서 서버를 껐다가 다시 run 해야한다.

 

보안을 위해 암호키(.env)를 사용했는데 Git으로 배포를 해버리면 안되니 .gitignore에 .env파일을 추가해준다.

/.env

 

상황별 .env

development 개발 env실행

# .env.development 파일 사용
npm start

production 배포 env실행

# .env.production 파일
npm run build

test 개발 env실행

# .env.test
npm run test

test를 제외한 env 실행

# .env.local 파일

 

script 명령어 별 env 파일

• npm start: .env.development.local, .env.local, .env.development, .env
• npm run build: .env.production.local, .env.local, .env.production, .env
• npm test: .env.test.local, .env.test, .env