개요
서비스를 운영하다 보면 운영, 개발, 로컬에 세팅을 다르게 해주어야 할 경우가 많다.
만약 하나의 properties를 사용하게 되면 현재 서버에 해당하는 properties로 직접 개발자가 매번 변경해야 한다. 이럴 경우 properties의 수정 누락으로 에러가 발생하는 경우가 빈번하다.
env 파일 사용 방법
🎃 파일의 내용
REACT_APP_SERVICE_VERSION=1.8.7
REACT_APP_SERVICE_TYPE=S
REACT_APP_API_URL=https://api.staging.myservice.com- 변수명의 생성은 무조건 REACT_APP_ 으로 시작해야 합니다.
🎃 JSX 소스코드 사용법
<div className="side-text">
v.{process.env.REACT_APP_SERVICE_VERSION}
{process.env.REACT_APP_SERVICE_TYPE}
</div>
🎃 Html 소스코드 사용법
<head>
<link href="../assets/css/dashboard.css?v=%REACT_APP_SERVICE_VERSION%"
rel="stylesheet"
/>
<link
href="../assets/css/custom.css?v=%REACT_APP_SERVICE_VERSION%"
rel="stylesheet"
/>
</head>
Notice : 개발 화경에서 개발서버가 실행 중인 경우 환경변수가 변경은 서버를 재시작해야 적용됩니다.
개발/ 배포환경별 환경변수 적용
- .env 파일은 개발환경, 배포에 따라 다수의 파일을 생성해 활용할 수 있습니다.
- 배포 시 서버의 api 주소를 다르게 가져가기 위해 .env.production 파일을 생성 하였습니다.
🎃 CRA으로 사용할 수 있는 env 파일은 아래와 같다.
- .env: 기본.
- .env.local: 로컬 override. 이 파일은 test를 제외한 모든 환경에 대해 로드된다.
- .env.development, .env.test, .env.production: 환경별 설정.
- .env.development.local, .env.test.local, .env.production.local: 환경별 설정의 로컬 override.
🎃 이때, 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
해당 우선순위는 CRA에서 등록한 명령어에 따라서 정해져 있으며 override로 커스터마이징이 불가능하다고 한다.
개발서버/실서버별 배포시 환경변수를 다르게 사용하기 위한 설정
- package.json 에서 scripts 항목을 보면 아래와 같이 활용할 수 있다.
package.json
"scripts": {
"start": "env-cmd -f .env.local react-scripts start",
"dev": "env-cmd -f .env.development react-scripts start",
"prd": "env-cmd -f .env.production react-scripts start",
"build": "env-cmd -f .env.local react-scripts build",
"build:prod": "env-cmd -f .env.production react-scripts build && move build ./build_prod",
"build:dev": "env-cmd -f .env.development react-scripts build && move build ./build_dev",
"test": "react-scripts test",
"eject": "react-scripts eject"
},🎃 start - 별도의 지시자가 없어 모두 .env의 파일이 가장 높은 우선순위를 가지며 실행된다.
🎃 build - 기본적으로 .env.production 의 우선순위가 가장 높다.
하지만 build를 스테이징 서비스에서 사용하기 위해 .env를 사용하도록 지정한다.
🎃 env-cmd -f .env 로 .env 파일을 강제로 사용한다.
🎃 build:prod - .env.production을 사용하도록 지정되어 있어 .env.production이 가장 높은 우선순위이다.
참고로 그 뒤에 move build ./build_prod 는 배포파일 생성 후, 생성된 파일을 move 하도록 한 명령어이다.
이런 방식으로 서버환경별 배포 파일을 따로 관리하도록 지정할 수 있습니다.
참고
https://m.blog.naver.com/legend25/222033372402
리액트 - Create react app (CRA)에서 .env 를 이용한 환경변수 설정 (캐시 버스터, 배포파일 관리)
Create react app(CRA)로 생성된 앱에서 전역설정과 같은 환경변수를 사용하기 위해 env 파일을 활용할...
blog.naver.com
'Java' 카테고리의 다른 글
| [알고리즘/JAVA] String(문자열) - 회문 문자열 (2) | 2022.11.29 |
|---|---|
| [NextJS/Ts] 카카오 지도 띄우기 (0) | 2022.11.16 |
| [Spring] Profiles - 환경 구분(dev / prod / local) (0) | 2022.10.21 |
| [Nginx] 설치 및 url 서버 이미지 생성 (0) | 2022.10.21 |
| [React] react.js 어플리캐이션 404 not found 에러 (Nginx 서버) (0) | 2022.10.20 |
