Метод развертывания Docker в Ant Design Pro

задний план

Ant Design Pro — это решение для среднего и внутреннего уровня предприятия, которое на основе библиотеки компонентов Ant Design извлекает типовые шаблоны/бизнес-компоненты/общие страницы и т. д., что позволяет разработчикам быстро выполнять разработка мид- и бэкенд-приложений.

В процессе использования Ant Design Pro можно обнаружить, что он предоставляет ряд методов разработки и развертывания на основе докеров, как показано на следующем рисунке. Однако в официальных документах нет конкретного введения.Основной целью данной статьи является анализ использования докера в Ant Design Pro.

связанный с докером

Зачем использовать докер?

• Развертывание среды — это проблема, с которой должны столкнуться все команды.По мере того, как система становится все больше и больше, появляется все больше и больше зависимых сервисов, таких как: веб-сервер + база данных MySql + кеш Redis и т. д.
• Зависимых сервисов много, стоимость построения локальной среды становится все выше и выше, а младшему персоналу сложно решать некоторые задачи по развертыванию среды
• Различия в версиях сервисов и ОС могут привести к ошибкам в онлайн-среде. Когда проект вводит новый сервис, необходимо перенастроить среду для всех.

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

Концепции в докере

В Docker есть три основных понятия:изображение,контейнер,склад (хранилище).

• Образ: образ содержит файлы, которые необходимо запустить. Образы используются для создания контейнеров, и образ может запускать несколько контейнеров; образы можно создавать с помощью Dockerfile или загружать из концентратора/реестра Docker.
• Контейнер: Контейнер — это работающий компонент Docker. Запуск образа — это контейнер. Контейнер — это изолированная среда. Несколько контейнеров не будут влиять друг на друга, гарантируя, что программы в контейнере будут работать в относительно безопасной среде.
• Репозиторий: делитесь образами Docker и управляйте ими, пользователи могут загружать или скачивать вышеуказанные образы, официальный адрес:registry.hub.docker.com/(аналогично управлению исходным кодом на github), вы также можете создать свой собственный частный реестр Docker.

Общие команды докера

• Создайте образ, используя текущий каталог Dockerfile с меткой xxx:v1:docker build -t xxx:v1 .
• Создайте новый контейнер и запустите:docker run --name mynginx -d nginx:latest
• Откройте интерактивный терминал в контейнере:docker exec -i -t container_id /bin/bash
• Запустите контейнер:docker start container_name/container_id
• Остановить контейнер:docker stop container_name/container_id
• Перезапустите контейнер:docker restart container_name/container_id

Что такое docker-compose?

В реальных проектах невозможно зависеть только от одного сервиса, например, обычный веб-проект может зависеть от: статического файлового сервера, сервера приложений, базы данных Mysql и т.д. Мы можем выполнить развертывание, запустив один образ и привязав его к соответствующему локальному порту для достижения цели взаимодействия с контейнером. Но чтобы было удобнее управлять многоконтейнерной ситуацией, официал предоставляетdocker-composeПуть.docker-composeЭто оркестография Docker, инструмент для определения и управления сложными приложениями на Docker, позволяя пользователям развертывать распределенные приложения в кластерах.

В композиции есть два важных понятия:

• Служба: Контейнер для приложения, который фактически может состоять из нескольких экземпляров контейнера, на которых запущен один и тот же образ.
• Проект: полная бизнес-единица, состоящая из набора связанных контейнеров приложений, вdocker-compose.ymlопределяется в файле.

Проект может быть связан с несколькими службами (контейнерами).Compose управляет проектно-ориентированным и удобно управляет жизненным циклом набора контейнеров в проекте с помощью подкоманд.

Разбор скрипта

локальная разработка

npm run docker:devЭта команда используетdocker-compose upкоманда принятаdocker-compose.dev.ymlШаблон запускает соответствующий контейнер.

docker-compose.dev.ymlСодержание следующее:

Этот компоновочный файл определяет службу:ant-design-pro_dev. Этот сервис используетDockerfile.devТекущее изображение построено. Сопоставьте порт 8000 внутри контейнера с портом 8000 хоста. Для синхронизации данных между контейнером и хостом контейнер монтирует три тома данных:../src:/usr/src/app/src, ../config:/usr/src/app/config, ../mock:/usr/src/app/mock. Он сопоставляет каталог хоста с контейнером, так что три каталога в контейнере могут синхронизировать данные с тремя каталогами, соответствующими хосту.

Dockerfile.devСодержание следующее:

Контейнер используетnode:latestв качестве базового изображения и установите/usr/src/appкак рабочий каталог. Первое местоpackage.jsonСкопируйте файлы в этот каталог, установите соответствующие пакеты зависимостей, затем скопируйте все содержимое папки в этот каталог и используйтеnpm run startЗапустите приложение. Благодаря наличию тома данных любые изменения в трех локальных папках можно синхронизировать с контейнером для обновления.

На этом этапе вся среда разработки настроена.

Производственная среда

npm run docker-pro:devЭта команда используетdocker-compose upкоманда принятаdocker-compose.ymlШаблон запускает соответствующий контейнер.

docker-compose.ymlСодержание следующее:

Этот компоновочный файл определяет две службы:ant-design-pro_buildа такжеant-design-pro_web.

ant-design-pro_buildиспользоватьDockerfileСоздайте образ.

DockerfileСодержание следующее:

Зеркало на самом деле только делает сборку файла (npm run build), результат сборки сохраняется в/distкаталог и поделиться этим каталогом через том данных. С этой точки зрения контейнер служит только контейнером объема данных для предоставления услуг данных для других изображений.

ant-design-pro_webС помощью образа nginx 80-й порт контейнера nginx привязывается к 80-му порту хоста, аant-design-pro_buildКаталог dist монтируется на сервер nginx./usr/share/nginx/htmlкаталог, будетnginx.confподняться на/etc/nginx/conf.d/default.conf.

Вид контейнера выглядит так:

пройти черезhttp://localhost:80Вы можете получить доступ к контейнеру nginx, в котором развернуты внешние статические файлы.

Сборка производственного образа

npm run docker-hub:buildкоманда принятаdocker buildПостроитьDockerfile.hubОпределенное зеркало.

Dockerfile.hubФайлы определяются следующим образом:

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

Вы можете использовать службу, запустив образ непосредственно на назначенном сервере.

Кстати, этоDockerfile.hubФайл был отправлен на официал мной и слит в ветку master.Подробности см.:GitHub.com/Анта-дизайн/…. Все еще немного взволнован.

Reference

• Ant Design Pro: pro.Anta.design/docs/regeneration day...