В этом руководстве я объясню самый простой способ создания автоматического CI/CD-конвейера, чтобы развернуть Framework7 Приложение к AWS. Цель состоит в том, чтобы ваш трубопровод автоматически создавать и развернуть ваш проект каждый раз, когда вы совершаете изменения в основной филиал GitHub. Для того, чтобы вы следили по мнению, я предполагаю, что у вас уже есть приложение F7, и оно размещено на публичном репозитории GitHub. Если у вас еще нет приложения, используйте F7 CLI создать один. Кроме того, убедитесь, что вы подписаны на AWS Создавая аккаунт там.
1 Создайте новое ведро S3 на AWS
В консоли управления AWS введите «S3» и выберите «Ведра».
Затем заполните такую форму:
- Дать ему имя
- Выберите регион
- Отменить выбор «Заблокировать весь публичный доступ»
- Включить «Я признаю, что текущие настройки могут привести к этому ведрю и объектам в том, чтобы стать публичным»
- Оставить остальное как является
2 Установка AWS S3 Соискатели
В вашем списке ведров нажмите на то, что вы только что создали. Перейдите на вкладку «Разрешения», а затем прокрутите вниз до политики Bucket и нажмите «Изменить». Вставить в следующий код:
{
"Version": "2012-10-17",
"Id": "Policy1589309574299",
"Statement": [
{
"Sid": "Stmt1589309569196",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "REPLACE_WITH_BUCKET_ARN/*"
}
]
}
Отказ от ответственности: Этот фрагмент, который я бесстыдно скопировал из отличного от Anna Aitchison статья на dev.to.
Не сохраняйте еще! Вместо этого измените заполнителей заменить ведро ARN под «ресурс». Вы можете найти свой ARN на вкладке «Свойства» в вашей информационной информации. Также Не удаляйте /* Часть в конце!
3 Включить AWS S3 статический хостинг
- Перейти на вкладку «Свойства»
- Прокрутите вниз до «Статический хостинг сайта»
- Нажмите на редактирование
- Нажмите на Enable
- Под «Индекс документа» положить
index.html. - Оставить остальное как является
- Нажмите «Сохранить изменения»
4 Включить HTTPS.
Это хорошая практика, чтобы всегда включить SSL SSL для нашего приложения Framework7, поэтому давайте сделаем это, используя AWS Cloudfront. Это также предоставляет вам хороший URL CloudFront.net. Чтобы начать выполнить следующие действия:
- Поиск «Cloudfront» в баре поиска консоли AWS и выберите его
- Нажмите на «Создать дистрибутив»
- Под веб, выберите «Начните»
- В «родственнее домене» выберите ведро только что создал
- Для политики просмотра протокола выберите Redirect HTTP в HTTPS. Это заставит SSL
- Оставьте остальные как есть и нажмите «Создать дистрибутив» в правом нижнем углу
- Дайте ему несколько минут, чтобы создать распределение
Как только это сделано, нажмите на вновь созданное распространение. Прокрутите вниз до «доменного имени». Это покажет что-то в форме 123-говкеверов .Cloudfront.net, где 123, кто является случайной серией букв и цифр Что специфично для вашей учетной записи, поэтому это значение будет другим! Ваш сайт будет доступен через https://123whatever.cloudfront.net Позже, когда наш трубопровод CI/CD сделан.
5 Создайте IAM пользователь
Для того, чтобы наши рамки7 CI/CD-канал для работы с действиями GitHub нам нужно предоставить ключ доступа и идентификатор. Для этого должен быть создан новый пользователь на AWS.
- В вашей консоли управления AWS введите «IAM», а затем выберите его
- Слева щелкните «пользователи»
- Нажмите на «Добавить пользователя»
- Выберите имя
- Установить тип доступа в «Программный доступ»
- В правом нижнем углу нажмите «Далее»
- На следующей странице нажмите «Прикрепите существующую политику напрямую»
- Поиск «S3»
- Выберите «Amazons3fullaccess»
- Нажмите «Далее»
- Пропустить «Добавить теги» и нажмите «Далее»
- Ваш результат должен выглядеть что-то вроде на скриншоте ниже
- Нажмите «Создать пользователя»
Важный: На следующей странице скопируйте оба ключа доступа и секретную клавишу доступа и храните их на компьютере безопасным способом.
6 Добавить секреты на Github
Я предполагаю, что вы опубликовали свое приложение Framework7 в репозиторий GitHub. Если вы этого не сделали, сделайте это сейчас.
- В вашем репо Перейдите в «Настройки»
- Затем выберите «Секреты» на левой стороне
- Нажмите на «Новый секрет репозитория»
- Как имя введите aws_access_key_id
- В качестве значения введите свой ключ доступа, который вы получили на предыдущем шаге
- Повторяться
- Aws_secret_access_key.
- S3_bucket
- S3_bucket_region.
Кончик: Чтобы найти правильные значения для S3_BUCKET и S3_BUCKET_REGION Перейдите в свой список ведров в AWS, выберите ведро и откройте вкладку «Свойства». Вы найдете здесь ценности. В моем случае S3_Bucket_Region есть EU-Central-1 и s3_bucket это ARN: AWS: S3::: Deploy-Test-2 Отказ
7 Настройка CI/CD-трубопровод на github
- Вернитесь к вашему репо Github
- Выберите «Действия» из верхней панели
- Нажмите Пропустить это и Установите рабочий процесс самостоятельно
- Вставить в следующий код:
name: Framework7 AWS Deploy
on: [push]
jobs:
run:
runs-on: ubuntu-latest
env:
AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
steps: - uses: actions/checkout@v2
- name: Install dependencies
run: npm install
- name: Build
run: npm run build
- name: Deploy
uses: reggionick/s3-deploy@v3
with:
folder: www
bucket: ${{ secrets.S3_BUCKET }}
bucket-region: ${{ secrets.S3_BUCKET_REGION }}
delete-removed: true
no-cache: true
private: true
- Нажмите «Начните Commit» (зеленая кнопка)
- Нажмите на «Commun New File»
- Вернуться к вкладке Действия
- Теперь вы должны увидеть, как:
- Сборка создана
- Приложение подталкивается на AWS
8 Просмотр вашей рамки7 Приложение
Пусть действие GitHub делает свою работу. Это займет пару минут! Он покажет статус для каждого рабочего процесса в таблице на этой странице. Как только это сделано откройте ваше развернутое приложение Framework7, как это: https://123whatever.cloudfront.net/index.html.
Важно: .. Замените 123, когда правильный идентификатор вашего приложения. См. Шаг 4 в этом руководстве. Что будет ваш персональный URL.
Поздравляю!
Теперь мы полностью создали конвейер CI/CD с действиями GitHub и успешно развернули приложение Framework7. Каждый раз, когда вы нажимаете на главную ветку в GitHUB, создается автоматически новая сборка, а обновление развернуто для AWS. Пожалуйста, дайте мне знать, если этот учебник работал для вас в комментариях ниже:)
Вы можете найти больше основателей Framework7 на моем канале YouTube http://www.timoernst.tv
Оригинал: «https://dev.to/timo_ernst/how-to-deploy-a-framework7-app-to-aws-via-ci-cd-56if»