[TWISTERS] Docker로 프로젝트 띄우기

• Docker란?
  Go언어로 작성된 리눅스 컨테이너 기반으로하는 오픈소스 가상화 플랫폼이다. 이 플랫폼을 이용할 때의 장점은 프로젝트 별로 환경설정이 필요하지 않다는 점이다. 사실 개발하다 보면 초반 환경구축이 너무 힘들어서 포기하고 싶을 때도 많은데 Docker를 사용하면 훨씬 간편해진다. 좀 더 개발이 진행되기 전에 먼저 Docker 컨테이너로 프로젝트를 띄울 수 있게 만들기로 했다.

Docker로 프로젝트를 띄우려면 가장 최상단의 폴더에서 docker-compose.yml 이 있어야 한다. 이걸로 띄울 프로젝트에 연관되어 있는 정보를 주어야 한다. 나의 프로젝트는 프론트엔드-백엔드-데이터베이스 이렇게 세 개가 있어서 이 세가지의 정보를 넣어주었다.

데이터베이스 관련해서는... 만약 같은 컴퓨터를 사용한다면 로컬에 데이터베이스 데이터가 남아있어서 괜찮겠지만 다른 컴퓨터를 사용하면 텅 빈 데이터베이스로 시작하게 된다. 즉, 나중에 배포를 하면 호스팅을 해야 된다는 건데 뭐... 그것도 나중에 찾아보면 되겠지... 일단은 각각의 컴퓨터에서 다른 사용자 정보 등으로 개발하려고 한다. Docker는 데이터에 대한 저장기능은 존재하지 않는다.

• docker-compose.yml

services:
  # Database Service
  db:
    image: mysql:8.0
    restart: always
    env_file:
      - .env
    environment:
      MYSQL_ROOT_PASSWORD: ${DB_PASSWORD}
      MYSQL_DATABASE: ${DB_NAME}
    ports:
      - '3306:3306'
    volumes:
      - ./data:/var/lib/mysql
      - ./init.sql:/docker-entrypoint-initdb.d/init.sql

  # Backend Service
  backend:
    build: ./backend
    restart: always
    env_file:
      - .env
    volumes:
      - ./backend:/app
      - /app/node_modules
    ports:
      - '5050:5050'
    environment:
      DB_HOST: ${DB_HOST}
      DB_USER: ${DB_USER}
      DB_PASSWORD: ${DB_PASSWORD}
      DB_NAME: ${DB_NAME}
      PORT: ${PORT}
      DATABASE_URL: mysql://${DB_USER}:${DB_PASSWORD}@${DB_HOST}:3306/${DB_NAME}
    depends_on:
      - db

  # Frontend Service
  frontend:
    build: ./frontend
    env_file:
      - .env
    volumes:
      - ./frontend:/app
      - /app/node_modules
    ports:
      - '5173:5173'
    environment:
      - VITE_API_BASE_URL=${VITE_API_BASE_URL}
      - VITE_GOOGLE_CLIENT_ID=${VITE_GOOGLE_CLIENT_ID}
    depends_on:
      - backend

그리고 이제 프론트엔드와 백엔드 각각에 그 프로젝트들을 돌릴 수 있는 정보들을 주어야 한다.

• frontend/Dockerfile

# Use Node.js as the base image
FROM node:20-alpine

# Set working directory
WORKDIR /app

# Copy package files and install dependencies
COPY package*.json ./
RUN npm install

# Copy the rest of the code
COPY . .

# Vite's default dev port
EXPOSE 5173

# Run vite dev
CMD ["npm", "run", "dev", "--", "--host"]

• backend

# Use Node.js as the base image
FROM node:20-alpine

# Set working directory
WORKDIR /app

# Copy package files and install dependencies
COPY package*.json ./
RUN npm install

# Copy the rest of the code
COPY . .

# Expose the port your backend runs on (usually 5000 or 3000)
EXPOSE 5050

# Start the app using tsx (as seen in your earlier logs)
CMD ["npm", "run", "dev"]

포스팅 작성할 때는 이렇게 간단하게밖에 쓸 수 없는데 Docker로 띄우는 것만 거의 4-5시간...? 정도는 쓴 것 같다...
일단 처음에는... ㅎㅎ... .env 파일의 존재를 잊음 ㅎㅎ...
한창 하던 중에 깨달아서 .env 파일 넣고 하니까 그 전에 셋팅해 놨던 모든 것이 리셋된 거나 마찬가지가 되었다ㅋㅋㅋ
그 뒤부터는 다시 셋팅 파일들이나 관련 코드들에서 .env 파일에서 땡겨와서 써야 하는 부분들을 다시 처리해 주어야 했다.

어쨌든 이제 돌아간다^^! 얏호^^!
프로젝트 켤 때마다 각각의 폴더에 들어가서 npm run dev 이런 거 안 쳐줘도 돼서 좋다!

• 프로젝트 시작 방법
  최상단 폴더에서 docker-compose up -d 커맨드 입력하면 끝!

• 프로젝트 종료 방법
  docker-compose down 커맨드 입력하면 끝!