Действия GitHub набирают популярность для своей простоты и для того, что в Github уже живут тонна репозиториев. С общей доступностью действий теперь легко включить практику CI/CD в ваш репозиторий. Прежде чем использовать, чтобы использовать сторонние инструменты, такие как TRAVIS CI, CIRCLECI или другие поставщики CI/CD. Но с действиями GitHub мы можем сохранить все наши процессы CI/CD рядом с нашим репозиторий одним простым Ямл файл.
В этом посте мы собираемся быстро исследовать, как мы можем постоянно развернуть наши статические сайты для AWS S3, используя действия GitHub. Этот пост предполагает, что вы размещаете статический сайт из AWS S3 и что у вас есть репозиторий Git для этого сайта, живущего в GitHub. Если у вас в настоящее время нет статического сайта, размещенного на AWS S3, рассмотрите возможность проверки этого пост, чтобы начать или проверьте мой Узнайте AWS, используя его курс для более глубокого погружения.
Если у вас есть два предварительных условия, о которых позаботятся, давайте погрузимся в настройку рабочего процесса CI/CD для нашего репозитория GitHub.
AWS Настройка Шагов
Прежде чем мы сможем создать наш рабочий процесс, нам нужно настроить пользователя в нашей учетной записи AWS, которому будет разрешено развернуть наш статический веб -сайт в нашем ведре S3. Для этого нам сначала необходимо войти в свою учетную запись AWS и перейти к консоли IAM.
Как только мы должны создать новый пользователь, который будет иметь программное доступу к нашей учетной записи AWS. Мы хотим ограничить этот пользователь только иметь доступ только к нашу учетную запись S3, поэтому мы выберем Amazons3fullaccess Политика разрешений. Смотрите GIF ниже для пошагового руководства.
На последней странице после создания нашего нового пользователя мы видим для них клавиши программного доступа, Access_key и secret_access_key Отказ Скопируйте их в файл где -нибудь, так как мы собираемся добавить их в GitHub Далее.
Настройка наших секретов действия GitHub
Чтобы развернуть в нашем ведре AWS S3 из нашего действия GitHub, нам сначала нужно настроить два новых секрета в нашем репозитории. Эти секреты для нашего AWS_ACCESS_KEY_ID и Aws_secret_access_key. .
Перейдите к Настройки Раздел вашего репозитория GitHub и найдите Секреты раздел на левой стороне. Как только мы собираемся добавить новый секрет для AWS_ACCESS_KEY_ID и вставьте в ключ доступа Мы получили в нашем шаге IAM. Тогда мы собираемся добавить еще один секрет для AWS_SECRET_ACCESS_KEY и вставьте в нашем secret_access_key Отказ В конце концов, у нас должны быть два новых секрета в нашем репозитории GitHub.
У нас есть наш настройки Secrete GitHub, и наш пользователь IAM имеет доступ к контенту загрузки на наше ведро S3. Теперь мы можем настроить наши действия для постоянного развертывания на наше ведро на git pushes.
Настройка непрерывного развертывания через действия GitHub
Действия GitHub используют концепцию рабочий процесс Чтобы определить, какие работы и шаги на этих рабочих работах. Чтобы установить это, мы сначала собираемся создать новый каталог в нашем репозитории, что действия GitHub будут смотреть, чтобы знать, какие шаги для выполнения.
Из корня вашего репозитория запустите следующие команды:
$ mkdir .github/workflows/ $ touch .github/workflows/main.yml
Внутри нашего Main.yml Файл, который мы собираемся добавить следующее:
name: CI
on: [push]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v1
- name: Configure AWS Credentials
uses: aws-actions/configure-aws-credentials@v1
with:
aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
aws-region: us-west-2
- name: Build static site
- run: yarn install && npm run-script build
- name: Deploy static site to S3 bucket
run: aws s3 sync ./dist/ s3:// --delete
Здесь мы видим три шага, определенные в нашем сборка работа. Первый — это действие AWS, которое принимает наши секреты, которые мы настроили, и устанавливает наши учетные данные AWS CLI, используя их. Затем в зависимости от того, как ваш статический веб-сайт создается и настроенный, вы хотите создать сайт, прежде чем загрузить его на S3. Наш последний шаг затем работает AWS S3 Sync через AWS CLI, чтобы синхронизировать нашу Dist папка к нашему ведрю S3. Мы используем --delete Флаг в звонке CLI, чтобы удалить любые файлы, которые находятся в ведре S3, но не в нашем Dist папка.
Теперь, если мы совершаем этот новый файл рабочего процесса, мы должны увидеть в Действия Раздел нашего репозитория GitHub, что работа заканчивается до завершения.
💥🙏 Теперь у нас есть постоянное развертывание, настроенное для нашего статического репозитория веб -сайта, проживающего на GitHub, но развертываем на нашем ведре S3.
Вывод
В настоящее время существуют десятки различных способов постоянного развертывания наших приложений и веб -сайтов. Мы показали, но один из способов сделать это в этом посте, используя действия GitHub и развертывание AWS S3. Но это только одна пара вариантов, и есть еще много таких.
Я надеюсь, что в этом посте вы видели, как легко это может быть создано новое действие GitHub. Это делает настройку простых непрерывных настроек развертывания, как этот ветерок. Кроме того, если вы уже разместите свой статический сайт на AWS, это один маленький шаг, чтобы протолкнуть свой сайт на S3 из действия GitHub.
Хотите проверить мои другие проекты?
Я огромный поклонник сообщества Dev. Если у вас есть какие -либо вопросы или вы хотите поговорить о различных идеях, касающихся рефакторинга, Обратитесь в Twitter или бросить комментарий ниже.
Вне блогов я создал Узнайте AWS, используя его курс Отказ В курсе мы сосредоточены на изучении веб -сервисов Amazon, фактически используя его для размещения, защиты и доставки статических веб -сайтов. Это простая проблема, со многими решениями, но она идеально подходит для наращивания вашего понимания AWS. Недавно я добавил две новые бонусные главы к курсу, которые сосредоточены на инфраструктуре в качестве кода и непрерывного развертывания.
Я также курирую свою собственную еженедельную рассылку. Учитесь, делая информационный бюллетень Полно заполнено удивительным облаком, кодированием и DevOps каждую неделю. Зарегистрируйтесь, чтобы получить его в вашем почтовом ящике.
Оригинал: «https://dev.to/kylegalbraith/deploying-your-static-websites-to-aws-in-style-using-github-actions-a8»