React Application을 Docker 빌드하고 배포하기 (MacOSX)

사전 준비

본 글에서는 Homebrew를 이용하여 node, yarn, docker를 설치한다.

 

node.js 설치

$ brew install node

 

yarn 설치

$ brew install yarn

 

docker 설치

homebrew 최신버전에서는 brew cask install 대신에 brew --cask install 을 사용한다.

$ brew --cask install docker

 

React 프로젝트 생성

# create-react-app을 이용하여 리액트 프로젝트 생성할 예정
$ yarn add global create-react-app

 

프로젝트 생성

$ yarn create react-app test-app

 

만들어진 app을 실행시켜 본다.

$ cd test-app
$ yarn start

(저는 package.json에서 버전 정보를 보여주도록 코드를 살짝 수정했습니다 -> 중요하지 않음)

실행

그리고, 빌드를 해본다.

$ yarn build

빌드가 끝나면, root 경로에 build 디렉토리가 생기고 그 하위에 html, css, js가 위치하게 된다.

 

Docker Build를 위한 Dockerfile 작성

위에서 빌드를 마쳤다면, 도커 빌드를 하기 위해 필요한 Dockerfile을 작성한다.

# Base 이미지
FROM node:14.15.1-alpine3.12

# 빌드된 산출물을 실행시키기 위해 필요한 serve 모듈
RUN npm install -g serve

# 작업 공간
RUN mkdir /app
WORKDIR /app

# 빌드된 산출물 도커 이미지로 복사
RUN mkdir ./build
COPY ./build ./build

# 실행 명령어
ENTRYPOINT ["serve", "-s", "build"]

 

Docker Build를 한다.

$ docker build -t test-app:1.0.0.0 .

[+] Building 2.8s (11/11) FINISHED                                                                                                                         
 => [internal] load build definition from Dockerfile                                                                                                  0.0s
 => => transferring dockerfile: 37B                                                                                                                   0.0s
 => [internal] load .dockerignore                                                                                                                     0.0s
 => => transferring context: 2B                                                                                                                       0.0s
 => [internal] load metadata for docker.io/library/node:14.15.1-alpine3.12                                                                            2.6s
 => [1/6] FROM docker.io/library/node:14.15.1-alpine3.12@sha256:ba8661b07004a0aedfbba12b08ac78e3f02c5ee3b7a68871b41d0e7ea5711c00                      0.0s
 => [internal] load build context                                                                                                                     0.0s
 => => transferring context: 1.16kB                                                                                                                   0.0s
 => CACHED [2/6] RUN npm install -g serve                                                                                                             0.0s
 => CACHED [3/6] RUN mkdir /app                                                                                                                       0.0s
 => CACHED [4/6] WORKDIR /app                                                                                                                         0.0s
 => CACHED [5/6] RUN mkdir ./build                                                                                                                    0.0s
 => CACHED [6/6] COPY ./build ./build                                                                                                                 0.0s
 => exporting to image                                                                                                                                0.0s
 => => exporting layers                                                                                                                               0.0s
 => => writing image sha256:5954c3a7d9835b74b4edd8f5d9711f8036e32fee9dd7c40ee1d3460386e0077c                                                          0.0s
 => => naming to docker.io/library/test-app:1.0.0.0  

정상적으로 빌드가 끝났다면, 이미지가 만들어졌을거다.

$ docker images

REPOSITORY   TAG       IMAGE ID       CREATED       SIZE
test-app     1.0.0.0   5954c3a7d983   9 hours ago   125MB

 

Docker Run

이제 만들어진 docker 이미지를 이용하여, 실행해본다.

 

serve를 이용하여 리액트 앱을 실행하면 기본적으로 5000번 포트로 실행된다.

• 포트 설정을 할때 (3000번이 아닌) 5000번으로 해야 함

$ docker run --rm --name testApp -d -p5000:5000 test-app:1.0.0.0

 

확인

오류 없이 실행되었다면, http://localhost:5000 으로 접속해본다.

도커 배포 성공

그리고, 컨테이너도 확인해보자

$ docker ps

CONTAINER ID   IMAGE              COMMAND            CREATED              STATUS              PORTS                    NAMES
bc1d8a2d070e   test-app:1.0.0.0   "serve -s build"   About a minute ago   Up About a minute   0.0.0.0:5000->5000/tcp   testApp