[Docker] 1일차 실습 - docker-compose.yml + 설정 문법

 

🤓도커 첫걸음✏️

도커를 공부한 첫날의 내용을 개념과 실습으로 나누어 정리하는 중이다. 개념편은 🔗링크로...

이번 글은 🔗실습1편에서 이어지는 실습2 편이다!!

7. [실습] Docker Compose로 프론트엔드, 백엔드, DB 3계층 서버 구성하기

이번 장에서는 Docker Compose를 이용해서 여러 개의 서비스Container를 한 번에 띄우는 실습을 진행한다.

Vue.js 프론트엔드, Spring Boot 백엔드, MariaDB를 연동하여 전체 풀스택 프로젝트 환경을 손쉽게 관리할 수 있게 만든다.

---

7-1. 프로젝트 폴더 구조 설정

아래와 같이 프로젝트를 한꺼번에 관리하기 편하게 설정해둔다.

fullstack/
├── backend/
│   ├── build/libs/demo-0.0.1-SNAPSHOT.jar
│   └── db/ (MariaDB 데이터 저장소)
├── frontend/
│   ├── nginx/dist/ (Vue 빌드 결과물)
│   └── nginx/default.conf (NGINX 설정 파일)
└── docker-compose.yml

---

7-2. docker-compose.yml 파일 작성

작성한 docker-compose.yml 내용⤵️

version: "3"

services:
  frontend:
    image: nginx:latest
    ports:
      - 80:80
    volumes:
      - ./frontend/nginx/dist:/usr/share/nginx/html
      - ./frontend/nginx/default.conf:/etc/nginx/conf.d/default.conf

  backend:
    image: openjdk:17-ea-slim-buster
    ports:
      - 8080:8080
    volumes:
      - ./backend/build/libs/demo-0.0.1-SNAPSHOT.jar:/app.jar
    command: ["java", "-jar", "/app.jar"]

  db:
    image: mariadb:latest
    ports:
      - 3306:3306
    volumes:
      - ./backend/db:/var/lib/mysql
    environment:
      - MARIADB_ROOT_PASSWORD=qwer1234
      - MARIADB_DATABASE=web

---

docker-compose.yml 구성 요소 설명 (문법)

항목	설명
version	Compose 파일의 버전. 일반적으로 "3" 또는 "3.x" 사용.
services	컨테이너 서비스를 정의. frontend, backend, db 세 가지 서비스가 정의됨. 그 아래 들여쓰기하고 {컨테이너의 이름}: 으로 시작해서 각각의 docker run 설정을 해주면 된다.

 

🖥️ frontend 서비스

  frontend:
    image: nginx:latest
    ports:
      - 80:80
    volumes:
      - ./frontend/nginx/dist:/usr/share/nginx/html
      - ./frontend/nginx/default.conf:/etc/nginx/conf.d/default.conf

항목	설명
image	nginx 최신 버전 이미지 사용
ports	호스트 80포트를 컨테이너의 80포트와 연결
volumes	(왼쪽) 로컬 환경 현재 프로젝트의 dist 폴더를 : (오른쪽) /usr/share/nginx/html에 연결해 정적 파일 서비스 default.conf를 NGINX 설정으로 연결

 

---

💻 backend 서비스

 backend:
    image: openjdk:17-ea-slim-buster
    ports:
      - 8080:8080
    volumes:
      - ./backend/build/libs/demo-0.0.1-SNAPSHOT.jar:/app.jar
    command: ["java", "-jar", "/app.jar"]

항목	설명
image	말그대로 OpenJDK 17-ea-slim-buster 버전의 이미지를 사용한다는 뜻
ports	호스트 8080포트를 컨테이너 8080포트로 연결
volumes	(왼쪽)빌드된 JAR 파일을 : (오른쪽)컨테이너 내부 /app.jar로 마운트
command	Spring Boot 애플리케이션을 실행하는 명령어 java -jar /app.jar

 

---

🗄️ db 서비스 (MariaDB)

  db:
    image: mariadb:latest
    ports:
      - 3306:3306
    volumes:
      - ./backend/db:/var/lib/mysql
    environment:
      - MARIADB_ROOT_PASSWORD=qwer1234
      - MARIADB_DATABASE=web

항목	설명
image	mariadb 최신 버전 이미지
ports	호스트 3306포트를 컨테이너 3306포트로 연결
volumes	MariaDB 데이터 저장소를 ./backend/db와 연결
environment	DB 초기 설정 (root 비밀번호, 기본 DB 생성 등)

 

---

7-3. Docker Compose 실행하기

docker-compose up -d

• -d: 백그라운드 실행 옵션
• 명령어 실행 후 모든 서비스(frontend, backend, db)가 함께 실행됨.
• Docker Desktop 에 가서도 확인할 수 있다!

---

7-4. 상태 확인 및 컨테이너 관리

컨테이너 상태 확인

docker-compose ps

개별 서비스 로그 보기

docker-compose logs -f backend

컨테이너 중지 및 삭제

docker-compose down

---

7-5. Docker Desktop UI에서 Compose 프로젝트 확인하기

1. Docker Desktop 실행 → Containers 메뉴 클릭
2. fullstack라는 이름으로 Compose 프로젝트가 그룹화되어 표시됨
3. 각 서비스 컨테이너를 선택해서 로그 확인, 시작/중지 등 관리 가능

---

7-6. 확인할 것들..

서비스	확인할 것
frontend (Vue + NGINX)	localhost:80 접속 후 Vue 화면이 정상적으로 뜨는지
backend (Spring Boot)	localhost:8080 접속 후 API가 정상 응답하는지
db (MariaDB)	DB 접속 및 초기 데이터베이스 생성 여부 확인 (root/qwer1234)

 

---

다음 실습 내용... to be continued

• Dockerfile 작성 후 직접 이미지 빌드
• MariaDB Master-Slave 복제
• 아마도... CI/CD 파이프라인 연동 (GitHub Actions, Jenkins 등)