Полное руководство по развертыванию приложений Docker

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

В этой статье мы рассмотрим процесс развертывания контейнера Docker в производственной среде. Мы поговорим о контейнерах, Docker, преимуществах использования Docker и вариантах его развертывания. Наконец, мы продемонстрируем, как собрать, докеризировать и развернуть приложение Next.js на Back4app Containers – совершенно бесплатно!

Что такое контейнеры?

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

Преимущества использования контейнеров

Использование контейнеров может принести огромную пользу вашему бизнесу. Оно может помочь как разработчикам, так и команде ИТ-операторов. Вот некоторые из преимуществ использования Docker:

• Портативность: контейнеры можно развернуть где угодно!
• Изоляция приложений: контейнеры изолируют приложение и его зависимости от хост-системы.
• Разделение ответственности: работа разделена между разработчиками и командой ИТ-операторов.
• Ускоренная разработка приложений: не нужно возиться с локальными средами разработки, CI/CD.
• Легкое масштабирование: контейнеры легко масштабируются в сочетании с программным обеспечением для оркестровки.

Для получения дополнительной информации о контейнерах посмотрите статью Что такое контейнеры в облачных вычислениях?

Контейнеры против виртуальных машин

Виртуальные машины (ВМ) – это абстракция физического оборудования, а контейнеры виртуализированы на уровне операционной системы. ВМ обеспечивают большую изоляцию и безопасность, а контейнеры не занимают много места, более эффективны и масштабируемы.

Можно комбинировать контейнеры и виртуальные машины, чтобы получить лучшее из того и другого.

Что такое Docker?

Docker – это инструмент с открытым исходным кодом на базе Linux, который позволяет разработчикам создавать, развертывать и запускать приложения в легких контейнерах. Он предоставляет вам все преимущества технологии контейнеризации и позволяет создавать, отправлять и развертывать программное обеспечение быстрее, чем когда-либо!

Это стабильная и проверенная в боях технология, которая была выпущена в 2013 году. С тех пор ее используют многие крупные компании, включая Google, AWS и Microsoft. За ней стоит огромное сообщество разработчиков, а это значит, что вы легко найдете помощь, если вдруг застрянете.

Docker – не единственный инструмент контейнеризации на рынке, но самый популярный. Среди отличных альтернатив – Podman, LXD, containerd и Buildah.

Преимущества использования Docker

Помимо всех преимуществ технологии контейнеризации, Docker обладает еще несколькими достоинствами. Давайте рассмотрим их.

Легкий

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

Контроль версий

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

Улучшенное сотрудничество

Docker Hub – это облачный репозиторий для хранения, обмена и управления образами Docker, и теперь нет необходимости создавать образ Docker с нуля. Это центральное место для поиска и совместного использования популярных образов Docker, включая образы, созданные сообществом Docker, и официальные образы от производителей программного обеспечения. Он тесно интегрирован с Docker CLI и Docker Desktop.

Масштабируемость

Docker представляет собой масштабируемую архитектуру, которую можно использовать для развертывания приложений в крупных распределенных системах, таких как кластеры или облачные платформы. Способность Docker работать с большим количеством контейнеров и управлять ими с помощью таких инструментов, как Docker Swarm или Kubernetes, позволяет легко увеличивать или уменьшать масштабы в зависимости от потребностей.

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

Самый простой способ запустить Docker на локальной машине – установить Docker Desktop. Docker Desktop – это приложение, предоставляющее простой в использовании графический интерфейс и инструменты, необходимые для создания, тестирования и развертывания контейнерных приложений на локальной машине. Оно позволяет управлять контейнерами, образами и томами. В него встроены движок Docker Engine, Docker CLI и Docker Compose.

Кроме того, он позволяет использовать расширения Docker Extensions, которые помогут вам автоматизировать рабочие процессы и задачи. Docker Desktop позволяет легко сотрудничать с другими разработчиками и имеет отличную встроенную поддержку Docker Hub.

Docker Desktop доступен для Windows, Mac, а также Linux.

Варианты развертывания Docker

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

1. Обычный хостинг
2. Инфраструктура как услуга (IaaS)
3. Платформа как услуга (PaaS)
4. Контейнер как услуга (CaaS)

Исходя из их абстракции, мы можем представить их в виде пирамиды следующим образом:

Давайте проанализируем каждый из них.

Docker и обычный хостинг

Как вы уже догадались, контейнеры Docker можно легко развернуть на вашем собственном сервере. Чтобы запустить Docker на своем сервере, вам потребуется:

1. Установите движок Docker Engine.
2. Создайте образы Docker (локально) или возьмите их из реестра контейнеров.
3. Используйте образы для создания контейнеров.
4. Настройте сеть, тома, брандмауэр и так далее.

Если вы хотите еще больше упростить процесс развертывания, можно использовать Docker Compose. Docker Compose позволяет объявлять сервисы, сети и тома в одном файле. Кроме того, он отлично подходит для многоконтейнерных Docker-приложений.

Docker на IaaS

Инфраструктура как услуга (IaaS) – это модель облачных вычислений, которая предоставляет вычислительные ресурсы, такие как серверы, сети, операционные системы и системы хранения данных в виртуализированной среде. Эти облачные серверы обычно предоставляются организации через высокоуровневые API или расширенные панели управления, обеспечивая клиентам полный контроль над всей инфраструктурой.

Docker на IaaS мало чем отличается от использования собственного сервера. Если вы выберете этот подход, вам придется выполнить те же шаги, что и при использовании обычного хостинга.

Среди провайдеров IaaS – AWS, GCP, Azure.

Docker на PaaS

Платформа как услуга (PaaS) – это модель облачных вычислений, предоставляющая пользователям облачную среду, в которой они могут разрабатывать, управлять и предоставлять приложения. Помимо предоставления компьютерных ресурсов, PaaS поставляется с множеством готовых инструментов для разработки, настройки и тестирования приложений. Большинство поставщиков PaaS позволяют запустить приложение в работу всего за несколько кликов!

PaaS-платформы, поддерживающие Docker, еще больше упрощают процесс развертывания. Поставщики PaaS обычно предоставляют отличные инструменты, позволяющие развернуть приложение Docker без лишних хлопот.

Чтобы узнать больше о PaaS, прочитайте статью Что такое PaaS – платформа как услуга?

Docker в системе CaaS

Container as a Service (CaaS) – это разновидность платформы как услуги (PaaS), которая предоставляет платформу для запуска и управления контейнерными приложениями. Она предназначена для упрощения запуска, управления и масштабирования контейнеров Docker и микросервисов в облаке.

CaaS – самый простой вариант, поскольку он специализирован для контейнеров и абстрагируется от базовой инфраструктуры, освобождая разработчиков от необходимости управлять базовыми серверами и сетями. Дополнительные функции, которые включают большинство поставщиков CaaS, – масштабирование, балансировка нагрузки, автоматическое преодоление отказов, развертывание с нулевым временем и так далее!

Примерами CaaS являются Back4app Containers, AWS ECS, Azure ACI и Google GKE.

Узнать больше о CaaS можно в статье Что такое CaaS – контейнер как сервис?

Развертывание контейнера Docker в Back4app Containers

В этой части статьи мы закодируем, докеризуем и развернем простое приложение Next.js в контейнерах Back4app.

Что такое Back4app Containers?

Back4app Containers – это бесплатная платформа с открытым исходным кодом для развертывания и масштабирования приложений в глобально распределенных контейнерах. Она позволяет вам сосредоточиться на своем программном обеспечении и быстрее развертывать его, не заботясь о DevOps. Платформа тесно интегрирована с GitHub, имеет встроенную систему CI/CD и позволяет запустить приложение в считанные минуты!

Зачем использовать контейнеры Back4app?

• Хорошо интегрируется с GitHub
• Развертывание с нулевым временем простоя
• Прост в использовании и имеет бесплатный уровень
• Отличная поддержка клиентов

Введение в проект

Мы создадим простое веб-приложение TODO с постоянным хранилищем. Приложение позволит пользователям добавлять, удалять и отмечать задачи как выполненные. Мы создадим его с помощью Next.js, React и Zustand для управления состояниями и их сохранения. Наконец, мы докеризуем приложение и развернем его на Back4app Containers.

Конечный продукт будет выглядеть так:

Пререквизиты:

• Опыт работы с JavaScript ES6
• Базовое понимание React и Next.js
• Умение пользоваться Git и GitHub

Код приложения

Инициализация проекта

Давайте начнем с создания нового проекта Next.js.

Самый простой способ загрузить проект Next.js – использовать утилиту create-next-app. Откройте терминал и выполните следующую команду:

$ npx create-next-app@latest

√ What is your project named? ... nextjs-todo
√ Would you like to use TypeScript with this project? ... No
√ Would you like to use ESLint with this project? ... Yes
√ Would you like to use `src/` directory with this project? ... No
√ Would you like to use experimental `app/` directory with this project? ... No
√ What import alias would you like configured? ... @/*

Success! Created a new Next.js app in C:\Users\Nik\WebstormProjects\nextjs-todo.

Затем запустите сервер:

$ npm run dev

Перейдите по адресу http://localhost:3000, и вы увидите целевую страницу Next.js, созданную по умолчанию.

Material UI

Мы можем упростить процесс создания пользовательского интерфейса с помощью Material UI – библиотеки компонентов React, которая следует Material Design от Google. Эта библиотека предоставляет разнообразный выбор готовых к использованию компонентов, что делает создание пользовательских интерфейсов простым и эффективным.

Не стесняйтесь заменить Material UI на другой фреймворк пользовательского интерфейса, например React Bootstrap или Ant Design.

Чтобы добавить Material UI в проект, запустите его:

$ npm install @mui/material @emotion/react @emotion/styled

В Material UI по умолчанию используется шрифт Roboto. Давайте установим его с помощью:

$ npm install @fontsource/roboto

Далее перейдите в файл _app.js и добавьте следующие импорты в верхней части файла:

Пользовательский интерфейс

Наше веб-приложение будет содержать следующие две страницы:

1. / отобразит список задач
2. /add позволит пользователям добавить новую задачу

Начнем с индексной страницы.

Чтобы сделать наш код более организованным, создайте в корне проекта новую директорию с именем components. В этой директории создайте новый файл Task.js со следующим содержимым:

Затем используйте только что созданный компонент в index.js для отображения задач:

1. Мы использовали хук React useState(), чтобы создать состояние для задач.
2. Мы заполнили массив задач фиктивными данными.
3. Мы использовали компоненты MUI и компонент Task для отображения задач (или сообщения, если задач еще нет).

Запустите сервер разработки:

$ npm run dev

Перейдите по адресу http://localhost:3000, и вы увидите список задач:

Давайте создадим страницу для добавления заданий.

Создайте новый файл add.js в каталоге pages:

Этот код отображает простую форму, которая позволяет пользователям добавлять новые задачи.

Перезапустите сервер и перейдите по адресу /add или нажмите кнопку “Добавить задачу” в правом верхнем углу экрана. Вы должны увидеть что-то вроде этого:

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

Управление государством

Для работы с глобальным состоянием мы будем использовать Zustand – небольшую, быструю и масштабируемую библиотеку управления состоянием для React-приложений.

Начните с установки его через npm:

$ npm install zustand

Далее нам нужно создать магазин.

Чтобы сделать наш код более упорядоченным, давайте создадим специальную папку store для глобального состояния. В этой папке создадим файл storage.js со следующим содержимым:

1. Zustand create() создает магазин.
2. Для сохранения состояния в localStorage мы использовали промежуточное ПО persist().
3. tasks – массив, содержащий задания пользователя.
4. addTask, deleteTask, markTaskAsDone – это методы для работы с массивом задач.

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

Начните с перехода к index.js и измените его следующим образом:

Не забудьте добавить импорт в верхней части файла:

import useGlobalStore from "@/store/storage";

Далее перейдите к файлу components/Task.js и измените его следующим образом:

Наконец, перейдите в pages/add.js и сделайте функцию handleSubmit() для отправки задания:

Опять же, не забывайте об импорте:

import useGlobalStore from "@/store/storage";

Отлично, теперь наше веб-приложение использует Zustand для работы с глобальным хранилищем и сохраняет его через localStorage. Не стесняйтесь повторно запустить приложение и убедиться, что все работает.

Приложение Dockerize

Для выполнения следующих шагов вам потребуется установить Docker. Самый простой способ установить Docker – загрузить Docker Desktop.

Убедитесь, что у вас запущен Docker:

$ docker --version

Docker version 20.10.22, build 3a2c30b

Настройте Next.js

Сначала перейдите в файл next.config.js и установите вывод на "standalone", как показано ниже:

Изменение этого параметра приведет к созданию автономной версии нашего приложения Next.js в следующей сборке. Автономное приложение можно развернуть без установки node_modules. Автономная сборка также поставляется со встроенным веб-сервером.

Dockerfile

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

Создайте в корне проекта файл Dockerfile со следующим содержимым:

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

1. Этап установки зависимостей копирует файл зависимостей и устанавливает их.
2. На этапе сборки происходит копирование зависимостей и сборка проекта через npm.
3. Этап runner копирует автономную сборку и обслуживает ее через автономный сервер.

Наконец, мы открыли порт, который Back4app Containers будет использовать для отображения приложения.

Для получения дополнительной информации об использовании Docker с Next.js ознакомьтесь с репозиторием with-docker.

.dockerignore

Перед тем как Docker соберет образ, он ищет файл .dockerignore. Файл .dockerignore позволяет нам определить, какие файлы мы не хотим включать в образ. Это может значительно уменьшить размер образа. Он работает аналогично файлу .gitignore.

Создайте в корне проекта файл .dockerignore со следующим содержимым:

Не забудьте добавить все дополнительные каталоги или файлы, которые вы хотите исключить.

Сборка и запуск образа

Переходим к созданию и маркировке нашего образа Docker:

$ docker build -t nextjs-todo:1.0 .

В списке изображений должно появиться новое изображение:

$ docker images

REPOSITORY        TAG       IMAGE ID       CREATED       SIZE
nextjs-todo       1.0       7bce66230eb1   2 hours ago   160MB

Наконец, используйте образ для создания нового контейнера Docker:

$ docker run -it -p 3000:3000 -d nextjs-todo:1.0

> [email protected] dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000

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

Отлично, теперь ваше приложение работает в контейнере! Перейдите по адресу http://localhost:3000 и вы увидите ваше приложение TODO.

GitHub

Чтобы развернуть приложение на Back4app Containers, вам нужно загрузить исходный код в репозиторий GitHub. Создайте новый репозиторий на GitHub, добавьте в него удаленный файл, добавьте .gitignore и зафиксируйте свой код. Как только ваш код будет размещен на GitHub, переходите к следующему шагу.

Если вы просто хотите протестировать Back4app Containers, не стесняйтесь форкнуть репо back4app-containers-nextjs и установить его вместо этого.

Развертывание приложения в контейнерах Back4app

Следующие шаги потребуют от вас наличия учетной записи Back4app. Если он у вас уже есть, войдите в него, в противном случае зарегистрируйтесь в бесплатном аккаунте.

Для работы с Back4app нам сначала нужно создать приложение. Когда вы войдете в свою панель управления, вы увидите список ваших приложений. Нажмите на “Создать новое приложение”, чтобы создать новое приложение.

Далее выберите “Контейнеры как сервис”.

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

Выберите хранилище, которое вы хотите развернуть, нажав на кнопку “Выбрать”.

Далее Back4app попросит вас настроить окружение. Выберите имя приложения, я выберу nextjs-todo. Не стесняйтесь оставить все остальное по умолчанию.

И наконец, нажмите “Создать приложение”, чтобы автоматически создать приложение и развернуть его.

После этого вы будете перенаправлены в детали приложения, где сможете просмотреть журналы развертывания.

Подождите несколько минут, пока приложение развернется, и вуаля! Ваше приложение теперь работает на Back4app Containers. Чтобы увидеть ваше приложение в действии, нажмите на зеленый URL, показанный слева.

Заключение

На протяжении всей статьи мы объясняли, что такое Docker, каковы его преимущества и как его можно интегрировать в рабочий процесс. К этому моменту вы уже должны уметь кодировать, докеризировать и разворачивать свои собственные приложения Next.js в контейнерах Back4app.

Окончательный исходный код доступен в репозитории back4app-containers-nextjs GitHub.

ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ