docker-compose 개발 환경 만들기

건담아빠 2024. 12. 9. 17:37

nginx + next.js(next-ts-app) + mariaDB + springboot(backend) 구성으로 설정해 보려고 한다.

1. 종류 및 설치방법

1.1. Docker Desktop란?

Docker Desktop은 Docker 컨테이너 기반의 애플리케이션을 로컬 개발 환경에서 쉽게 실행하고 관리할 수 있도록 제공되는 GUI 기반의 도구이다. Docker의 주요 기능을 그래픽 사용자 인터페이스(GUI)와 명령줄 인터페이스(CLI)로 모두 사용할 수 있어, 초보자부터 숙련된 개발자까지 편리하게 Docker를 사용할 수 있다.

비상업적 용도는 무료, 상업적 용도로는 유료로 전환되어 필자는 현재 Rancher 및 Colima를 사용하고 있다.

1.2. Rancher란?

Rancher는 여러 Kubernetes 클러스터를 중앙에서 관리할 수 있는 오픈 소스 플랫폼이다. 다양한 환경(온프레미스, 클라우드 등)에 분산된 Kubernetes 클러스터를 통합적으로 운영, 관리, 모니터링하며, DevOps 팀이 컨테이너 기반 애플리케이션을 보다 효율적으로 개발, 배포, 운영할 수 있도록 지원한다.

설치 방법은 MacOS에 Rancher 설치 방법을 참고 바란다.

1.3. Colima란?

Colima는 가볍고 효율적인 컨테이너 관리 도구로, Docker Desktop을 대체하거나 보완하는 데 적합하고 필자는 주로 Docker Desktop의 라이선스 제약을 피하고 싶을 때 사용하였다.

설치 방법은 Colima란를 참고 바란다.

필자는 오라클을 로컬에서 띄우려고 했더니 Rancher에서 제약이 있어서 Colima에서 오라클을 설치해 보았다.

2. 사용 방법

docker-compose.local.yml

services:
  next-ts-app:
    image: gundam/nextjs:1.0.0
    container_name: t1-next-ts-app
    build:
      context: ./next-ts-app/src
      dockerfile: local.Dockerfile
    volumes:
      - ./next-ts-app/src:/app # 전체 소스 폴더를 마운트
    restart: always
    # ports:
    #   - "3000:3003"
    # depends_on:
    #   - backend
    networks:
      - my_network

  nginx:
    image: nginx:latest
    container_name: t1-nginx
    # build:
    #   context: ./nginx
    #   dockerfile: local.Dockerfile
    volumes:
      - ./nginx/conf/conf.d/default.conf:/etc/nginx/conf.d/default.conf
    restart: always
    ports:
      - ${TEST_NGINX_PORT}:80
    depends_on:
      - next-ts-app
    networks:
      - my_network

  mariadb:
    image: mariadb:10.6.8
    container_name: t1-mariadb
    restart: unless-stopped
    environment:
      - MYSQL_ROOT_PASSWORD=$MYSQL_ROOT_PASSWORD
      # - MYSQL_DATABASE=$MYSQL_DATABASE
    ports:
      - 3307:3306
    volumes:
      - /Users/deokjoonkang/dev/opt/database/data/react-and-java/mariadb:/var/lib/mysql
    user: "1000:1000"
    networks:
      - my_network

networks:
  my_network:
    driver: bridge

.env 파일

환경변수를 지정하고 ${TEST_NGINX_PORT}와 같이 사용이 가능하다.

# 데이터베이스 설정
MYSQL_ROOT_PASSWORD=test1234@
# MYSQL_DATABASE=sample_db
# MYSQL_USER=sample_user
# MYSQL_PASSWORD=sample_password

TEST_NGINX_PORT=3005

3. 설정파일

3.1. nginx

conf/conf.d/default.conf

server {
    listen 80;
    # server_name example.com;

    location / {
        proxy_pass http://next-ts-app:3003;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
    
}

local.Dockerfile

이렇게도 사용할 수 있지만 필자는 docker-compose에서 설정한 이미지로 사용하였다.

# Use the Nginx image from Docker Hub
FROM nginx:stable-alpine

# Remove the default Nginx configuration file
# RUN rm /etc/nginx/conf.d/default.conf

# COPY ./conf/conf.d/default.conf /etc/nginx/conf.d/default.conf

3.2. next.js

local.Dockerfile

FROM node:21.1.0 as dev

RUN mkdir /app
WORKDIR /app

# ENV NODE_ENV production

COPY package*.json ./
COPY yarn.lock ./
COPY .env.local ./

RUN yarn

EXPOSE 3000

CMD ["yarn" , "dev"]

.env.local

PORT=3003

NEXT_PUBLIC_ENV=LOCAL

3.3. mariaDB

/Users/deokjoonkang/dev/opt/database/data/react-and-java/mariadb 경로를 생성하고 권한을 준다.

$ sudo chmod -R 777 /Users/deokjoonkang/dev/opt/database/data/react-and-java/mariadb

좀더 옵션들이 많이 있지만 간단하게만 설정하고 이후에 좀더 세밀하게 설정해보자.

4. 실행

컨테이너 시작 (builld 하면서 백그라운드 실행)

`docker-compose.local.yml`에서 설정되어 있는 Dockerfile 및 설정 값으로 `--build`옵션으로 이미지를 빌드하고 `-d` 옵션으로 백그라운드로 컨테이너를 시작한다.

$ docker-compose -f docker-compose.local.yml up --build -d

컨테이너 중지 및 삭제

`docker-compose.local.yml`에서 설정된 컨테이너들을 모두 중지하고 삭제한다.

$ docker-compose -f docker-compose.local.yml down

성공

참고

디렉토리 구조

참고로 networks는 컨테이너간 통신이 되도록 추가해 줘야 합니다.

https://github.com/dchkang83/react-and-java