Введение

Развертывание веб-приложения Next.js в рабочей среде можно упростить и повысить эффективность при использовании конвейеров AWS (Amazon Web Services) Elastic Beanstalk, Docker и CI/CD с AWS Code Build, Code Deploy и GitLab. В этом руководстве вы узнаете, как настроить современный конвейер развертывания, чтобы ваше приложение было надежным, масштабируемым и простым в обслуживании.

Предварительные условия

Прежде чем приступить к процессу развертывания, убедитесь, что у вас есть:

• Корневой аккаунт AWS или аккаунт IAM с разрешением на создание сред Elastic Beanstalk в AWS

• Docker установлен на вашем локальном компьютере

• Учетная запись GitLab или GitHub с репозиторием для вашего приложения Next.js

• Проект Next.js, готовый к развертыванию

Шаг 1. Настройка AWS Elastic Beanstalk

• Создайте среду Elastic Beanstalk. Войдите в консоль управления AWS, перейдите к Elastic Beanstalk и создайте новое приложение.

• Введите название своего приложения и нажмите «Создать».

• После того, как вы создали приложение, пришло время создать новую среду. Нажмите «Создать новую среду».

• Выберите среду веб-сервера. Имя среды будет иметь суффикс env вместе с именем вашего приложения, и вы можете отредактировать его при желании.

• Введите допустимое имя среды вместе с доменом. Введите имя домена.

• Выберите подходящую платформу. В данном случае в качестве платформы мы выберем Managed Platform и Docker.

• В коде приложения выберите «Пример приложения», поскольку мы будем развертывать собственный код через конвейер кода AWS.

• В пресетах можно оставить значение по умолчанию, однако для производственных приложений желательно использовать экземпляр Высокая доступность. После того, как вы выбрали предустановку, нажмите «Далее».

• Создайте или используйте существующую роль службы. Прежде чем приступить к созданию экземпляра EC2, важно иметь роль службы Elastic Beanstalk вместе с настройкой роли службы EC2.
  Однако, если вы хотите подключиться к экземпляру EC2 по протоколу SSH со своего терминала, добавьте пару ключей EC2 и создайте профиль экземпляра EC2 для выполнения необходимых операций.

• Выберите VPC, в котором вы хотите развернуть экземпляр EC2.

• После выбора VPC выберите подсеть в каждой зоне доступности. Чтобы балансировщик нагрузки и экземпляры работали в одних и тех же общедоступных подсетях, назначьте экземплярам общедоступные IP-адреса, как показано на рисунке.

• Поскольку нам не нужно настраивать базу данных, мы можем перейти к следующему шагу, нажав «Далее».

• В качестве корневого тома мы выберем SSD общего назначения.

• Теперь из группы безопасности вы можете выбрать уже существующую группу безопасности или оставить ее как есть, и Elastic Beanstalk создаст ее для вас при настройке экземпляра EC2.

• При развертывании для производственных целей всегда рекомендуется настроить автоматическое масштабирование и выбрать тип экземпляра, который Elastic Beanstalk будет создавать для обслуживания трафика. Мы пойдем с семейством t3.

• Нажмите «Далее».

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

• Мы также снимем флажок с обновлений управляемой платформы, поскольку они не требуются для демонстрационного веб-сайта.

• Оставьте остальные настройки без изменений и нажмите «Далее».

• Наконец, проверьте внесенные изменения и нажмите «Отправить».

• Elastic Beanstalk запустит вашу среду, и это займет некоторое время.

• После успешного запуска вы увидите экран поздравлений.

Шаг 2. Создайте приложение Next.js (или используйте существующее).

• Чтобы создать приложение Next.js, откройте терминал, перейдите в каталог, в котором вы хотите создать приложение, и выполните следующую команду:

npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter" 

Если у вас уже есть готовый код, вы можете перейти к следующей части

• Теперь у вас есть новый каталог под названием nextjs-blog. Давайте перейдем к этому:

cd nextjs-blog 

Затем выполните следующую команду:

npm run dev 

Это запустит «сервер разработки» вашего приложения Next.js (подробнее об этом позже) на порту 3000.

Давайте проверим, работает ли он. Откройте http://localhost:3000 в своем браузере.

• Теперь пришло время создать Dockerfile в приложении.

• Создайте файл с именем Dockerfile в корне вашего приложения и добавьте следующий код:
  

FROM node:18-alpine 

RUN mkdir -p /app 

WORKDIR /app 

COPY . . 

RUN npm install 

RUN npm run build 

EXPOSE 3000 

CMD ["npm", "start"] 

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

docker build -t testapp . 

После успешной сборки запустите приложение с помощью следующей команды:

docker run -p 3000:3000 testapp 

• Создайте файл с именем buildspec.yml в корне вашего приложения и добавьте следующий код. Этот файл будет использоваться на более позднем этапе при настройке конвейера кода в AWS.

version: 0.2 

artifacts: 

  type: zip 

  files: 

    - '**/*' 

• После добавления этих файлов в новый или существующий код отправьте эти изменения в удаленный репозиторий на Gitlab или GitHub.

Шаг 3. Настройка конвейера кода

• Войдите в консоль управления AWS, перейдите в раздел «Конвейер кода» и нажмите «Создать конвейер».

• Введите допустимое имя конвейера и выберите режим выполнения для конвейера. В нашем случае мы выберем «В очереди» (требуется тип конвейера V2).

• Создайте новую роль службы, если она еще не существует, или выберите существующую роль службы и нажмите «Далее».

• У поставщика источника выберите, где хранятся ваши артефакты. Мы выберем «Gitlab».

• Из списка подключений выберите существующее подключение или создайте новое подключение.

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

• В качестве типа триггера мы выберем «Без фильтра» и нажмем «Далее».

• Далее мы выбираем поставщика сборки. В нашем случае мы выберем AWS Code Build. Выберите регион или оставьте регион AWS по умолчанию.

• Затем создайте новый проект в Code Build, нажав «Создать проект». Откроется новое окно. Введите имя проекта и оставьте все внутри среды по умолчанию.

• При указании спецификации сборки обязательно выберите «Использовать файл спецификации сборки». Это тот же файл, который мы создали ранее. Остальные настройки оставьте по умолчанию и перейдите к следующему шагу.

• Когда вы нажмете «Продолжить работу с конвейером кода», окно автоматически закроется и вы вернетесь на экран конвейера кода.

• Укажите тип сборки как одиночная сборка и нажмите «Далее».

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

• Выберите имя приложения, имя среды, настройте параметры отката и нажмите «Далее». Просмотрите настройки конвейера кода и нажмите «Создать конвейер».

Шаг 4: Сайт работает!

Развертывание веб-приложения Next.js в рабочей среде действительно просто и может быть выполнено более эффективно с помощью конвейеров AWS Elastic Beanstalk, Docker и CI/CD с использованием AWS Code Build, Code Deploy и GitLab.

Вы можете получить к нему доступ, используя URL-адрес, предоставленный Elastic Beanstalk. Вносите изменения локально, и они будут автоматически развернуты при отправке в вашу ветку.

Удачного программирования!!