들어가기
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 |
생성된 프로젝트으 root 경로에 Dockerfile-prod 이라는 파일을 생성하자.
여기서 파일명은 무엇으로 해도 상관 없으나 prod(production)이라고 표시해두면, Dockerfile, Dockerfile-dev, Dockerfile-prod등 배포 환경에 따라서 관리하기가 편하다.
그리고 해당파일을 아래처럼 채우자.
1 | FROM node:12.16.2 as builder |
Node, react-script, nginx 등 원하는 버전을 설정하자.
이미지를 생성할 Dockerfile-prod는 만들었으니, 이 Dockerfile-prod파일에서 사용하는 nginx설정 파일을 만들어 줘야 한다.
프로젝트 root 경로에 conf/conf.d 파일을 만들어주자.
그리고 해당 파일 내부를 아래처럼 채워주자.
1 | server { |
위 내용은 Nginx의 설정 파일이다.
이제 준비는 끝났다.
프로젝트 root 경로, 즉 Dockerfile-prod 파일이 있는 경로에 터미널을 열고 아래 명령으로 이미지를 생성하자.
1 | docker build -f Dockerfile-prod -t docker-react-ngnix |
위 명령어 설명
- -f Dockerfile-prod : 해당 파일을 기반하여 docker image를 생성한다.
- -t docker-react-ngnix : 생성할 이미지를 지정한다.
위 이미지에서는 마지막에 .(콤마) 가 찍혀 있지만 앞에 -f 옵션으로 Dockerfile을 지정해 주었기 때문에 없어도 될거 같지만, 반드시 찍어주어야 한다.
위 처럼 docker-react-ngnix 이미지가 생성 되었고, 해다 이미지에서 참조하는 nginx, node 이미지들도 다운이 되었다.
다음 명령어로 docker-react-ngnix 이미지를 컨테이너화 하고 실행시키자.
1 | docker run -it -p 80:80 docker-react-ngnix |
그리고 새로운 터미널에서 다음 명령어로 실행중인 docker 프로세스를 확인해 보자.
1 | docker ps |
아래처럼 컨테이너가 실행중임을 확인 할 수 있다.
아래처럼 브라우저에서도 정상 동작을 확인 할 수 있다.