В этом посте вы узнаете, как настроить CI/CD с Next.js на AWS, используя Действия GitHub и Serverless Framework.
Нажмите здесь Чтобы увидеть видео прохождение. Нажмите здесь Чтобы увидеть заполненный пример проекта.
Начиная
1. Создать репо GitHub
Чтобы начать, создайте новый репозиторий GitHUB.
2. Установить AWS Secrets.
Для работы GitHub на работу нужно будет читать AWS-Access-Key-ID и AWS-Secret-Access-Key Для пользователя IAM вы будете использовать для развертывания вашего приложения. Чтобы установить это, нажмите на Настройки тогда Секреты Отказ
Здесь создайте две переменные, один по имени AWS_KEY и один по имени Aws_secret. .
Пользователь IAM должен иметь либо привилегии администратора, либо разрешения, настроенные как перечисленные здесь . Для видео прохождения того, как создать роль IAM, нажмите здесь Отказ
3. Создать новый приложение Next.js
Создайте новое приложение Next.js, используя NPX и изменить в новый каталог:
npx create-next-app my-next-app cd my-next-app
4. Добавить Git Remote.
Используя уникальный адрес REPO GitHub, который вы создали ранее, настройте Git локально с URI.
git remote add origin git@github.com:git-username/project-name.git
5. Создайте файл конфигурации без сервера
Мы будем развертывать приложение Next.js к AWS, используя Serverless Next.js Компонент Отказ
Чтобы включить это, создайте новый файл с именем Serverless.yml В корне проекта и добавьте следующий код:
nextApp: component: "@sls-next/serverless-component@1.18.0"
5. Создание действия GitHub
Далее создайте новую папку в вашем проекте Next.js по имени ..gitub и папка в новой папке по имени рабочие процессы Отказ
В пределах рабочие процессы Папка, создайте новый файл с именем Main.yml и добавьте следующий код:
.Github/WorksPlows/Main.yml
6. Разверните приложение к AWS
Теперь мы разверним приложение. Как только приложение было развернуто, мы проверим новые развертывания, используя действия GitHub.
npx serverless
Когда развертывание завершено, CLI должен распечатать URL-адрес приложения вместе с другой информацией о развертывании:
7. Нажмите код в Github
Далее мы совершим наш код и подтолкнуть к GitHub. Когда этот код развернут, мы должны увидеть обработку действий GitHub:
git add . git commit -m 'initial commit' git push origin main
В пределах вашего репо GitHub нажмите Действия Для просмотра происходящего развертывания.
Видео прохождение
Заключение
Ваш CI/CD-трубопровод теперь должен быть успешно настроен! Когда вы нажимаете новый код, вы также должны увидеть происходящее сборку.
Если вы настроили запрос на строй к Главная Филиал, новая сборка также должна быть выгнана.
Оригинал: “https://dev.to/dabit3/next-js-ci-cd-on-aws-with-github-actions-3502”