Если вы читали часть 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!