[React] React 환경변수, 개발 및 배포 시에 어떻게 사용할까? (Docker, github action 사용 시)

React 환경변수 등록

기존 개발 시

개발 환경에서 React를 프론트로 사용할 때, 코드 사아에서 환경변수를 이용하려면 어떻게 해야할까?

1. 최상위 폴더에 .env 파일을 만든다.

2. .env 파일에 REACT_APP으로 시작하는 환경변수를 정의한다.

   REACT_APP_ADMIN_KEY=hi

3. 코드 상에서 process.env.REACT_APP_ADMIN_KEY와 같은 형태로 사용한다.

이렇게 간편하게 이용할 수 있다!

---

배포 시

하지만 서비스를 위한 build 후에는 환경변수를 읽어들일 수 없기 때문에 build와 동시에 build에 대한 매개변수(argument)로 환경변수를 세팅해주어야한다.

NERA는 github action에서 docker/build-push-action@v1.1.0 이라는 action을 이용해 _Docker file_을 통해서 build를 하기 때문에 이러한 환경을 기준으로 설명하겠다!

1. REACT 관련 환경변수를 git repository의 secret으로 등록한다.

   Settings -> Secrets 에서 등록할 수 있다.

2. github action에서 build_args를 추가해준다. (docker/build-push-action 버전에 따라 기재 방법이 다르므로 주의!)

       steps:
       - uses: actions/checkout@v2
       - name: Build and push Docker images
         uses: docker/build-push-action@v1.1.0
         with:
           username: ${{ secrets.DOCKER_ID }} 
           password: ${{ secrets.DOCKER_PW }}
           repository: csuos/nera
           build_args: REACT_APP_ADMIN_KEY=${{ secrets.REACT_APP_ADMIN_KEY }}
           tag_with_ref: true # optional
           tag_with_sha: true 
           tags: latest
           cache_froms: csuos/nera:latest # optional
           push: ${{ startsWith(secrets.DOCKER_ID, 'csuos') }}

   위의 build_args에 있는 REAACT_APP_ADMIN_KEY처럼 세팅해준다.

   여기서 그냥 github action을 돌리게 되면 [Warning] One or more build-args [환경변수] were not consumed 와 같은 에러가 뜬다. 이는 build를 처리하는 Docker file에 ARG(매개변수)를 정의해주지 않아서이다. 기존에 Docker에서 제공하는 ARG가 아니라면 사용할 것이라고 미리 선언해두어야한다.

3. Docker file 수정

   FROM node:12 as builder
   ARG REACT_APP_ADMIN_KEY
   ENV REACT_APP_ADMIN_KEY=$REACT_APP_ADMIN_KEY
   WORKDIR /usr/src/app
   COPY ./page/package.json ./
   RUN yarn
   COPY ./page/. .
   RUN yarn build
   
   FROM node:12
   WORKDIR /usr/src/app
   COPY ./server/package.json ./
   RUN yarn
   COPY --from=builder /usr/src/app/build /usr/src/app/build
   COPY ./server/. .
   
   EXPOSE 3000
   CMD [ "yarn", "start" ]

   기존의 Docker file에서 ARG와 ENV 라인만 추가해주었다. ARG로 REACT_APP_ADMIN_KEY를 사용할 것이고 이 매개변수를 받아서 환경변수에 등록할 것이다.

참고로 서버는 계속 node를 이용해서 돌아가고 있을 것이기 때문에, 클라우드 상에서 OS 환경변수로 환경변수를 세팅해주면 코드상에서 process.env로 받아와서 사용할 수 있다.

 

 

자세한 코드는 https://github.com/CSUOS/nera를 참고하자 :)