[MacOS] Docker + React 빌드 및 배포

1. 사전 준비

[MacOS] React 설치 하기

1.1. docker 설치

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

$ brew --cask install docker

 

2. build 하기 

yarn start 로 실행 하는 기본 포트와 충돌을 피하기 위해 

package.json 파일에서 scripts 부분의 start에 PORT 환경변수 설정을 추가 해 줍니다.

# 기존 소스
{
...
	"scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
     },
...
}

 

# 윈도우 설정 "set Port=5000 && " 추가

# Windows OS

{
  ...
  "scripts": {
    "start": "set PORT=5000 && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  ...
}

# 맥용 설정 "export Port=5000 && " 추가

 

# Mac OS
{
  ...
  "scripts": {
    "start": "export PORT=5000 && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  ...
}

 

$ yarn build

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

 

3. 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  python

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

$ docker images

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

참고 : https://memostack.tistory.com/184#toc-사전 준비 [MemoStack]