[React, Docker] Docker로 React 배포하기

지금까지는 vercel과 같은 배포 플랫폼에 의존했지만, 직접 CI/CD 파이프라인을 구축해보고 싶었고 그에 대한 시작으로 Docker로 React 배포를 시도한다.

Docker로 배포했을 때의 장점은 Local 환경과 Container 환경을 똑같이 만들고 그대로 배포하여, 환경 설정에서의 오류와 디버깅 시간을 줄여줄 수 있다는 것이다.

또한 오류가 나더라도 Dockerfile를 수정하며 오류를 고칠 수 있어 디버깅에도 훨씬 용이하다는 생각이 든다.

Docker의 기본

Docker 시작

Docker 설치

brew install --cask docker

Docker 설치 확인

docker

mysql 8 버전 다운로드

docker pull mysql:8

다운 받은 이미지 확인

docker images

MySQL 실행

docker run --name mysql-tutorial -e MYSQL_ROOT_PASSWORD=1234 \ 
-d -p 3306:3306 -v {Host_dir:Container_dir} mysql:8

--name : 컨테이너 이름 지정
-e : 환경변수 설정
-d : (daemon) 백그라운드에서 실행
-p : 포트 바인딩
-v : 볼륨 마운트(폴더 공유)
맨 마지막 : 이미지

실행 중인 컨테이너 확인

docker ps

실행 중인 컨테이너 멈추기

docker stop mysql-tutorial

작동이 멈춘 컨테이너 확인

docker ps -a

컨테이너 삭제

docker rm {container}		# 멈춘 컨테이너 종료
docker rm -f {container} 	# 실행 중인 컨테이너도 종료

컨테이너 진입

docker exec -it mysql-tutorial /bin/bash

MySQL 실행

mysqld -u root -p

Dockerfile 예시

FROM pytorch/pytorch:1.13.1-cuda11.6-cudnn8-runtim

COPY . /app
WORKDIR /app
ENV PYTHONPATH=/app
ENV PYTHONUNBUFFERED=1

RUN pip install pip==23.0.1 && \
	pip install poetry==1.2.1 && \
    poetry export -o requirements.txt &&\
    pip install -r requirements.txt
    
CMD ["python", "main.py"]

FROM : 이미지 이름:태그
COPY {Local_dir} {Container_dir} : 파일 복사
WORKDIR : 컨테이너 내에서 커맨드를 어디서 실행할 지 정하기
ENV : 환경 변수 지정(파이썬의 경우 보통 위 두 값을 지정)
RUN : 실행할 명령어들
CMD [실행할 명령어, 인자] : 세팅 후에 실행할 명령어 지정

도커 이미지 빌드

docker build -t 02docker:latest .

-t {이미지 이름:태그} : default 태그는 latest
맨 마지막 인자 : Dockerfile의 경로

그 외 Dockerfile 명령어

• EXPOSE : 컨테이너 외부에 노출할 포트

Dockerhub

연동하기

docker login

Tag 설정

docker tag 02-docker:latest {아이디}/02-docker:latest

Dockerhub push

docker push {이미지 이름:태그}

기본적인 내용은 위와 같고, 이제 위 내용을 기반으로 React를 배포할 이미지를 만들어보자.

React Image 제작

DockerFile 작성

DockerFile의 위치는 프로젝트의 root 디렉토리이다.

# DockerFile
# DockerHub에서 버전에 맞는 이미지를 찾아주자
FROM node:19.6.1-alpine3.17

WORKDIR /app
COPY package.json .
RUN npm install
COPY . .

EXPOSE 3000

CMD ["npm", "start"]

# .dockerignore
/node_modules
/.pnp
.pnp.js

/coverage

/build

.DS_Store
.env
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log\*

.git
.gitignore

위와 같이 도커파일과 dockerignore을 작성해주고, 빌드를 해주자.
빌드하기 전엔 도커 daemon이 실행된 상태여야 한다!

docker build -t react-image .

위 명령어를 실행하면 이미지가 빌드된다.

docker run --name react-app -e {ENV_KEY}={ENV_VALUE} \ 
-d -p 3000:3000 react-image

localhost:3000 으로 접속해보면, 잘 띄워져있는 것을 확인할 수 있다!