[Docker] react + nginx + Dockerizing 따라하기

Docker Nginx에 React 띄워서 배포

 

Dockerfile 을 이용해서 Docker image 를 만들고 container 를 실행해보겠습니다.

 

Docker base 이미지는 nginx:latest 
React 는 build 후 build 폴더만 배포

0. 준비물

host pc에 nodejs 와 npm 이 설치되어있어야 합니다.
Centos : 2020/04/01 - [React,Node,js] - [Centos] nodejs npm 설치하기
윈도우 : 2019/12/27 - [React,Node,js] - Node js, NPM 설치하기 (윈도우10)

host pc에 create-react-app 이 설치가 안되어있다면
2020/03/27 - [React,Node,js] - [React] Create-react-app 으로 react project 만들기

 

1. React app 만들기

$ npx create-react-app test-app

react app 이 만들어졌습니다. 

만들어진 react project 의 root dir 로 이동합니다.

$ cd test-app

실행에 필요한 파일만 docker container 에서 사용할 것이기 때문에 build 합니다.

$ npm run build

build 폴더가 생깁니다.

react build 성공

 

계속해서 react project 인 test-app 폴더에서 진행합니다.

 

2. Docker image 를 만들기 위한 Dockerfile 을 생성합니다.

Dockerfile ( test-app 폴더에 Dockerfile 생성 )
$ vi Dockerfile

# nginx 이미지를 사용합니다. 뒤에 tag가 없으면 latest 를 사용합니다.
FROM nginx

# root 에 app 폴더를 생성
RUN mkdir /app

# work dir 고정
WORKDIR /app

# work dir 에 build 폴더 생성 /app/build
RUN mkdir ./build

# host pc의 현재경로의 build 폴더를 workdir 의 build 폴더로 복사
ADD ./build ./build

# nginx 의 default.conf 를 삭제
RUN rm /etc/nginx/conf.d/default.conf

# host pc 의 nginx.conf 를 아래 경로에 복사
COPY ./nginx.conf /etc/nginx/conf.d

# 80 포트 오픈
EXPOSE 80

# container 실행 시 자동으로 실행할 command. nginx 시작함
CMD ["nginx", "-g", "daemon off;"]

 

 

3. nginx.conf 파일 생성

nginx image 에 복사할 nginx.conf 를 test-app 폴더에 생성합니다.

$ vi nginx.conf

server {
    listen 80;
    location / {
        root    /app/build;
        index   index.html;
        try_files $uri $uri/ /index.html;
    }
}

80 포트에 / 경로로 들어오면 /app/build 폴더에서 index.html 을 찾음.

 

 

4. Docker image 생성.

$ docker build -t nginx-react:0.1 .

만약에 Dockerfile.nginx 처럼 작성했다면
$ docker build -t nginx-react:0.1 -f Dockerfile.nginx .

docker image 목록 확인
$ docker images
nginx-react    0.1    g34g23f23gs    1 minutes ago     127MB

요런식으로 나오겠죠.

 

5. Docker Container 실행.

$ docker run -d --name my-react-app -p 8300:80 nginx-react:0.1

# host pc 에서 8300 포트로 접속하면 container 의 80 포트로 포워딩.
# -d 는 백그라운드 실행

잘 만들어졌나 container 목록 확인.

$ docker ps -a

NAME 이 my-react-app 이고 STATUS가 Up 인게 있으면 성공입니다.

웹 브라우저를 띄워서 url 을 입력해 봅니다.

localhost:8300