Привет!! Несколько дней назад я работал с разработчиком на простой целевой странице с нулевыми осложнениями. Ему нужен был простой способ визуализации его изменений, очевидно, в нашей нынешней инфраструктуре AWS.
Лучший способ достичь этого был с помощью GitHub Actions + S3 Static Swebites, и я расскажу вам, как я это сделал.
Шаги
- Предоставьте ковш S3 и пользователь IAM с облачной информацией.
- Добавьте секреты AWS от нашего пользователя IAM в репозиторий GitHub.
- Разверните приложение в ведро S3 с помощью действий GitHub.
Во -первых, мы должны развернуть наши ресурсы с помощью AWS CloudFormation. В следующем шаблоне CF (main.yml) он определен:
- S3 Bucket
- Ковша политика
- IAM пользователь
- IAM Политика встроена
Если вы уже установили AWS CLI:
aws cloudformation create-stack --stack-name your-stack-name --capabilities CAPABILITY_IAM --template-body file://main.yml --parameters ParameterKey=BucketName,ParameterValue=your-unique-bucket-name
В противном случае:
Для этой необходимости войти в консоль AWS -> CloudFormation -> Stack -> Создать мешок -> Загрузите файл шаблона.
Он попросит вас подтвердить, что этот шаблон облачной информации создаст ресурсы IAM, в данном случае, пользователь.
Теперь мы идем за IAM User : https://console.aws.amazon.com/iam/
IAM -> Пользователи -> ваш новый пользователь -> Учетные данные безопасности Ключ доступа -> Создайте ключ доступа
Скачать .csv file
Нам нужно установить AWS_ACCESS_KEY_ID и AWS_SECRET_ACCESS_KEY В разделе «Секреты репозитория GitHub», необходимый для загрузки файлов в наш ковш S3.
S3_Bucket : Название ведра назначения S3_bucket_region : Регион ведра назначения
Настройки -> Секреты -> Новый репозиторий секрет
Я настоятельно рекомендую использовать это непрерывное развертывание только Для сценических сред. По этой причине мы создадим филиал QA.
git checkout -b QA
Создание филиала из ui github
Далее мы создадим наш файл deploy.yml в пути: .github/рабочие процессы
mkdir -p .github/workflows && touch .github/workflows/deploy.yml
Если вы хотите запустить его на определенной ветви, измените ветви
Действие GitHub: https://github.com/Reggionick/s3-deploy .
Наше приложение уже развернуто Github Deaves!
Проверьте свой веб -сайт S3 с последнего вывода CloudFormation:
http://your_bucket_name.s3-website-your_region.amazonaws.com/
Если вы работаете с React, следующий трубопровод может помочь вам:
React-Router 404 Ошибки: https://via.studio/journal/hosting-a-reactjs-app-with-routing-on-aws-s3 Пример CORS-Cloodformation: https://git.io/JtQZK
Если у вас есть какие -либо комментарии или улучшения для этого поста, я был бы рад их получить.
Спасибо за ваше время 👋👨💻.
Оригинал: «https://dev.to/luiscusihuaman/cicd-static-website-to-s3-with-github-actions-4627»