Monorepo용 Docker로 개발 환경 설정 🐳

Docker는 OS 수준 가상화를 사용하여 컨테이너라는 패키지로 소프트웨어를 제공하는 서비스 제품으로서의 플랫폼 세트입니다. 컨테이너는 서로 격리되어 자체 소프트웨어, 라이브러리 및 구성 파일을 번들로 묶습니다. 잘 정의된 채널을 통해 서로 통신할 수 있습니다.

버전 제어 시스템에서 모노 리포지토리는 많은 프로젝트의 코드가 동일한 리포지토리에 저장되는 소프트웨어 개발 전략입니다.

개발 환경을 설정하는 이유는 무엇입니까?

풀스택 앱을 개발하는 동안 우리는 구성해야 하고 해당 애플리케이션을 구축하는 데 필요한 많은 것을 접하게 됩니다. 게다가 우리는 팀으로 일할 수도 있고 기여자가 많은 오픈 소스 프로젝트일 수도 있습니다. 우리가 이러한 것들을 고려할 때 "내 컴퓨터에서 잘 작동하고 있었습니다..."라는 오래된 변명을 분명히 볼 수 있습니다. 또한 포트폴리오 프로젝트에서 개발 설정을 구현하여 Docker에 대한 지식을 구현하고 이에 익숙해질 수 있음을 보여줄 수 있습니다.

우리 대부분은 이 문제를 해결하기 위해 빠른 개발 및 빌드 프로세스를 원한다는 것을 알고 있습니다. OS 수준의 오류 없이 원활하게 개발할 수 있도록 Docker를 사용하여 프로젝트의 개발 환경을 설정했습니다.

여기서 연습은 Docker를 구현할 수 있는 한 가지 방법입니다. 시나리오에 맞는 방법이 많을 수 있으므로 더 많이 조사하고 시행 착오 방법으로 구현해 보고 구현하면 장기적으로 확실히 도움이 된다는 점을 기억하세요.

1단계: 프로젝트 파악

데모를 위해 우리는 React 프론트엔드와 Nodejs 백엔드로 구성된 내 자신의 프로젝트를 사용하고 있습니다.

저장소 링크 → https://github.com/tejastn10/ShoeShoppee

2단계: 개발 Dockerfile을 프로젝트에 추가

💡 참고: Vs-Code를 사용하는 경우 환경에 맞는 Dockerfile을 만들고 관리하는 데 많은 도움이 됩니다. Vs-Code를 최대한 활용하고 플랫폼에 대한 도커 구성을 추가하는 방법을 보여주는 링크를 제공하겠습니다. Vs-Code는 dockerignore 파일 및 디버그 구성(지정된 경우)과 같이 필요한 모든 것을 추가합니다.

영상 바로가기 →

프런트엔드 Dockerfile
프런트엔드 Dockerfile은 frontend/web 폴더에 있습니다.

FROM node:alpine

WORKDIR "/app"

RUN yarn global add typescript
RUN yarn global add less

COPY ./package.json ./
COPY ./yarn.lock ./

RUN yarn install

COPY . .

RUN lessc --js ./src/styles/theme.less ./src/styles/theme.css

CMD [ "yarn", "start" ]

백엔드 Dockerfile
백엔드 Dockerfile은 백엔드 폴더에 있습니다.

FROM node:alpine

WORKDIR "/app"

RUN yarn global add typescript

COPY ./package.json ./
COPY ./yarn.lock ./

RUN yarn install

COPY . .

CMD [ "yarn", "server" ]

엔진엑스 도커파일

nginx Dockerfile은 nginx 폴더에 있습니다.

FROM nginx

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

이러한 파일의 이름은 개발 전용임을 지정하기 위해 Dockerfile.dev로 지정됩니다.

3단계: dev Docker-compose 파일을 프로젝트에 추가

루트 폴더에는 각 Docker 파일에 지정된 모든 서비스를 추가하는 작성 파일이 포함되어 있습니다. 내 프로젝트에서 개발 docker-compose 파일은 docker-compose.debug.yml입니다.

version: "3.4"

services:
  nginx:
    restart: always
    build:
      dockerfile: Dockerfile.dev
      context: ./nginx
    ports:
      - 3000:80
  backend:
    build:
      dockerfile: Dockerfile.dev
      context: ./backend
    volumes:
      - /app/node_modules
      - ./backend:/app
    environment:
      - NODE_ENV=development
      - PORT=5000
      - JWT_SECRET=clocked
      - MONGO_URI
  frontend:
    build:
      dockerfile: Dockerfile.dev
      context: ./frontend/web
    volumes:
      - /app/node_modules
      - /app/src/styles
      - ./frontend/web:/app
    environment:
      - NODE_ENV=development
      - REACT_APP_DEVELOPMENT_API_ENDPOINT=/devURL

4단계: docker-compose up으로 프로젝트 시작

이제 남은 것은 작성 파일을 빌드하고 실행하는 것입니다. 설정이 완료되었습니다.

docker-compose -f ./docker-compose.debug.yml up --build

이 기사에서는 Docker에 대한 사전 지식이 있다고 가정합니다. 많지는 않지만 기술에 익숙하면 충분합니다. 귀하의 구성을 어떻게 구현할지 알려주고 내 구성을 개선할 수 있는 부분도 알려주세요.