Если вы читали часть 1 этой серии, вы можете перейти к разделу GitFlow. В противном случае начните с самого начала!

Недавно Amplify Framework и AWS Amplify Console добавили поддержку так называемого множественных сред. Поддержка нескольких сред дает вам возможность настроить инфраструктуру и отдельные среды, необходимые для поддержки рабочего процесса вашей команды, не выходя из командной строки, как при взаимодействии с Git.

Amplify вписывается в стандартный рабочий процесс Git, где вы переключаетесь между разными ветвями. Подобно тому, как вы запускаете git checkout BRANCH_NAME", вы запускаете «amplify env checkout ENVIRONMENT_NAME" — Amplify Docs

Подобно тому, как вы можете создать ветку dev, в которой весь код будет объединен, прежде чем объединить его с master, вы можете сделать то же самое с Amplify!

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

Создание проекта Amplify Multi-Env

Прежде чем вы сможете создавать какие-либо проекты с несколькими env, вам сначала нужно установить Amplify CLI.

npm i -g @aws-amplify/cli
# OR
yarn global add @aws-amplify/cli

После того, как вы установили CLI, следующим шагом будет создание нового проекта. В этом примере я буду использовать create-react-app.

npx create-react-app amplify-multi-env && cd amplify-multi-env

Теперь, когда у вас есть проект, вам нужно настроить Amplify.

amplify init

При запросе имени среды введите «master».

Пришло время добавить категорию усиления. В этом примере мы будем использовать аутентификацию, так как она является хорошим примером того, как работают отдельные среды. Чтобы добавить запуск авторизации:

amplify add auth

При появлении запроса выберите «Использовать конфигурацию по умолчанию» для настроек аутентификации.

После добавления аутентификации вам нужно отправить эти изменения в облако:

amplify push

Затем вам нужно будет предоставить пользователям возможность входа / подписки. Для этого я рекомендую использовать компонент более высокого порядка withAuthenticator, предоставляемый пакетом npmaws-amplify-react.

Вам также понадобится пакет aws-amplify, чтобы вы могли настроить Amplify в своем проекте.

npm i aws-amplify aws-amplify-react
# OR
yarn add aws-amplify aws-amplify-react

Обновите src/App.js до следующего:

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

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

Это необходимо, поскольку вы подключите проект к Amplify Console для поддержки CI / CD.

git add .
git commit -m 'initial commit'
git push -u origin master

Теперь, когда ваш проект находится под контролем версий, пришло время подключить его к Amplify Console. Откройте консоль AWS в Amplify service и нажмите Connect App. При появлении запроса:

  • Выберите поставщика системы контроля версий, который вы использовали для этого проекта.
  • Выберите свой репозиторий
  • Выберите ветку master
  • Для развертывания серверной части Amplify также выберите master
  • Создайте служебную роль, чтобы Amplify могла работать от вашего имени

Нажмите «Далее», а затем на следующем экране нажмите «Сохранить и развернуть».

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

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

Рабочие процессы

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

git checkout dev
git pull
amplify env checkout dev
amplify env pull
...
git checkout staging
git pull
amplify env checkout staging
amplify env pull
...
git checkout master
git pull
amplify env checkout master
amplify env pull

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

GitFlow с Amplify Framework

При использовании GitFlow члены команды будут работать над функциями, используя ту же внутреннюю инфраструктуру. В этом типе рабочего процесса члены группы будут проверять одно и то же имя среды при запуске amplify.

Однако сначала вы должны создать свои среды GitFlow для совместного использования. Чтобы создать новую среду, вы снова запускаете amplify init, но на этот раз вместо выбора существующей среды вы создаете новую.

Назовите эту среду «dev».

Вы можете подтвердить, что ваша среда была создана, запустив amplify status. В результате должно получиться что-то вроде изображения ниже:

Как вы можете видеть, категория авторизации еще не создана, хотя мы «усиленно проталкивали» категорию авторизации в основной среде. Идите вперед и продвиньте категорию авторизации через:

amplify push

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

Как видите, пользователь не найден. Это связано с тем, что этот пользователь был создан в другом пуле пользователей, подключенном к «основной» среде усиления. Затем вы захотите зафиксировать эти изменения в ветке dev, чтобы вы могли подключить новую среду к Amplify Console.

git checkout -b dev
git add .
git commit -m 'add dev environment'
git push -u origin dev

Как только это будет сделано, подключите ветку в консоли Amplify. Для этого откройте консоль и выберите свой проект. Затем выберите соединить ветку:

Обязательно выберите dev для серверной среды Amplify.

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

Теперь, когда разработчики хотят поделиться изменениями, они могут проверить ветку dev и среду dev Amplify и добавить новую функцию или исправление. Тогда любой, кому нужен доступ к этим изменениям, сможет проверить dev среду.

Когда это будет завершено, повторите процесс, но на этот раз дайте новой среде усиления и ветке git имя «staging».

Добавление категорий в среду

Допустим, вы хотите добавить API в свое приложение. Вы захотите поработать с ним локально, возможно, пусть ваша команда также поработает с ним и протестирует его перед объединением с промежуточным этапом, а затем освоением и развертыванием. Как бы выглядел этот процесс? Первым делом нужно добавить в приложение категорию api.

amplify add api

Когда вы запустите amplify add api, вам будет предложено несколько вариантов, выберите следующие ответы:

  • Используйте GraphQL
  • Укажите имя API (я использовал ampifymultienvexample)
  • Выберите «Пул пользователей Cognito» для аутентификации (он будет автоматически подключен к пулу пользователей, который мы создали ранее).
  • Выберите "Нет" для аннотированной схемы
  • Выберите "Да" для управляемого создания схемы.
  • В качестве типа шаблона выберите «Единый объект с полями».
  • Выберите да, чтобы редактировать схему сейчас

Теперь замените тип TODO следующим:

type Todo @model @auth(rules: [{ allow: owner }]) {
  id: ID!
  name: String!
  description: String
}

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

amplify push

Когда вы отправляете свою схему в серверную часть, Amplify CLI предложит вам спросить, хотите ли вы, чтобы все соответствующие операции GraphQL были автоматически сгенерированы для вас. Выберите «да» и следуйте подсказкам по умолчанию.

Затем обновите src/App.js с помощью следующего кода, который позволит вам добавлять и перечислять свои TODO:

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

Убедившись, что ваше приложение действительно работает, вы можете сохранять TODO. Пришло время зафиксировать эти изменения в ветке dev.

git add .
git commit -m 'add GraphQL TODO API to app'
git push

Поскольку вы внесли изменения в код, Amplify Console обнаружит изменения в репозитории и запустит для вас новую сборку. Сначала внесите какие-либо обновления в свои серверные службы, если что-то изменилось, затем путем создания и развертывания вашего внешнего интерфейса. Поскольку мы разместили наши изменения локально и не меняли конфигурацию Amplify, Amplify Console не будет перестраивать вашу серверную часть.

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

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

Поскольку Amplify Console предписано использовать среду dev, и вы создали TODO в среде dev, их можно просматривать с локального компьютера или из развернутой версии.

Объединение сред

Теперь, когда вы подтвердили, что ваши среды синхронизированы, и вы успешно добавили категорию api в свой проект, а также протестировали функциональность, пришло время объединить эту среду со средой master, чтобы пользователи производственного приложения теперь могли добавлять TODO. . Чтобы объединить среды, вы следуете потоку на основе git:

git checkout staging
git merge dev
git push

Поскольку Amplify Console собирается перестроить вашу серверную часть при необходимости, нет необходимости делать amplify push локально.

Чтобы убедиться, что все работает, войдите в проект из предварительного просмотра развертывания ветки staging, и вы сможете создавать TODO.

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

Затем, позволив вашей команде просмотреть и протестировать вашу работу в промежуточной среде, вы можете объединить ее в главную и позволить Amplify Console развернуть вашу новую версию.

git checkout master
git merge staging
git push

Код этого примера можно найти здесь, а развернутый проект - здесь.

Если вам понравился этот пост, я настоятельно рекомендую изучить еще несколько удивительных вещей, которые вы можете делать с помощью Amplify и AppSync! Вы можете найти еще несколько интересных ресурсов здесь и здесь.

Кроме того, если вы хотите быть в курсе последних событий, о которых я пишу или над чем работаю, подписывайтесь на меня в Twitter!