서버 주소나 민감한 key값들을 보통 환경변수로 관리하기 위해 env 파일에 저장하게 됨

백엔드 서버가 개발서버와 상용서버가 있는데,

REACT_APP_BASEURL_PRODUCTION = "상용서버주소"
// REACT_APP_BASEURL_DEVELOPMENT = "개발서버주소"

이런식으로
개발할 때 npm start로 테스트 할 때 개발 서버 주소 활성화하고,
배포하려고 푸시할때 상용서버로 바꾼다면 너무 비효율적이고,
사람이 생각해서 적용해야 되기 때문에 휴먼에러가 발생할 확률이 높음

파일수정

.env 파일을 지우고,

상용서버 : .env.production
개발서버 : .env.development

로 파일을 생성

값수정

.env.production 파일에는 상용에 필요한 값들만 넣어줌
.env.development 파일에는 개발 서버에 필요한 값들만 넣어줌
둘이 변수명은 똑같이 맞춰줌(REACT_APP_BASEURL=주소)

테스트

development 가 적용되었는지는
npm run start 하면 확인 가능

production env파일은 build 파일에 번들링되서 활성화가 되기 때문에 build 파일을 올려야됨

서버에 올리고 테스트하고 틀리면 다시 서버에 올리고 테스트하고, 이렇게 할수 없는 상황이라면,

패키지 설치

serve 라는 페키지를 설치해서 테스트
(프로젝트에서 쓰는거 아니니 내 pc에 전역으로 설치)
yarn
yarn global add serve
npm
npm install serve -g

설치 후 실행하면 build 파일이 실행된다.

npx serve 빌드파일위치 ex) 프로젝트 경로에서 npx serve ./build

env 파일 잘 읽어오는지 확인

적용

관리자페이지에서 사용했는데 env 파일을 읽어와서 test url이면 상단에 표시했음