소개

만나서 반갑습니다, 최근 Docker, Kubernetes 근처를 만지는데 빠져 있습니다.
이번은 Docker 이미지의 경량화에 도전해 보았습니다!

이번은 create-react-app 커멘드를 이용해 디폴트로 작성한 것을 컨테이너화하고 있습니다.

사전 준비

create-react-app로 앱 만들기

// アプリ作成
$ create-react-app sample-react-app
$ cd sample-react-app

문제 Dockerfile

Dockerfile을 준비합니다. 흐름으로는
- production 용 build
- 정적 파일을 실행하는 모듈을 설치, 실행

라는 느낌입니다.

Dockerfile

FROM node:12
COPY . /react-app
WORKDIR /react-app
RUN npm install && npm run build && npm install -g serve
CMD ["serve","-s","build" ]

이것으로 디폴트라면 5000번으로 Listen하기 때문에 이하와 같이 포트 포워드 해 실행하면 localhost:5000 로 어플리가 움직이는 것을 확인할 수 있다고 생각합니다.

$ docker run -p 5000:5000 sample-react-app:0.0.1

어제까지 나는 오! React 앱 컨테이너화할 수 있었으면 좋겠습니다.
하지만 생각했습니다.

결국 정적 파일을 실행하는 것만으로 node의 환경 필요 없어?

덧붙여서 여기에서 Docker 이미지의 크기를 보면 ...

$ docker images
REPOSITORY                                                   TAG                 IMAGE ID            CREATED             SIZE
sample-react-app                                             0.0.1               6e7bc9096dd7        9 minutes ago       1.31GB

... 그렇습니다.

다만, git에 production의 파일군을 올리거나는 그렇게 하지 않을까 생각하기 때문에, CI툴이라든지 사용해 git의 리포지터리로부터 빌드해 나간다면 npm install, npm run build는 Docker로 빌드해 가는 단계에서 원한다고 생각합니다.

그래서 멀티 스테이지! 이것이 있잖아.

그래서 멀티 스테이지를 사용하여 production의 파일군을 nginx 쪽으로 가져 가는 것을 시도했습니다.

개선 Dockerfile

개선 Dokerfile

#第一段階(productionファイル生成まで)
FROM node:12 as node
COPY . /react-app
WORKDIR /react-app
RUN npm install && npm run build

#第二段階(一段階目のコンテナの中身から静的ファイル群だけをコピーする)
FROM nginx:1.19.2-alpine
COPY --from=node ./react-app/build /usr/share/nginx/html
CMD nginx -g "daemon off;"

두근 두근 시작입니다. . . 태그를 0.0.2로 만들고 빌드하고 실행해보십시오.

$ docker build -t sample-react-app:0.0.2 .
$ docker run -p 5000:80 sample-react-app:0.0.2

안전하게 시작할 수있었습니다!


그리고 크기는 ...

$ docker images
REPOSITORY                                                   TAG                 IMAGE ID            CREATED             SIZE
sample-react-app                                             0.0.2               9148ac06ddbe        3 minutes ago       22.5MB

꽤 똑똑해졌습니다! 사이즈만이라면 1/60이 되었습니다!

결론

개인적으로 여기까지 극적으로 바뀌었다고 상당한 달성감을 가졌습니다!
향후는 컨테이너화만으로 만족하지 않고, 어떻게 만들어 갈지도 차분히 생각해 보고 싶습니다.