도커 입문 30강 - 도커컴포즈 Dockerfile로 빌드와 nginx실행 한번에 하기

[실습목표]

이번 강의는 이전강의와 같이 React를 Nginx에서 실행하도록하는 목표를 공유하고있다.

차이점은 이전강의에서는 직접 build해줬지만 이번 강의에서는 build조차 자동으로 되도록 하고자 한다.

(이러한 차이점으로 인해 내 로컬에 nodeJs 환경이 없어도 도커로 빌드까지해서 실행까지 될수 있는 환경이 구축된다.)

 

[실습 전 준비사항]

이번 강의 실습을 위해 window에서 코딩한 my-app 프로젝트(react)를 docker가 있는 H2 서버로 옮겨주도록하자.

이전 강의와 구별되도록 ex09 / my-react-app-auto-build 라는 디렉토리를 만들어서 옮겨주었다.

(node_moudules는 COPY를 하지 않는다. npm install을 할 때 package.json을 참조하여 필요한 라이브러리들이 node_modules에 자동으로 생기기 때문.)

ex09 / my-react-app-auto-build 로 복사한 react프로젝트

총 5개의 파일만 H2 서버로 옮겨주었다.

 

[Dockerfile 작성하기]

FROM node:alpine as build
WORKDIR /app
COPY package.json /app
RUN npm install --silent
COPY . /app
RUN npm run build

FROM nginx
#--from=build는 위에있는 FROM으로 부터 이미지가 구워지는데 그 결과로 나온 것을 의미한다.
# 위에서 나온 결과물인 /app/build 를 /usr/share/nginx/html로 복사하라는 의미이다.
COPY --from=build /app/build /usr/share/nginx/html
ENTRYPOINT ["nginx","-g","daemon off;"]

 

설명을 덧붙이자면

위의 FROM은 npm run build를 해서 build폴더에 build된 파일들을 생성하기 위함이고, 

아래의 FROM부터는 이전 실습내용과 같이 build된 폴더를 서비스할 nginx를 위한 코드들이다.

  COPY package.json /app      #node_modules를 만들기 위해 먼저 복사

 RUN npm install --silent  #이때 node_modules가 생긴다., --silent는 터미널 출력을 최소화하는 명령어이다.

#src, public 등의 파일을 /app으로 복사한다. (이미 있는 package.json, node_moduels는 덮어쓰기 하지 않아서 복사가 되지 않는다.)
COPY . /app

RUN npm run build   #해당 명령어까지 실행시키면 build파일이 생긴다.

 

신기한 것은 하나의 Dockerfile안에 2개의 FROM을 사용해서 컨테이너를 2개 만드는 것과 비슷한 효과를 낼 수 있다는 점인데... 인터넷 검색을 해보니 멀티 스테이지 빌드라고 한다.

 

※ 멀티 스테이지 빌드 

컨테이너 이미지를 만들면서 빌드 등에는 필요하지만, 최종 컨테이너 이미지에는 필요 없는 환경을 제거할 수 있도록 단계를 나누어 이미지를 만드는 방법

 

멀티스테이지 빌드를 사용하면 빌드에는 필요하지만 최종 배포시에는 필요없는 파일들은 모두 삭제된 상태로 컨테이너가 실행되므로 좀 더 가벼운 실행환경을 만들 수 있다는 장점이 있다.

 

[Docker 빌드 및 실행하기]

#빌드하기
docker build -t react-app-auto-build ./

#확인하기
docker images

#실행하기
docker run -d -p 9011:80 react-app-auto-build

 

끝!