Развертывание приложений Next.js React в рабочей среде (сейчас без)

Развертывание приложений Next.js React в рабочей среде (сейчас без)

Token.ai - это приложение React, в котором используется отличный фреймворк Next.js React от Zeit. Развернуть приложение с помощью Zeit сейчас очень просто, однако развертывание его в AWS Elastic Beanstalk требует немного больше усилий.

Мы развертываем веб-приложение Node.js, содержащееся в образе Docker, на масштабируемой облачной платформе веб-приложений. Это означает настройку платформы веб-приложений (AWS Elastic Beanstalk), службы управления контейнерами Docker (AWS EC2 Container Service), образа контейнера Docker (Dockerfile), артефакта развертывания (Dockerrun.aws.json) и различных npm scripts для управлять всем процессом через командную строку. Token использует предложения AWS для развертывания и хостинга, но, поскольку мы используем Docker, Google Cloud Platform и Heroku также работают.

Обратите внимание, что эта статья предполагает базовые знания Docker и AWS. Кроме того, в командах, скриптах и ​​файлах используются несколько переменных-заполнителей. А именно: идентификатор организации AWS (bestest-aws-org), репозиторий AWS EC2 Container Service (token/this-web-scale), имя приложения AWS Elastic Beanstalk (this-web-scale), среда приложения AWS Elastic Beanstalk (this-web-scale-production), версия приложения (0.0.1) и AWS регион (us-east-1). Замените их своими собственными, если вы копируете и вставляете.

Платформа веб-приложений

Настройка веб-приложения в AWS Elastic Beanstalk - это первый шаг. Выберите среду веб-сервера и Docker в качестве предопределенной конфигурации (в частности, конфигурацию Docker с одним контейнером). После этого создайте столько окружений, сколько захотите. Токен поддерживает промежуточную и производственную среду. Оба они запускают образы Docker из одного репозитория, просто разные версии приложения.

Служба управления контейнерами Docker

Создайте репозиторий (AWS EC2 Container Service) для размещения ваших образов Docker, чтобы на них можно было ссылаться и извлекать их из нашей платформы веб-приложений.

Образ контейнера Docker

Образ Docker определяется с помощью Dockerfile. Вот как сейчас выглядит Dockerfile токена:

Обратите внимание на этап сборки на изображении! Это гарантирует, что все экземпляры вашего приложения Next.js будут иметь одинаковый BUILD_ID.

Примечание: Web Scale 101, автоматическая перезагрузка Next.js и BUILD_ID

Платформа вашего веб-приложения может автоматически масштабироваться по горизонтали, создавая более одного экземпляра, которым управляет балансировщик нагрузки. Next.js автоматически перезагружает самую новую версию вашего приложения, просматривая переменную BUILD_ID. Если ваши экземпляры имеют несовпадающие BUILD_ID переменные, и ваш балансировщик нагрузки направляет трафик на эти экземпляры в промежутке между пользовательскими сеансами, ваши пользователи (ошибочно) столкнутся с перезагрузкой приложения. Не очень забавный факт: именно это побудило нас переключиться с отправки пакета приложений на Elastic Beanstalk на конфигурацию Docker.

Артефакт развертывания

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

Наш артефакт развертывания AWS Elastic Beanstalk Docker выглядит следующим образом:

Скрипты и все вместе

Напомним, что у нас есть следующие настройки:

• Dockerfile
• Репозиторий образов Docker
• Приложение и среда AWS Elastic Beanstalk
• Dockerrun.aws.json

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

Установите AWS CLI, AWS EB CLI и Docker. Настройте интерфейс командной строки AWS с вашими учетными данными AWS.

Интерфейс командной строки AWS EB работает в каталоге .elasticbeanstalk в корне вашего проекта. Настройте это, запустив eb init и выбрав приложение, которое вы создали ранее. Это создаст .elasticbeanstalk/config.yml файл, который требует некоторой модификации, чтобы объявить наш Dockerrun.aws.json файл как артефакт развертывания. Модификация находится в строках 4–5.

Теперь мы готовы управлять процессом развертывания через командную строку.

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

$ eval $(aws ecr get-login --no-include-email --region us-east-1)

Затем необходимо создать образ Docker с тегом версии и тегом latest. Тег имеет формат {{ aws_ecs_docker_image }}:{{ version }} и {{ aws_ecs_docker_image }}:latest (например, token/this-web-scale:0.0.1 и token/this-web-scale:latest).

$ docker build -t token/this-web-scale:0.0.1 -t token/this-web-scale:latest .

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

$ docker tag token/this-web-scale bestest-aws-org.dkr.ecr.us-east-1.amazonaws.com/token/this-web-scale:0.0.1

и та же команда, но для тега latest

$ docker tag token/this-web-scale bestest-aws-org.dkr.ecr.us-east-1.amazonaws.com/token/this-web-scale:latest

Теперь у нас есть образы Docker, помеченные именем локального и удаленного репозитория, latest и версией. Пришло время отправить в репозиторий.

$ docker push bestest-aws-org.dkr.ecr.us-east-1.amazonaws.com/token/this-web-scale:0.0.1

и та же команда, но для тега latest

$ docker push bestest-aws-org.dkr.ecr.us-east-1.amazonaws.com/token/this-web-scale:latest

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

$ eb use this-web-scale-production && eb deploy -- label v0.0.1 -- verbose

Вот почему мы помечаем все образы Docker номерами версии и тегами latest. Это развернет артефакт Dockerrun.aws.json, который ссылается на образ Docker с тегом latest. Это означает, что наш артефакт развертывания на самом деле никогда не изменяется, даже если изменяется версия нашего приложения.

Как и было обещано, вот package.json файл, содержащий все вышеперечисленные команды в виде npm сценариев. Опять же, замените идентификатор организации AWS, репозиторий AWS EC2 Container Service, регион AWS и переменные среды приложения AWS Elastic Beanstalk своими собственными.

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

$ npm run login:docker

$ npm run dockerize

$ npm run deploy

Напишите мне в Твиттер с любыми вопросами, и удачи вам, ботаники!