[Devops] React 프로젝트 Docker이미지 만들기(Dockerizing)

React샘플 프로젝트

github에서 Springboot기반 resfulapi프로젝트 샘플을 찾던 중에 터키에 있는 외국친구의 샘플을 가져와 사용하였다.
이분이 정말 친절한게 샘플코드에 이해가 안되는 부분이 있어서 혹시나해서 메일을 보냈는데 엄청 친절하게 알려주심 (Dursun ERYILMAZ님 다시한번 감사합니다.)
https://github.com/dursuneryilmaz/Simple-Employee-Management-Tool/tree/master/emp-management-frontend

Docker이미지 만들기

react로 구현된 해당 소스코드를 도커이미지로 만들때 npm빌드도 필요하지만 실제 웹서비스를 하기위해서는 Apache나 Nginx와 같은 웹서비스를 구현해야합니다.
저는 Nginx를 사용하였고,Dockerfile은 아래와 같습니다. 프로젝트 폴더의 해당경로 /conf/conf.d/default.conf에 Nginx설정 파일이 필요합니다.

/conf/conf.d/default.conf

server {
    listen 80;

    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, PATCH, DELETE' always;
    add_header 'Access-Control-Allow-Headers' 'X-Requested-With,Accept,Content-Type, Origin' always;

    location / {
        root   /usr/share/nginx/html;
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, PATCH, DELETE' always;
        add_header 'Access-Control-Allow-Headers' 'X-Requested-With,Accept,Content-Type, Origin' always;

        index  index.html index.htm;
        try_files $uri $uri/ /index.html;


    }

    error_page   500 502 503 504  /50x.html;

    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

Dockerfile

FROM node:12.16.2 as builder

# 작업 폴더를 만들고 npm 설치
RUN mkdir /usr/src/app
WORKDIR /usr/src/app
ENV PATH /usr/src/app/node_modules/.bin:$PATH
COPY package.json /usr/src/app/package.json
RUN npm install --silent
#RUN npm install react-scripts@3.4.1 -g --silent

# 소스를 작업폴더로 복사하고 빌드
COPY . /usr/src/app
RUN npm run build

FROM nginx:1.19

# nginx의 기본 설정을 삭제하고 앱 소스에서 설정한 파일을 복사
# 소스 코드에 /conf/conf.d 파일이 있어야함
RUN rm -rf /etc/nginx/conf.d
COPY conf /etc/nginx

# 위에서 생성한 앱의 빌드산출물을 nginx의 샘플 앱이 사용하던 폴더로 이동
COPY --from=builder /usr/src/app/build /usr/share/nginx/html

# 80포트 오픈하고 nginx를 백그라운드로 실행
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

docker 이미지 만들기

docker build -t frontend-app .

docer 실행 해보기

docker run frontend-app