Docker Compose로 풀스택 개발환경 한 번에 세팅하는 방법 (React + Node.js + MongoDB)

진짜 개발자처럼 느껴지는 Docker Compose 이야기

혹시 백엔드, 프론트엔드, DB를 하나씩 따로따로 띄우다가 시간 다 써버린 적 있으세요? 저는 예전에 그런 적 진짜 많았어요. 개발 환경 한 번 띄우려면 터미널에 복붙할 명령어만 몇 개인지... 근데 Docker Compose를 만나고 나서 그런 번거로움이 확 줄었죠. 진짜 신세계였어요.

이번에 저랑 같이 React + Node.js + MongoDB 조합의 풀스택 앱을 예제로 잡고, Docker Compose로 이걸 한 방에 띄우는 방법을 얘기해볼게요. 무겁게 생각하지 마세요. 친구한테 알려주듯이 풀어볼게요.

 

---

 

Docker Compose, 그게 뭔데?

 

Docker Compose, 그게 뭔데?

쉽게 말해서, 여러 개의 Docker 컨테이너를 한꺼번에 띄워주는 도구예요. docker-compose.yaml이라는 파일 하나만 있으면, 필요한 서비스들 다 정의해놓고 docker-compose up 한 줄이면 뿅! 다 올라갑니다. 마치 비서처럼 백엔드도, 프론트도, DB도 척척 실행해주죠.

 

---

 

어떤 앱을 만들까?

우리 예제로 사용할 앱 구성은 이래요:

• React 프론트엔드
• Node.js 백엔드 API
• MongoDB 데이터 저장소

 

이 세 개를 Docker Compose로 한꺼번에 실행할 거예요. 진짜 편하죠.

 

---

 

백엔드부터 시작해보자

 

백엔드부터 시작해보자

먼저 docker-compose.yaml에 아래처럼 써주세요:

services:
  backend:
    build: ./backend

 

이 말은 "야 Docker야, backend 폴더에 있는 Dockerfile로 이미지 하나 만들어줘" 라는 뜻이에요.

 

혹시 Dockerfile 이름이 다르면?

    build:
      context: ./backend
      dockerfile: Dockerfile-dev

 

이렇게 바꿔주면 됩니다.

 

Context라는 건 뭐냐면...

Docker가 이미지 만들 때 참고하는 폴더예요. Dockerfile 안에서 뭔가 복사하거나 설치하려고 할 때 필요한 파일들이 이 폴더 안에 있어야 해요. 그래서 대충 backend 폴더 자체를 context로 지정하는 거죠.

 

---

 

포트 열어주기

우리 앱이 외부에서 접근 가능하려면 포트를 열어줘야 해요:

    ports:
      - "80:80"

 

이건 내 컴퓨터의 80번 포트랑 컨테이너 안의 80번 포트를 연결하겠다는 뜻이에요.

 

---

 

볼륨 세팅도 해보자

볼륨은 쉽게 말해 파일 공유라고 생각하면 돼요. 세 가지가 필요해요:

• 로그 저장용 named volume:

    volumes:
      - logs:/app/logs

 

• 소스 코드 변경 시 바로 반영되게 하는 bind mount:

      - ./backend:/app

 

• node_modules 안 덮어쓰게 막아주는 anonymous volume:

      - /app/node_modules

 

named volume은 아래처럼 따로 선언해줘야 해요:

volumes:
  logs:

 

---

 

환경변수는 .env로 관리하자

./env/backend.env 파일 만들어서 이렇게 써보세요:

MONGODB_USERNAME=max
MONGODB_PASSWORD=secret

 

그리고 설정에 추가:

    env_file:
      - ./env/backend.env

 

이러면 보안에도 좋고, 깔끔하죠.

 

---

 

MongoDB 먼저, 백엔드는 나중에

서비스 실행 순서 정하려면 depends_on 쓰면 돼요:

    depends_on:
      - mongodb

 

이러면 MongoDB가 먼저 실행되고, 그다음 백엔드가 따라 올라옵니다.

 

---

 

MongoDB 설정도 잊지 말자

  mongodb:
    image: mongo
    volumes:
      - data:/data/db

volumes:
  data:
  logs:

이렇게 하면 MongoDB 데이터도 디스크에 잘 저장돼요.

 

---

 

프론트엔드도 세팅해보자

 

프론트엔드도 세팅해보자

React 앱은 아래처럼 설정해요:

  frontend:
    build: ./frontend
    ports:
      - "3000:3000"
    volumes:
      - ./frontend/src:/app/src
    stdin_open: true
    tty: true
    depends_on:
      - backend

 

3000 포트 열고, 코드를 수정하면 바로 반영되게 해주고, 리액트 개발서버가 잘 돌아가도록 인터랙티브 모드도 켜줘요.

 

---

 

이제 실행해볼까?

모든 걸 실행하려면:

docker-compose up -d

 

이미지까지 새로 만들고 싶다면:

docker-compose up -d --build

 

실행은 안 하고 이미지 빌드만 하고 싶다면:

docker-compose build

 

모든 컨테이너를 멈추고 싶다면:

docker-compose down

 

---

 

로그나 컨테이너 상태 확인하고 싶다면?

로그 보기:

docker logs <container-name>

 

실행 중인 컨테이너 목록:

docker ps

 

컨테이너 이름이 자동으로 만들어지긴 하지만, 내가 원하는 이름으로 바꿀 수도 있어요:

    container_name: backend

 

---

 

왜 Docker Compose를 써야 할까?

진짜 솔직히 말해서, Compose 없을 땐 개발 환경 한 번 세팅하려고 반나절 보내던 적도 있었어요. 근데 지금은 딱 파일 하나랑 명령어 두 개면 끝이에요.

특히 팀 프로젝트 할 때, 새로 들어온 분한테도 "이거 하나 치면 끝나요"라고 말할 수 있어서 좋아요:

docker-compose up

 

---

 

마무리하며: 내 개발 인생 바꿔준 녀석

Docker Compose는 제 개발 환경에서 빠질 수 없는 친구예요. 설정은 처음엔 살짝 낯설지만, 익숙해지면 진짜 손에 착 붙습니다. 프로젝트가 커지면 커질수록 Compose의 진가가 드러나요.

혹시 아직 안 써보셨다면, 이번 기회에 꼭 한 번 도전해 보세요. 개발 속도도, 만족감도 확실히 올라갈 거예요.

 

---

 

함께 보면 좋은 주제

• Docker Compose vs Docker Swarm: 뭐가 다를까?
• Kubernetes에서 Compose 파일 활용해보기
• 프로젝트 구조를 깔끔하게 잡는 방법

예제 프로젝트 바로 받아서 실행해보세요! 명령어는 단 한 줄이면 충분해요.