[React] API 주소 환경변수로 분리하기 (개발서버/실서버) (feat.CRA, github-actions)

지금 진행 중인 프로젝트 중에서 개발서버와 실서버가 분리되어 있는 프로젝트가 있다. 

main 브랜치에 올라가는 코드는 실서버로, development 브랜치에 올라가는 코드는 개발서버로 배포되도록

배포 자동화 작업이 되어 있다. 

그에 따라서 프론트엔드 코드의 API 요청 주소도 개발 버전(개발서버로 요청)과 실서비스 버전(실서버로 요청)이 달라지도록 해야하는데, 

그냥 하드코딩이 되어 있다보니까 

브랜치를 바꿀 때마다 일일히 수정하는 게 번거로워서 환경변수로 추가해놓고 사용하기로 했다. 

 

API 주소 환경변수로 분리하기 (개발서버/실서버) (feat.CRA, github-actions)

CRA로 생성된 프로젝트이기 때문에 CRA 기반으로 설명되어 있고,

깃허브 액션을 사용하고 있어서 마지막에 깃허브 액션 설정을 바꾸는 방법도 포함되어 있다. 

 

1. 프로젝트 루트에 .env 파일과 .env.production 파일을 추가해 

개발서버(.env), 실서버(.env.production)의 API 요청 주소를 각각 환경변수로 정의한다. 

.env

REACT_APP_API_URL=http://api.dev-server.com

 

.env.production

REACT_APP_API_URL=https://api.server.com

 

이 때 변수명은 반드시 REACT_APP_ 으로 시작해야 한다. 

 

2. 소스코드에서 API url을 사용하는 부분을 환경변수로 대체한다. 

axios.get(`${process.env.REACT_APP_API_URL}`, () => {});

환경변수로 정의해둔 값은 process.env.REACT_APP_* 로 접근할 수 있다.

 

3. package.json :  build script를 build, build:prod 두 가지로 분리한다. 

"scripts": {
	"build": "env-cmd -f .env react-scripts build",
	"build:prod": "env-cmd -f .env.production react-scripts build",
    //...
},

 

build 명령어는 기본적으로 .env.production 의 우선순위가 가장 높기 때문에, 개발환경일 경우 강제로 .env 를 사용하도록 env-cmd 명령어를 사용한다.

(npm install env-cmd —save-dev / yarn add env-cmd -D 로 env-cmd 설치해야 함)

 

4. 깃허브 액션 수정 : 

deploy.yml

- name: Build
      run: yarn build:prod

 

development.yml

- name: Build
      run: yarn build

 

 

이렇게 설정해두면 이제 배포 환경에 따라 (개발/프로덕션) 다른 api 주소로 요청이 잘 된다. 

 

Reference :

https://m.blog.naver.com/legend25/222033372402

리액트 - Create react app (CRA)에서 .env 를 이용한 환경변수 설정 (캐시 버스터, 배포파일 관리)