[React] Docker Nginx React를 사용해서 배포하기

지난번에는 React와 Nginx를 함께 사용해서 배포하는 작업을 진행했다. 

이번에는 React와 Nginx를 Docker를 사용해서 이미지화 시켜서 컨테이너로 클라이언트를 배포할 계획이다. 

 

환경 정보 

Server : Naver Cloud

os : Ubuntu 20

 

필요한 파일 설치 

apt install npm  // npm 설치

sudo apt-get install build-essential libssl-dev
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
source ~/.bashrc  // nvm 설치

nvm install 18.12.1 // 필요한 npm 버전 설치

npm을 설치하고 default는 10버전이기 때문에 필요한 버전이 18(이건 프로젝트에 따라 다름)이라서

nvm으로 버전을 올려줬다. 

 

apt install nginx

배포를 위해서 nginx를 설치했다. 

 

다음으로 Docker를 설치해야한다. 

설치하기 전 HTTPS를 통해서 Repository를 이용하는 것을 허용할 수 있도록 패키지들을 설치한다. 

apt-get install \
    ca-certificates \
    curl \
    gnupg \
    lsb-release

Docker에서 공식 GPG key가 있는데 이것을 추가해준다. 

GPG key는 리눅스 패키지 관리 툴이 해당 프로그램 패키지가 유효한지 확인하기 위해서 설치 전 GPG key를 사용해서 검증하는 과정이 필요하다고 한다. 

curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg

다음으로 apt를 사용해 설치하기 위해서 apt 리스트에 도커를 추가하는 작업을 한다. 

echo \
  "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu \
  $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null

 

이제 끝이다 설정을 바탕으로 apt를 업데이트하고, 도커를 설치한다. 

apt-get update
apt-get install docker-ce docker-ce-cli containerd.io

 

본격적으로 작업 시작!

React 프로젝트를 DockerFile을 사용해서 이미지화가 가능하다. 이때 파일명에 prod, dev 등 

표시해두면 배포 환경에 따라 관리하기 편하다 .

FROM node:18.12.1 as builder

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
COPY conf.d/default.conf /etc/nginx/conf.d/default.conf

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

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

하나씩 설명하자면, 

FROM node:18.12.1 as builder

사용할 Node의 버전을 지정한다. 

 

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

작업할 폴더를 만들고 npm을 설치한다. 

RUN 명령어는 커맨드를 실행하는 명령어라고 생각하면 된다. 

WORKDIR 명령어를 사용하면 cd 명령어처럼 해당 디렉토리로 이동할 수 있다. 

ENV 명령어는 환경 변수를 설정하기 위해서 사용한다. 

 

npm으로 설치할 때 --slient를 사용하는 이유는 스크립트 출력을 억제하기 위해서다. 

 

COPY . /usr/src/app
RUN npm run build

Dockerfile이 있는 폴더의 코드를 작업하기 위한 폴더로 복사하고, 빌드를 실행한다. 

 

FROM nginx:latest
COPY conf.d/default.conf /etc/nginx/conf.d/default.conf

nginx를 사용할 것이기 때문에 nginx의 버전을 지정하고, 기본 설정을 삭제 후 프로젝트에서 사용할 

설정 파일을 복사한다. 

 

하지만 아직 설정 파일은 작업 안했다. 혹시라도 본인은 conf라는 것을 만들지 않았다고 걱정할 필요 없다.

뒤에 다 나온다~

 

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

앞서 빌드한 결과물을 nginx의 샘플 앱이 사용하던 폴더로 이동시킨다. 

 

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

80번 포트를 오픈하고 nginx를 실행한다. 

 

이로써, node, react-script, nginx의 버전을 설정하고 필요한 작업을 마쳤다. 

다음으로 nginx 설정 파일을 만들어준다. 

// config.d/default.conf

server {
    listen 80;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
    
    location /api {
        proxy_pass http://localhost:8000;
    }
    
    error_page   500 502 503 504  /50x.html;
    
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

기본적인 설정을 따로 없지만 /api의 경우 서버 요청 시 설정할 Proxy 설정이라 꼽사리 껴봤다

 

이제 설정을 끝났다. Docker 이미지를 생성하면 된다!

docker build -f Dockerfile-prod -t deploy .

-f Dockerfile-prod : 해당 Dockerfile을 기준으로 Docker Image를 생성한다. 

-f deploy : 생성할 이미지를 지정한다. 

 

마지막의 . 은 PATH가 . 임을 나타낸다. 

 

docker run -it -p 80:80 이미지명
or 
docker run -it -p 80:80 -d 이미지명

실행하면 프론트엔드 확인이 가능하다. 

-d 옵션은 백드라운드에서 확인하는 옵션이다. 

 

이후 실행 상태를 확인하고 싶다면 

docker ps

 

실행을 중지하려면 

docker stop 컨테이너명

실행하면 된다.