1
2
3
4
5
6
7
8
9
{
  // ...
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "build:dev": "react-app-rewired build --env=dev",
    // ...
  }
}

하지만 build:dev 실행하니 process.env에 --env로 지정한 환경변수(dev)가 전달되지 않는다. 문제를 해결하기 위해 검색을 하다가 Create React App에서 해결의 실마리를 찾을 수 있었는데 바로 env-cmd를 사용하는 것이다.

Customizing Environment Variables for Arbitrary Build Environments You can create an arbitrary build environment by creating a custom .env file and loading it using env-cmd. - https://create-react-app.dev/docs/deployment/#customizing-environment-variables-for-arbitrary-build-environments

리액트는 노드 환경에서 개발한다. 노드는 기본적으로 .env 파일이 존재하면 파일 내용을 환경 변수로 등록한다. env-cmd는 노드 환경변수 파일을 동적으로 변경할 수 있다.

먼저 배포 환경별로 .env 파일을 만들었다.

1
2
3
4
.
├── .env
├── .env.dev
└── package.json

.evn.dev 파일은 아래와 같다.

1
REACT_APP_API_BASE_URL="http://dev-product-service.example.kr/api"

그리고 package.json에 build:dev 스크립트를 아래 처럼 변경했다.

1
2
3
4
5
6
7
{
  // ...
  "scripts": {
    "build:dev": "env-cmd -f .env.dev react-app-rewired build",
    // ..
  },
}

마지막으로 API 주소를 읽어오는 부분을 변경했다.

1
2
3
4
5
export const Config = {
  API_SERVER: () => {
    return process.env.REACT_APP_API_BASE_URL;
  }
};

2. node-builder 도커 이미지 만들기

노드 환경에서 개발한 리액트 코드는 웹 브라우저에서는 실행할 수 없다. 따라서 웹 브라우저에서 실행 가능하도록 변환해 주어야 하는데 이를 트랜스파일_Transpile이라고 부른다. 또한 애플리케이션에서 사용한 의존성 NPM 라이브러리(예. Ant Design 등등)을 함께 번들링해 주어야 한다.

앞서 언급한 것처럼 리액트는 개발 환경과 실행 환경이 다르다. 실행 환경에서는 노드가 필요 없다. 따라서 이를 분리해야 한다. 리액트 코드를 트랜스파일하고 번들링하는 역할로 node-builder 도커이미지를 따로 만들었다.

1
2
3
4
5
6
7
8
9
10
FROM node:12.6.0-alpine
RUN apk update && apk upgrade && \
    apk add --no-cache git openssh
RUN mkdir -p /usr/local/node && mkdir -p /etc/node-cache
RUN npm config set cache "/etc/node-cache"
RUN npm install -g yarn
COPY ./docker/run.sh /usr/local/node
RUN chmod +x /usr/local/node/run.sh
WORKDIR /usr/src/app
ENTRYPOINT ["/bin/sh","/usr/local/node/run.sh"]

위의 도커파일로 node-builder 도커이미지 만든다.

1
docker build -t node-builder -f .

아래 도커 명령어를 실행하면 리액트 코드가 웹 브라우저에서 실행할 수 있는 코드로 만들어진다.

1
2
3
4
docker run --rm \
     -v  `pwd`/node_modules:/etc/node-cache \
     -v `pwd`:/usr/src/app \
     node-builder "yarn" "build:dev"

4. 리액트 애플리케이션 도커파일 만들기

마지막으로 애플리케이션 도커파일을 아래와 같이 만들었다. 앞서 node-builder를 통해 만들어진 코드를 NGINX 웹 서버에 복사한다.

1
2
3
4
5
6
FROM nginx:alpine
ADD ./build /usr/share/nginx/html
RUN cp /etc/nginx/conf.d/default.conf /etc/nginx/conf.d/default.conf.orig && \
    sed -i 's/listen[[:space:]]*80;/listen 9001;/g' /etc/nginx/conf.d/default.conf
EXPOSE 9001
CMD ["nginx", "-g", "daemon off;"]

배포 및 서브 도메인 분기 처리

모듈 마다 도커파일은 만들었다. 문제는 도커이미지를 어떻게 만들고 어떻게 원격 서버에 전달해서 실행시킬것인지이다. 현재로서는 단일 서버에만 배포하기 때문에 서버에서 최신 소스 코드를 받아 도커 이미지를 만들고 바로 실행시켰으며 서브 도메인은 NGINX의 proxy-pass를 통해 처리했다. 자세한 내용은 '스타트업 개발자 혼자 빠르게 싸게 서버 구축하기 - 3편'에 기술해 두었다.

단일 서버가 아닌 운영 환경처럼 여러 서버에 배포하는 경우 도커는 외부 서버에 있는 컨테이너에 접속하기 어려운 문제가 있다. 이를 해결하기 위해서는 K8s_kubernetes와 같은 도커 오케스트레이션_{Orchestration} 도구를 사용해야 하는데 이번 글의 주제에서 벗어나 설명하지 않는다.

주석

[1] 그 이유는 스타트업 개발자 혼자 빠르게 싸게 서버 구축하기 - 1편에 상세히 나와있다.

[2] 그 이유는 스타트업 개발자 혼자 빠르게 싸게 서버 구축하기 - 3편에 상세히 나와있다.

[3] Golang 1.11 버전에서 고 모듈이 옵션 기능으로 등장하였고 1.13 버전부터 본격적으로 지원한다.