Развертывание приложения react на Amazon s3 и действия github

Github actions был представлен компанией GitHub в середине декабря 2020 года и представляет собой платформу для автоматизации рабочих процессов разработчиков. Некоторые из этих рабочих процессов — CI/CD, которые включают в себя непрерывную интеграцию, непрерывную доставку и непрерывное развертывание. CI/CD pipeline позволяет разработчикам эффективно отправлять программное обеспечение, легко и менее рискованно.


Процесс действий GitHub подразделяется на несколько компонентов, а именно

1.Событие
Мы можем определить событие как любое конкретное действие, которое происходит в репозитории и запускает рабочий процесс. Буквально это может быть запрос на вытягивание, запрос на вставку, вклад или даже проблема.
2.Работа
Это шаги в рабочем процессе, которые выполняются после запуска события.
3.Действие
Действия — это отдельные задачи, которые вы можете комбинировать для создания заданий и настройки вашего рабочего процесса.
4.Бегуны
Бегунок — это сервер, который запускает ваши рабочие процессы, когда они срабатывают. Каждый бегунок может запускать одно задание одновременно
5.Рабочий процесс
Рабочий процесс — это автоматизированная процедура, которая может быть настроена на выполнение одной или нескольких операций. Рабочие процессы определяются YAML-файлом, который регистрируется в вашем хранилище и запускается при возникновении события, вручную или по заданному расписанию.

Чтобы начать, мы проведем демонстрацию на примере приложения react.
Выполните следующие шаги для создания базового приложения react


Затем зайдите в свой аккаунт на github и создайте репозиторий на github, как показано ниже. Заполните поля по мере необходимости.


Чтобы настроить действия на github, вы можете создать их непосредственно на вкладке действий на github, как показано ниже, или в корне вашего проекта создать папку под названием .github, внутри нее создать еще одну папку под названием workflows и в этой папке создать yml-файл.
После создания репозитория выберите вкладку action.

Выберите шаблон, который вы хотите использовать, поскольку мы работаем над react-приложением, мы выбираем node js, как показано ниже.


После выбора нажмите configure для настройки и Start commit в правом дальнем верхнем углу. К концу этого вы настроите ваш github action как нужно.

Давайте обсудим содержимое созданного YML-файла **.
Он состоит из следующих частей, как показано на рисунке ниже
**Имя:
Это определяет имя вашего рабочего процесса, которое будет отображаться в поле действия github. Вы можете назвать свой рабочий процесс именем по своему выбору.

On:
Определяет события, которые запускают рабочий процесс. Это может быть одно событие или массив событий.


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


Runs-on:
Это ключевое слово, которое определяет ОС **на которой будет работать ваш рабочий процесс.
Примеры ОС, которые вы можете определить здесь: **ubuntu-latest, self-hosted и т.д.
Матрица сборки
Позволяет тестировать на нескольких платформах и языках.
Пример образца yml-файла


Теперь вы успешно настроили ваш yml-файл.

Давайте подключимся к aws для развертывания

Необходимые условия для AWS s3 **
Учетная запись веб-сервиса Amazon
Вы можете создать его в AWS, если у вас его нет, и выполнить следующие **шаги
Шаг первый . Создание ведра s3

Войдите в свою учетную запись aws и среди сервисов выберите s3


Нажмите на create bucket account и заполните данные, как показано здесь

Ваше ведро будет доступно здесь

Нажмите на ваше ведро (мое называется foodiesbucket-react), выберите вкладку разрешения
И сделайте свой объект общедоступным


убедитесь, что вы отредактировали права собственности на объект, как показано здесь, чтобы избежать ошибки AccessControlListNotSupported:
После успешной настройки bucket, пришло время обновить наш yml файл, добавив некоторые env переменные для связи нашего bucket с репозиторием github.
Вернитесь в репозиторий github, нажмите на настройки, выберите секреты, в выпадающем списке выберите действия.

Нажмите на new repository secrets и мы добавим три секрета, т.е. AWS_ACCESS_KEY_ID **, AWS_S3_BUCKET, AWS_SECRET_ACCESS_KEY.**.
Эти ключи будут сгенерированы непосредственно из вашей учетной записи aws**, перейдя в правый верхний угол вашей учетной записи и выбрав учетные данные безопасности.
Скопируйте секреты и добавьте их, как показано выше.

Мы будем использовать jakejarvis/s3-sync-action, который представляет собой простое действие для синхронизации каталога (либо из вашего репозитория, либо созданного в ходе рабочего процесса) с удаленным S3 bucket.
Обновите ваш файл yml, как показано здесь

После обновления yml повторно запустите рабочий процесс. Это синхронизирует ваш репозиторий github с aws s3 bucket и обновит изменения на вашей приборной панели.


Вы успешно развернули свое приложение.
Нажмите на index.html и щелкните ссылку объекта, которая является url вашего развернутого приложения.

Поздравляем!!! Продолжаем строить!

Оцените статью
devanswers.ru
Добавить комментарий