[Docker] 다중 프로젝트 한 포트에서 디버깅하기

 

도입하게 된 계기

 

사내에서 서비스를 여러 프로젝트에서 관리하고 있었다.
하지만 이 프로젝트들은 개별로 실행되기도 하지만 서로 어느 관점에서는 연관된 관계이기도 해서 여러 프로젝트를 한번에 디버깅하려면, 여러 프로젝트를 실행하고, 1번 프로젝트에서 로그인 후 작업을 실행하고, 2번 프로젝트로 이동해 작업을 하는 과정에서, 2번 프로젝트는 로그인이 되어 있지 않으므로 재 로그인 후 해당 url 을 직접입력해서 이동하는 과정으로 테스트를 해야했다.

이는 2번 프로젝트를 개발한 개발자에게는 너무 쉬운 접근이였겠지만, 2번 프로젝트를 개발하지 않은 개발자에게는 너무 어려운 디버깅 순서였다.

 하지만 여러개의 프로젝트이며, 개인 PC 에서 포트를 다중포트를 사용해서 프로젝트를 실행시킬 수 없으므로,
우린 한 포트에서 여러 프로젝트를 동시에 실행시킬 수 있는 방법이 필요했다.

 

 

Docker 및 프로젝트 파일 구조

 

Docker 는 가상 머신이다. 프로젝트를 빌드 및 이미지를 만들어, 컨테이너를 올리는 방식으로 CI/CD 자동화에 많이 사용한다. 
하지만 우리는 배포 목적이라기 보다는 개발 디버깅 편리성을 위한 부분이 필요했다.
그래서 우리는 웹서버를 하나 두고, 이 웹 서버에서  각 프로젝트 포트로 분기하는 작업을 거쳤다.

먼저 각 프로젝트에 DockerFile 을 만들었다.

FROM node:20

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

CMD ["npm", "run", "dev"]

그리고 처음에는 각 프로젝트에 docker-compose.yml 파일을 놓고, 프로젝트를 하나하나 실행시켜 연관성을 짓는 작업을 진행했는데, 너무 귀찮은 작업이라 DockerRoot 디렉토리에 여러 프로젝트를 넣어서 한번에 실행시킬 수 있게 했다.

그래서 다음과 같은 프로젝트 구조가 되었다.

DockerRoot
│
├── project1
│   ├── Dockerfile
│   ├── package.json
│   ├── src/
│   └── (project1 관련 파일들)
│
├── project2
│   ├── Dockerfile
│   ├── package.json
│   ├── src/
│   └── (project2 관련 파일들)
│
├── default.conf  # Nginx 설정 파일
└── docker-compose.yml  # 통합된 docker-compose.yml

 

프로젝트마다 Dockerfile 은 위와 같이 핫리로드가 되게끔 npm run dev 커맨드를 사용하였고,
nginx default.conf 에서 웹서버에서 각 프로젝트로 포트 연결되는 작업을 진행했다.

upstream project1 {
    server project1:5000;
}

upstream project2 {
    server project2:5300;
}

server {
    listen 80;

    location /project1/ {
        proxy_pass http://project1;
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }

    location /project2/ {
        proxy_pass http://project2;
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }

}

 

그 뒤에 DockerRoot 에 docker-compose.yml 파일로 한번에 docker-compose up , docker-compose down 작업을 할 수 있게 놓았다.

version: "3.8"

services:
  project1:
    build: ./project1
    ports:
      - "5000:5000"
    volumes:
      - ./project1:/app
    command: npm run dev
    networks:
      - app-network
    environment:
      - CHOKIDAR_USEPOLLING=true
      - WDS_SOCKET_PORT=5000

  project2:
    build: ./project2
    ports:
      - "5300:5300"
    volumes:
      - ./project2:/app
    command: npm run dev
    networks:
      - app-network
    environment:
      - CHOKIDAR_USEPOLLING=true
      - WDS_SOCKET_PORT=5300

  nginx:
    image: nginx:latest
    ports:
      - "2000:80"
    volumes:
      - ./default.conf:/etc/nginx/conf.d/default.conf
    networks:
      - app-network
    depends_on:
      - project1
      - project2

networks:
  app-network:
    driver: bridge

 

위 파일에서 주의깊게 봐야할 것은 networks, enviroment 이다.
networks 는 해당 컨테이너가 하나의 연관된 프로젝트 임을 묶어주는 네트워크가 되고,

enviroment는 핫리로드를 위한 부분이라고 생각하면된다.
Docker 는 기본적으로 내부 파일 변경을 감지하지 않는데, React Dev 서버 포트인 웹소켓 연결을 진행하고,
CHOKIDAR_USEPOLLING=true 를 통해 파일 변경감지를 진행했다.

 

결론

 

우리는 DockerRoot 컨테이너 하위의 컨테이너들로, nginx 로 들어오는 localhost:2000 포트에서,
각 프로젝트 포트인 5000 포트 혹은 5300 포트로 연결을 진행 할 수 있게 되었다.
우리는 이제 localhost:2000 으로 프로젝트 디버깅 및 핫리로드 개발을 진행 할 수 있게 된다.