리액트 프로젝트 도커에 배포하기

Deploying a React Project to Docker

---

이번 포스팅은 제가 프로젝트 진행 도중에 윈도우 11로 변경할려다가 갑자기 프로젝트 사라질까봐 도커에 올릴려고 하다보니 글을 작성하게 되었어요. 이제 시작할건데 프로젝트 폴더에 가셔서 빌드를 먼저 해주세요.

npm run build

저는 빌드 하기 전에 Dockerfile이랑 리액트 SPA가 동작할 수 있도록 해주는 Nginx.conf 파일을 미리 생성을 했어요. 그런데 생성할려면 위치는 프로젝트 폴더 직전 폴더에 작성하셔야 해요. 저는 두 파일을 따로 메모장 열기 귀찮아서 cmd 창에서 작성을 했어요.

도커 파일 생성
notepad Dockerfile

도커파일 내용
# 1단계: 앱 빌드
FROM node:22.1.0-alpine AS builder
WORKDIR /app

COPY package*.json ./
RUN npm install

COPY . .
RUN npm run build

# 2단계: 정적 파일을 Nginx로 서빙
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY ./nginx.conf /etc/nginx/conf.d/default.conf

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

--------------------------------------------------------

nginx.conf 생성
notepad nginx.conf

nginx.conf 내용
server {
  listen 80;
  server_name localhost;

  root /usr/share/nginx/html; # 여기가 React 빌드된 파일들이 들어가는 곳
  index index.html;

  location / {
    try_files $uri $uri/ /index.html;
  }

  error_page 404 /index.html;
}

꼭 두 파일은 리액트 진행하는 프로젝트 바깥 폴더에 저장하셔야 해요.

위치 정정한 캡쳐

두 파일을 만드셨다면 cmd창에서 프로젝트 폴더로 이동한 후 빌드해주시면 됩니다. 꼭 도커 서버 연 상태에서 해주세요...

docker build -t 지정할 이미지 이름 .

빌드가 된 걸 확인하셨다면 이제 실행을 해볼까요?? 컨테이너를 실행해주세요. 컨테이너 실행이 완료되었다면 지정해둔 로컬 포트 번호로 브라우저에 들어가서 확인하시면 됩니다.

docker run -d -p 8080:80 --name 지정할 컨테이너명 이미지명
docker ps

추가로 docker hub에 업로드 해볼게요.

docker login
docker tag 이미지 아이디/이미지 이름
docker push 아이디/이미지 이름