그래봐야 코딩, 그래도 코딩

0%

Docker를 이용해 React와 Nginx를 묶어서 이미지화 하고 컨테이너화 하기

작성일 Edited on In

들어가기

React 프로젝트를 만약 서버에 배포해야 한다면, 어떻게 해야할까?

서버에 Apache나 Nginx등을 설치하고 웹 서버 설정을 한뒤, React로 build한 소스를 해당 서버에 FTP로 전송하면된다.

이런 방법도 좋지만, Docker를 사용해서 웹서버를 React와 묶어놓은 이미지가 있다면 어떤 서버든 docker engine만 설치되어 있다면 바로 실행시킬수 있을것 같다.

이런식으로 배포할경우 웹서버의 설정역시 Docker의 설정으로 관리할 수 있을것이다.

이번에는 Docker를 이용해서 React와 Nginx를 합쳐 이미지화하고 그 이미지를 컨테이너화 하여 실행해보자.

개발환경

  • windows10
  • docker desktop
  • VisualStudioCode
  • GitBash

실습

일단 테스트할 react 프로젝트를 생성하자.

1
npx create-react-app docker-react-ngnix

Docker%20React%20Nginx/Untitled.png

생성된 프로젝트으 root 경로에 Dockerfile-prod 이라는 파일을 생성하자.

여기서 파일명은 무엇으로 해도 상관 없으나 prod(production)이라고 표시해두면, Dockerfile, Dockerfile-dev, Dockerfile-prod등 배포 환경에 따라서 관리하기가 편하다.

Docker%20React%20Nginx/Untitled%201.png

그리고 해당파일을 아래처럼 채우자.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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:latest
# nginx의 기본 설정을 삭제하고 앱에서 설정한 파일을 복사
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;"]

Node, react-script, nginx 등 원하는 버전을 설정하자.

Docker%20React%20Nginx/Untitled%202.png

이미지를 생성할 Dockerfile-prod는 만들었으니, 이 Dockerfile-prod파일에서 사용하는 nginx설정 파일을 만들어 줘야 한다.

Docker%20React%20Nginx/Untitled%203.png

프로젝트 root 경로에 conf/conf.d 파일을 만들어주자.

Docker%20React%20Nginx/Untitled%204.png

그리고 해당 파일 내부를 아래처럼 채워주자.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
server {
    listen 80;

    location / {
        root   /usr/share/nginx/html;
        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;
    }
}

위 내용은 Nginx의 설정 파일이다.

이제 준비는 끝났다.

프로젝트 root 경로, 즉 Dockerfile-prod 파일이 있는 경로에 터미널을 열고 아래 명령으로 이미지를 생성하자.

1
docker build -f Dockerfile-prod -t docker-react-ngnix

위 명령어 설명

  • -f Dockerfile-prod : 해당 파일을 기반하여 docker image를 생성한다.
  • -t docker-react-ngnix : 생성할 이미지를 지정한다.

Docker%20React%20Nginx/Untitled%205.png

위 이미지에서는 마지막에 .(콤마) 가 찍혀 있지만 앞에 -f 옵션으로 Dockerfile을 지정해 주었기 때문에 없어도 될거 같지만, 반드시 찍어주어야 한다.

Docker%20React%20Nginx/Untitled%206.png

위 처럼 docker-react-ngnix 이미지가 생성 되었고, 해다 이미지에서 참조하는 nginx, node 이미지들도 다운이 되었다.

다음 명령어로 docker-react-ngnix 이미지를 컨테이너화 하고 실행시키자.

1
docker run -it -p 80:80 docker-react-ngnix

Docker%20React%20Nginx/Untitled%207.png

그리고 새로운 터미널에서 다음 명령어로 실행중인 docker 프로세스를 확인해 보자.

1
docker ps

아래처럼 컨테이너가 실행중임을 확인 할 수 있다.

Docker%20React%20Nginx/Untitled%208.png

아래처럼 브라우저에서도 정상 동작을 확인 할 수 있다.

Docker%20React%20Nginx/Untitled%209.png

참고자료

[https://codechacha.com/ko/dockerizing-react-with-nginx/](