[ReactJS] ReactJS + Nginx + Docker 구성하기

개요

React JS를 활용해서 웹사이트를 구축하려고 합니다. Node를 활용해서 서버를 운영해도 되고, Apache를 이용해도 됩니다. 그런데 여기에서는 웹서버를 Nginx를 이용하고 별도 설치하지 않고 Docker를 활요해서 시스템을 구축해보도록 하겠습니다.

사전준비

• React JS 프로젝트 구성 (http://oofbird.net/19 참고)
• Docker 설치 (Ubuntu일 경우 http://oofbird.net/22, Windows일 경우 http://oofbird.net/33 참고)

Dockerfile 작성

Docker 이미지를 생성하기 위하여, React JS 프로젝트 폴더에 Dockerfile을 생성하겠습니다.

그리고, 첫줄에 사용할 Base Image를 지정합니다. Nginx에 대한 Docker 정보는 여기에서 확인이 가능합니다.

FROM nginx:latest

그 다음으로 추가정보를 위한 유지보수 관리자를 기입해놓겠습니다.

LABEL maintainer "oofbird.net <iju707@gmail.com>"

사용되는 Nginx의 기본 웹 디렉터리의 주소가 /usr/share/nginx/html 이므로, React JS에 대한 Production Build 주소인 "./build"를 추가하겠습니다.

COPY ./build /usr/share/nginx/html

나머지 EXPOSE나 ENTRYPOINT 등은 Nginx 기본을 사용하면 되므로 추가하지 않아도 됩니다.

 

그럼 최종 Dockerfile의 구성은 다음과 같이 될 것 입니다.

FROM nginx:latest
LABEL maintainer "oofbird.net <iju707@gmail.com>"

COPY ./build /usr/share/nginx/html 

Docker Build Command 추가

일반적으로는 다음 명령을 통해서 이미지 생성이 가능합니다.

npm run build docker build -t reactjs:1.0 .

React JS를 Production build 수행하고, reactjs:1.0 이라는 태그로 Docker image를 작성하라 라고 보시면 됩니다.

그런데 명령을 실행하기 조금 귀찮으니, package.json 파일에 명령을 추가하겠습니다.

{
...
	"scripts": {
		"start": "react-scripts start",
		"build": "react-scripts build",
		"test": "react-scripts test --env=jsdom",
		"eject": "react-scripts eject",
		"docker": "react-scripts build && docker build -t reactjs:1.0 ."
	}
}

기본으로 들어가는 명령에 docker를 추가하였습니다. 위에 기록한 명령을 &&으로 같이 수행하라는 것 입니다. 그럼 다음과 같이 명령을 수행하면 동일한 결과를 얻을 수 있습니다.

npm run docker

결과확인하기

이미지 까지 생성이 완료되면 Docker Container를 생성해서 결과를 확인할 수 있습니다.

docker run -dt -p 80:80 reactjs:1.0

reactjs:1.0 이미지를 기반으로 Host의 80 포트와 Container의 80포트를 연결하고 백그라운드로 수행하라는 것입니다.

그럼 해당 웹에 접속해보면 다음과 같이 React JS 페이지가 표출됨을 볼 수 있습니다.

 

Tip

Windows로 수행하실 경우에는 ip가 localhost가 아닐 수 있습니다. 그럴 경우에는 다음과 같이 명령을 수행하면 실제 Docker Machine이 어떤 IP로 수행되는지 확인할 수 있습니다.

docker-machine ip