배포 - 운영환경을 위한 도커 image를 위한 Dockerfile작성하기

Nginx를 포함하는 리액트 운영환경 이미지 생성

일단 image생성을 위한 Dockerfile을 작성한다.

 

Dockerfile.dev -리액트 개발환경에서 필요한 이미지를 생성한다.

Dockerfile - 리액트 운영환경에서 필요란 이미지를 생성한다.

 

개발환경 도커파일과 운영환경 도커 파일 비교

오른쪽 Dockerfile의 FROM부터 CMD까지 명령어는 운영서버에 올리기위한 build 파일을 만들기 위한 과정이다. 그리고 그렇게 build된 파일을 Nginx가 브라우저를 통해 오는 요청에 따라 적절한 파일을 제공해주는 것이다.

 

그렇게 하기위해서는 먼저 build된 정적인 파일이 존재를 해야 하므로 CMD 명령어로 npm run build 까지 해준다 그리고 그 다음엔 Nginx 서버를 구동하기 위한 이미지가 필요하다. 즉 Nginx를 시작해야 하는 단계인 것이다. 이 단계에서 운영을 위한 오른쪽 Dockerfile에 Nginx구동을 위한 설정을 넣어준다.

 

운영을 위한 Dockerfile은 크게 2가지 단계로 이루어져있다.

FROM node:alpine as builder

WORKDIR '/usr/src/app'

COPY package.json .

RUN npm run install

COPY ./ ./

RUN npm run build


FROM nginx

COPY --from=builder /usr/src/app/build /usr/share/nginx/html

첫번째는 빌드 파일들을 생서하는 것이고(Builder Stage)

두번째는 Nginx를 가동하고 첫번째 단계에서 생성된 빌드폴더의 파일들을  브라우저의 요청에 따라 제공하여 준다.(Run Stage)

 

builder stage에서 생성된 것은 build폴도 통째로 최종 working 디렉토리에 들어간다.

run stage에서는 우선 Nginx를 가동해야 한다. 그리고 Nginx를 가동한 것을 이용해서 브라우저의 요청에 따라 build파일을 제공해 주면 된다.

 

--from=builder

다른 Stage에 있는 파일을 복사할때 다른 Stage 이름을 명시한다.(1단계에서 as builder로 별칭을 주었다.) 

 

/usr/src/app/build => /usr/share/nginx/html

builder stage에서 생성된 파일들은 /usr/share/nginx/html에 복사가 되어 nginx가 웹 브라우저의 http요청이 올때 마다 알맞은 파일을 전해 줄 수 있게 만든다.

 

/usr/share/nginx/html

이 경로로 build 파일들을 복사 시켜주는 이유는 이 경로에 파일을 넣어두면 Nginx가 알아서 Client에서 요청이 들어 올때 알맞은 정적 파일들을 제공해준다. 즉 build된 폴더와 파일을 Nginx가 알맞게 사용할 수 있는 경로에 복사해 주는 것이다. 파일이 복사 된는 경로는 설정을 통해서 바꿀 수 있다.

 

이렇게 작성한 Dockerfile로 이미지 build

docker build .

 

생성한 이미지를 이용해서 app을 실행

docker run -p 8080:80 이미지이름 // Nginx의 기본 사용포트는 80 이다.

 

 

 

[출처 -  https://www.inflearn.com/course/%EB%94%B0%EB%9D%BC%ED%95%98%EB%A9%B0-%EB%B0%B0%EC%9A%B0%EB%8A%94-%EB%8F%84%EC%BB%A4-ci/dashboard]