[Docker] 로컬 개발 환경 세팅(vscode, IntelliJ) (1) - 실패

서론

SSAFY 2학기를 맞이해서 프로젝트를 진행하고 있다.

본인은 인프라를 담당했고, 우선적으로 팀원들의 개발 환경 통일을 위한 세팅을 제공하기 위해 진행한 내용에 대해 정리한다.

 

필독

해당 글대로 진행을 했으나 문제가 생겼고, 이를 해결하여 포스팅을 할 예정이다.  

---

로컬 환경 세팅을 위한 Docker 

기술 스펙

FE

이름	버전
Node.js	20.x (LTS)
Vite	7.2.x
React	19.2.x
TypeScript	5.9.x

 

BE

이름	버전
Java	21
Spring	3.5.9
MySQL	8.0
Redis	7.2

 

구성

Docker를 사용해서 팀원들의 개발 환경을 동일시 만들 것이다. 내가 생각했을 때 중요하게 고려해야 할 점은 두가지였다.

• 프론트엔드와 백엔드가 모든 팀원들의 환경에서 코드만 있으면 동일하게 수행되어야 한다.
• 도커 컨테이너 내에서 개발을 진행해야 한다.

 

Docker를 사용하는 것은 환경 불일치를 막기 위함이다. 여러 기술 스택을 사용하게 될텐데 이때 버전이 다르거나 연결 설정이 달라져 개발 환경에 따라 차이가 생길 수 있다고 생각했다. 이를 위해 기술 스택 및 버전, 환경을 통일해서 세팅하는 방법도 있지만, Docker를 활용해서 제공하면 더 확실하다고 판단했다.

 

처음으로 진행해보는 과정이라 실제로 개발하거나 적용했을 때 또 다른 문제가 발생할지도 모른다. (만약 발생하게 된다면 업데이트하겠다. 해결과정 또한 함께.)

 

Dockerfile, docker-compose.yml

services:
  backend:
    build:
      context: ../../
      dockerfile: ./Infra/local_dev/backend.Dockerfile
    volumes:
      - ../../backend:/app
      - ~/.gradle:/root/.gradle  # 의존성 캐시 유지
    ports:
      - "8080:8080"
      - "5005:5005"
    environment:
      - SPRING_DATASOURCE_URL=jdbc:mysql://mysql:3306/${MYSQL_DATABASE}
      - SPRING_DATASOURCE_USERNAME=root
      - SPRING_DATASOURCE_PASSWORD=${MYSQL_ROOT_PASSWORD}
      - SPRING_DATA_REDIS_HOST=redis
    working_dir: /app                 # 컨테이너의 작업 디렉토리 지정
    tty: true                         # 컨테이너 종료 방지
    stdin_open: true
    command: ./gradlew bootRun
    depends_on:
      - mysql
      - redis
  frontend:
    build:
      context: ../../
      dockerfile: ./Infra/local_dev/frontend.Dockerfile
    volumes:
      - ../../frontend:/app
      - /app/node_modules
    ports:
      - "5173:5173"
    environment:
      - VITE_API_URL=http://localhost:8080
    tty: true
    stdin_open: true
    # Vite를 도커에서 실행할 때 필수 설정
    command: >
      sh -c "npm install && npm run dev -- --host 0.0.0.0"

  mysql:
    image: mysql:8.0
    ports:
      - "3306:3306"
    environment:
      - MYSQL_ROOT_PASSWORD=${MYSQL_ROOT_PASSWORD}
      - MYSQL_DATABASE=${MYSQL_DATABASE}
    volumes:
      - mysql_data:/var/lib/mysql

  redis:
    image: redis:7.2-alpine
    ports:
      - "6379:6379"

volumes:
  mysql_data:

 

backend

• ports: 8080은 웹 서버 포트이며, 5005는 일반적으로 원격 디버깅(Remote Debugging)을 위해 열어둔 포트
• tty & stdin_open: 터미널 입력을 유지하여 Spring 컨테이너가 실행 직후 종료되지 않도록 설정
• depends_on: mysql과 redis가 먼저 실행된 후에 백엔드가 실행되도록 순서를 보장

 

Front

# 1. Node.js 공식 LTS 이미지 사용
FROM node:20-slim

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

# 3. 개발 서버 포트 노출 (Vite 기본 포트)
EXPOSE 5173

# 4. 실행 명령어
# 호스트(0.0.0.0) 설정을 해줘야 컨테이너 밖(윈도우)에서 접속이 가능합니다.
CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"]

 

Back

FROM ubuntu:22.04

# 기본 도구 및 Java 21 설치
RUN apt-get update && apt-get install -y \
    curl git unzip wget \
    openjdk-21-jdk \
    && rm -rf /var/lib/apt/lists/*

# 환경 변수 설정
ENV JAVA_HOME=/usr/lib/jvm/java-21-openjdk-amd64
ENV PATH=$PATH:$JAVA_HOME/bin

WORKDIR /app

 

 

확인

동작되는 것을 확인했으니 컨테이너 내부에 진입해서 개발을 진행할 수 있게 되었다.

 

vscode에서 컨테이너에 접속

1. Dev Containers 설치

 

2. Remote Explorer에서 DEV CONTAINERS에서 선택

3. 새 창에서 연결 완료

왼쪽 하단을 보면 front 컨테이너와 연결된 것을 확인할 수 있다

 

IntelliJ에서 컨테이너에 접속

1. docker 플러그인 설치

2. 설정 > 빌드, 실행, 배포 > Docker

3. Docker 컨테이너 확인

4. '프로젝트 열기' 버튼 클릭

5. 컨테이너 접속 완료