모놀리식 앱 Dockerize

최근에 저는 Node.js와 Angular를 사용하여 개발한 앱에 도커를 구현하고 싶었습니다. 그러나 여기서 문제는 프런트엔드와 백엔드가 모두 같은 폴더에 있다는 것입니다. 물론 별도의 리포지토리로 나눈 다음 각각을 도킹하는 것이 더 쉬웠을 것입니다. 그러나 저는 앱 자체가 기능이 제한된 매우 기본적인 것이기 때문에 구조를 변경하지 않기로 결정했습니다. 두 개의 서로 다른 저장소를 유지 관리하고 서로 다른 서버에서 호스팅하고 싶지 않았습니다. 특히 레거시 모놀리식 앱으로 작업할 때 이러한 문제가 발생했을 수도 있습니다. 그럼 함께 도커를 구현해 보도록 합시다!

전제 조건

1. Node.js 및 NPM—https://docs.npmjs.com/downloading-and-installing-node-js-and-npm
2. 포스트그레SQL —https://www.postgresql.org/download
3. 도커 —https://docs.docker.com/get-docker

PORT=3000
ENV=development
URL=http://api.jsoneditoronline.org/v1/docs/088b6155ffc749e9a8ace0721f2cc384/data
SESSION_SECRET=psyduck
DB_USER=postgres
DB_PASSWORD=root

시스템에서 프로젝트를 실행하려면 다음 명령을 따르십시오.

npm install
npm run migrate
npm start

localhost:3000브라우저에서 열어 프로젝트가 실행되고 있는지 확인하세요.

참고: 프런트엔드의 실시간 변경 사항을 보려면 npm run serve별도의 터미널에서 명령을 실행하고 localhost:4200.

앱에 도커 추가

참고: 도커를 추가하려면 도커가 시스템에 설치되어 있는지 확인하십시오. 그렇지 않은 경우 이 링크를 따라 설치하십시오.

Dockerfile프로젝트의 루트 디렉토리에 추가하십시오 . 여기에는 이미지를 어셈블하기 위해 명령줄에서 호출할 모든 명령이 포함됩니다.

FROM node:16-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
CMD [ "npm", "run", "start" ]
EXPOSE 3000

FROM node:16-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 4200
CMD [ "npm", "run", "serve" ]

services:
  server:
    build:
      context: ./
      dockerfile: Dockerfileserver
    volumes:
      - .:/app
      - /app/node_modules
    restart: always
    ports:
      - "3000:3000"
    depends_on:
      - client
  client:
    build:
      context: ./
      dockerfile: Dockerfileclient
    volumes:
      - .:/app
      - /app/node_modules
    restart: always
    ports:
      - "4200:4200"

참고: 이 명령을 실행하기 전에 docker desktop을 실행해야 합니다.

docker-compose build
docker-compose up

도커 이전에는 앱의 프런트엔드와 백엔드가 각각 다른 포트에서 실행 4200되었습니다 3000. 그러나 그들은 서로 어떻게 소통하고 있었습니까? 답은 파일에 있습니다 — proxy.conf.json. 이것은 서버에 대한 모든 API 요청이 localhost:3000.

{
    "/api": {
      "target": "http://localhost:3000/",
      "secure": false
    }
}

{
    "/api": {
      "target": "http://server:3000/",
      "secure": false
    }
}

여기에 한 가지 문제가 있습니다. 프런트엔드를 변경하면 다시 로드할 때 앱에 반영됩니다. 그러나 서버의 변경 사항은 앱을 다시 시작해야 합니다. 이를 해결하기 위해 nodemon을 사용합시다.

— 를 사용하여 라이브러리를 설치합니다 npm install nodemon. 이제 스크립트를 추가하여 package.jsonnodemon을 사용하여 앱을 시작합니다 —

"dev": "nodemon --ignore 'dist/*' server.js"

docker 컨테이너를 중지하려면 명령을 사용합니다 docker-compose down.

이 블로그의 다음 부분에서는 이 앱에 데이터베이스를 추가하고 도커와 함께 작동하게 만드는 방법에 대해 논의할 것입니다! 2부가 곧 공개됩니다!

이 게시물이 도움이 되었기를 바라며 질문이나 질문이 있는 경우 알려주세요. 여기에 댓글을 남겨주시면 확실하게 답변해드리겠습니다!