docker로 react 빌드하기

docker로 react app 을 빌드하려할때 이미 빌드할때 수많은 npm 패키지들을 설치했으므로

또 다시 설치하는것을 막아야한다.

그리고 nginx 를 사용해 web server 를 만들어야 하는데 이때는 node 가 아닌 nginx 베이스이미지를 써야한다.

 

그래서 두단계로 나누어진행한다.

1단계에서 node 이미지로 npm install 을 하고 run build 를 한다.

2단계에서 nginx 이미지로 run build의 결과물을 카피한후 start nginx 한다.

 

#build phase
FROM node:alpine as builder
WORKDIR '/app'
COPY package.json .
RUN npm install
COPY . .
RUN npm run build

1단계를 Dockerfile 에 작성한다.

2단계는 그 아래에 작성하면 된다. 

# run phase
FROM nginx
# build 폴더 복사 , 다른 phase 에서 가져옴
# nginx port 
EXPOSE 80
# from , destination
COPY --from=builder /app/build /usr/share/nginx/html
#start 는 디폴트

 

여기서 카피하는것은 오직 컨테이너안의 /app/build 폴더이다.

 

이후에 docker build . 를 시작하면 정상으로 빌드된다.

ganghwiui-MacBook:frontend hwi$ docker build .
Sending build context to Docker daemon  1.455MB
Step 1/8 : FROM node:alpine as builder
 ---> 483343d6c5f5
Step 2/8 : WORKDIR '/app'
 ---> Using cache
 ---> 1d63fd9533c7
Step 3/8 : COPY package.json .
 ---> Using cache
 ---> 9276db72e695
Step 4/8 : RUN npm install
 ---> Using cache
 ---> cd2574325348
Step 5/8 : COPY . .
 ---> 6d8eb032e3e2
Step 6/8 : CMD ["npm","run","start"]
 ---> Running in e2342cbae115
Removing intermediate container e2342cbae115
 ---> a922643c9385
Step 7/8 : FROM nginx
latest: Pulling from library/nginx
54fec2fa59d0: Pull complete 
4ede6f09aefe: Pull complete 
f9dc69acb465: Pull complete 
Digest: sha256:86ae264c3f4acb99b2dee4d0098c40cb8c46dcf9e1148f05d3a51c4df6758c12
Status: Downloaded newer image for nginx:latest
 ---> 602e111c06b6
Step 8/8 : COPY --from=builder /app/build /usr/share/nginx/html
 ---> 40174cdd0e96
Successfully built 40174cdd0e96

 docker run -p 8080:80 40174cdd0e96

이렇게 포트 지정한후 ( 8080은 내맘, 80 은 Nginx 디폴트 포트) 실행하면 성공적으로 빌드할수있다.