Docker React Vite 배포

Docker Image 생성

• FROM node 사용을 위한 노드 이미지 다운로드

• Dockerfile 작성 컨테이너를 만들기 위한 명령어 세트로 이미지 구축, 컨테이너 작동 방식, 필요한 파일 및 디렉토리 등을 정의합니다.

# node 이미지 기반 Docker 이미지 생성
FROM node

# 작업 디렉토리 설정
WORKDIR /app

# COPY <복사할 경로/파일명> <붙여넣을 디렉토리>
# package.json 작업 디렉토리에 복사
# . = ./ 과 동일 현재 작업 디렉토리 의미
COPY package.json .

# 의존성 설치 명령어 실행
RUN npm install
# 현재 디렉토리의 모든 파일을 도커 컨테이너의 작업 디렉토리에 복사
COPY . .

# 3000번 포트 노출
EXPOSE 3000

# npm start 스크립트 실행
CMD ["npm","run","dev"]

• package.json 복사 후 모든 파일을 복사하는 이유
  Docker 이미지 빌드 시 각 줄은 레이어를 형성하며, 캐시됩니다. 이는 빌드 시간을 최적화하고, 변경된 레이어만 다시 빌드하도록 돕습니다.
  npm install 단계는 종속성이 변경될 때만 실행되어야 종속성이 변경되지 않았을 때 캐시된 레이어를 재사용하여 빌드 시간을 줄일 수 있습니다.
• RUN / CMD
  RUN : 이미지를 구축 시 실행되는 명령어로, 이미지 레이어를 생성하고 환경을 설정
  CMD : 컨테이너 시작 시 기본적으로 실행되는 명령어를 지정

 

• .dockerignore 작성
  Docker Image 빌드 시 무시할 파일과 디렉토리를 지정하는 구성 파일로 .gitignore 파일과 유사하게 작동합니다.

node_modules
Dockerfile.dev
.git
.gitignore
.dockerignore
.env

Docker Image Build

# -t : image name 설정
# docker build <-t> <image-name> <build-directory>
$ docker build -t test-img .
# Docker Image List 생성된 이미지 확인
$ docker image ls

ERROR: failed to solve: failed to read dockerfile: open … no such file or directory

1. 파일의 이름이 틀렸거나
2. 경로가 틀렸거나
3. 파일 저장이 되지 않았거나
4. 파일이 없거나

필자의 경우 .Dockerfile 이름이 틀린 경우였고 ”Dockerfile” 똑바로 적으니 에러가 해결되었다.

Vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// <https://vitejs.dev/config/>
export default defineConfig({
  server: {
    host: '0.0.0.0',
    port: 3000,
  },
  plugins: [react()],
})

1. server.host
   서버가 수신할 IP 주소를 지정합니다. 모든 주소를 수신하려면 0.0.0.0 또는 true로 설정
2. server.port
   서버 포트를 지정하며, 해당 포트가 사용 중일 경우 Vite는 다음 사용 가능한 포트를 자동으로 찾습니다.

Docker Container 실행

docker container run -d -p 3002:3000 --name test-con test-img

Docker Bind Mount / Volume

코드 수정마다 컨테이너 종료/삭제 > 이미지 삭제 > 이미지 빌드 > 컨테이너 생성/시작과 같은 반복되는 작업을 하지 않아도 됩니다.

Docker Bind Mount

호스트의 특정 파일, 디렉터리가 컨테이너에 직접 연결되며 호스트의 절대 경로로 참조됩니다. 성능이 매우 뛰어나지만 특정 디렉터리 구조를 사용할 수 있는 호스트의 파일 시스템에 의존합니다.

# pwd : 현재 작업 중인 디렉터리의 절대 경로를 출력하는 명령어
# Windoe : ${pwd} / Mac : $(pwd)
docker run -v ${pwd}/src:/app/src -d -p 3002:3000 --name test-con test-img

• Local/Docker Container 프로젝트 수정 시 반영이 됩니다.

Docker Volume

Docker가 호스트의 특정 디렉토리를 관리하며, 이 디렉토리는 Docker 내에 생성됩니다. 데이터 백업이 쉽고 컨테이너 간 데이터 공유가 가능하며 호스트 파일 시스템의 구조에 의존하지 않습니다.

docker run -p 3002:3000 -v test-vol:/app --name test-con test-img

• Docker Container 프로젝트 수정 시 바로 반영이 됩니다.

Docker NginX React Vite 배포

🙏🏻

Bang Joo Hyeon