Создаем приложение Art-pixel на Angular и Nest.js. Часть 3 (Docker)

Наш проект разрастается, что приводит к необходимости добавлять дополнительные службы, по сути отвечающие за один элемент логики.  

Для тех кто пропустил, начало. 

Поскольку мы изначально начали создавать приложение путем разделения компонентов на небольшие сервисы, которые можно развертывать и использовать независимо друг от друга давайте рассмотрим из чего в дальнейшем будет состоять наше приложение. А состоять оно будет из следующих сервисов:

1. Сервис Фронтенд Angular

2. Сервис API Nodejs

3. Сервис API Авторизации Node

4. API БД MongoDb

5. API Авторизации MongoDb

6. Сервис Nginx Proxy — основной сервис маршрутизатор

Для создания описанной выше структуры давайте внесем необходимые изменения, создадим каталоги: api, angular, nginx, auth. Перенесем файлы проекта в каталог angular.

Наши отдельные сервисы чрезвычайно просты и могут развертываться независимо друг от друга, а это значит, что для большей простоты и получения модели распределенной инфраструктуры необходимо упаковать службы в контейнер, что предоставит нам дополнительное удобство в развертывании и разработке нашего приложения, для этого мы будем использовать Docker, который позволяет запускать практически любое приложение, безопасно изолированное в контейнере. Безопасная изоляция позволяет запускать на одном хосте много контейнеров одновременно. Docker, состоит из образов, реестров и контейнеров.

Для создания контейнеров используются Образы которые в свою очередь хранятся в реестрах. Есть публичные и приватные реестры, из которых можно скачать либо загрузить образы. Каждый контейнер создается из образа и в нем содержится все, что нужно для работы приложения.  Контейнеры могут быть созданы, запущены, остановлены, перенесены или удалены. Каждый контейнер изолирован и является безопасной платформой для приложения.

Подразумевается, что у вас уже установлен Docker.

В нашем приложении мы будем использовать несколько образов, поэтому приступим. Для создания нашего апи переходим в каталог api и создаем  Docker файл.

FROM node:14.15.0-alpine as development  WORKDIR /usr/src/app COPY package*.json ./  RUN npm install glob rimraf RUN npm install --only=development  COPY . .  RUN npm run build  FROM node:14.15.0-alpine as production  ARG NODE_ENV=production ENV NODE_ENV=${NODE_ENV}  WORKDIR /usr/src/app COPY package*.json ./  RUN npm install --only=production  COPY . . COPY --from=development /usr/src/app/dist ./dist  CMD ["node", "dist/main"]

Далее переходим в каталог angular и создаем там два файла, таким образом в дальнейшем мы рассмотрим несколько подходов разделения на prod и dev версии.

FROM node:14.15.0-alpine  WORKDIR /usr/src/app COPY package*.json ./ RUN npm install  COPY . .  EXPOSE 4300 CMD npm run start

FROM node:13.12.0-alpine  WORKDIR /usr/src/app COPY package*.json ./ RUN npm install COPY . .  RUN npm run build RUN npm install -g serve 

Добавляем в package.json строку необходимую для прослушивания всех интерфейсов из контейнера

«start»: «ng serve —host 0.0.0.0 —poll 500»,

 Причина, по которой это важно, заключается в том, что без него процесс angular прослушивает только локальный интерфейс внутри контейнера, поэтому даже с сопоставлением портов докера соединения извне контейнера не принимаются.

Но если мы добавим параметр, —host 0.0.0.0 то процесс angular будет прослушивать все интерфейсы, а сопоставление портов докера позволит подключаться к нему из-за пределов контейнера.

После этого переходим в корень нашего проекта и создаем docker-compose.yml

version: '3.4'  services:    angular:     container_name: art-pixel-angular_api_dev     build:       context: ./angular       dockerfile: Dockerfile.dev           command: npm run start     volumes:       - ./angular/src:/usr/src/app/src       - /usr/node_modules       ports:       - 4300:4300     networks:       - art-pixel-network            restart: unless-stopped             api-dev:     container_name: art-pixel_api_dev     image: art-pixel-api-dev:1.0.0     build:        context: ./api        target: development        dockerfile: Dockerfile     command: npm run start:debug     volumes:           - ./api/src:/usr/src/app/src       - /usr/node_modules     ports:       - 3000:3000       - 9229:9229     environment:       - PORT=3000       - HOST=http://localhost       - MONGO_URL=mongodb://api-db:27017/api           depends_on:       - api-db                 networks:       - art-pixel-network     restart: unless-stopped    api-db:     image: mongo:4.4.4     container_name: mongo-api-db         environment:       - MONGO_INITDB_ROOT_USERNAME=admin       - MONGO_INITDB_ROOT_PASSWORD=admin     ports:       - 27017:27017     volumes:       - ./mongo-data-4.4:/data/db       networks:       - art-pixel-network     restart: always    api-prod:     container_name: art-pixel_api_prod     image: art-pixel-api-prod:1.0.0     build:         context: ./api         target: production         dockerfile: ./Dockerfile     command: npm run start:prod     ports:        - 3000:3000        - 9229:9229     networks:       - art-pixel-network     volumes:       - ./api/src:/usr/src/app       - /usr/src/node_modules     restart: unless-stopped   networks:     art-pixel-network:

На сегодня все, в следующей части мы займемся созданием api на Nest.js и запустим наш контейнер.