Это последняя часть серии «Dev-Ops для интерфейсных разработчиков». Я предполагаю, что у вас уже есть:
— Контейнереемое приложение React Application с использованием Docker — развернуто на AWS ECS с помощью Fargate — прикрепленный ELB и домен с контейнером — прикрепленный SSL на ELB и включенные HTTPS -SETUP GitHub Repo для вашего проекта и подтолкнул свой код
1. Настройка проекта CodeBuild
От консоли AWS, перейдите к CodeBuild. Из домашней страницы CodeBuild выберите «Создать проект».
Проект CodeBuild имеет 6-7 частей (на момент написания):
Конфигурация проекта
Введите имя (обязательно), описание (необязательно) и теги (необязательно). Нажмите на «Enable Badge Badge», если вы хотите показать Badge Pass/File Badge на странице Repo Github.
Источник
Выберите GitHub, выберите «Репозиторий в моей учетной записи GitHUB», нажмите «Подключиться с помощью OAuth (вы также можете использовать метод токена доступа, если вы предпочитаете)», затем нажмите «Подключиться к GitHub». Он попросит вас войти в систему и разрешать, если вы намерены авторизовать репозитории из вашей организации, вам также придется предоставлять доступ к организации. После этого он попросит вас ввести свой пароль GitHub.
После ввода пароля GitHub, он отвечает на страницу CodeBuild и от этого выберите «Подтвердить».
Как только уполномочена, вы будете возвращаться в кодовыйБулд. Поиск и выберите «Репо» («My-App» в моем случае), затем введите имя ветви в поле исходного версии (ветвь, с которой вы хотели бы построить E.g. Master в моем случае).
Первоисточник Веб -ook события
Оставьте его не проверять, так как мы запускаем сборку с помощью кодового трубопровода.
Окружающая среда
Выберите: — «Управляемое изображение» как изображение среды — «Ubuntu» в качестве операционной системы — «Стандарт» как время выполнения — последняя версия в раскрывании изображений («AWS/CodeBuild/Standard: 4.0» — последний во время письмо) . редактировать, если вы предпочитаете какое-то пользовательское имя) — Дополнительная конфигурация, как это (если вам не нужно увеличивать вычислительную мощность и т. Д.)
Buildspec.
Введите «buildspec.prod.yml» в поле «Имя BuildSpec» (мы создадим этот файл позже).
Артефакты и журналы
Оставьте эти разделы и нажмите «Создать проект Build»
Создать и нажмите файл BuildSpec
Создайте новый файл в вашем проекте (Rect’s App) Root Dir и назовите его «BuildSpec.Prod.yml» и вставьте в него следующий фрагмент.
version: 0.2
phases:
install:
runtime-versions:
docker: 19
pre_build:
commands:
- $(aws ecr get-login --region $AWS_DEFAULT_REGION --no-include-email)
- REPOSITORY_URI=681373743177.dkr.ecr.us-east-2.amazonaws.com/my-app
- COMMIT_HASH=$(echo $CODEBUILD_RESOLVED_SOURCE_VERSION | cut -c 1-7)
- IMAGE_TAG=${COMMIT_HASH:=latest}
build:
commands:
- docker build -t $REPOSITORY_URI:latest -f Dockerfile.prod .
- docker tag $REPOSITORY_URI:latest $REPOSITORY_URI:$IMAGE_TAG
post_build:
commands:
- docker push $REPOSITORY_URI:latest
- docker push $REPOSITORY_URI:$IMAGE_TAG
- printf '[{"name":"my-app-default-container","imageUri":"%s"}]' $REPOSITORY_URI:$IMAGE_TAG > imagedefinitions.json
artifacts:
files: imagedefinitions.json
Замените имя контейнера («My-App-Contacter-Container») с тем, который вы использовали при создании определения задач в более ранних статьях. Заменить Your_ecr_image_uri_here С URI вашего изображения, которое вы можете получить от AWS ECR. Сохраните файл, совершите и нажмите на ваш репо GitHub.
Примечание *: Убедитесь, что вы предоставляете свое имя DockerFile в «-F Dockerfile.Prod» в фрагменте выше.
Дать доступ к CodeBuild
Разрешения ECR
Теперь вам нужно дать AWS CodeBuild доступ к вашему AWS ECR REPO. Чтобы сделать это, вернитесь в ECR и нажмите на ваше репо. Внутри вашего репо, нажмите «Разрешения» с левой боковой панели.
Нажмите «Редактировать политику JSON» и добавьте следующее JSON на всплывающее окно и нажмите «Сохранить».
{
"Version": "2008-10-17",
"Statement": [
{
"Sid": "new statement",
"Effect": "Allow",
"Principal": {
"Service": "codebuild.amazonaws.com"
},
"Action": [
"ecr:BatchCheckLayerAvailability",
"ecr:BatchGetImage",
"ecr:GetDownloadUrlForLayer"
]
}
]
}
Политики ролей CodeBuild
От консоли AWS Перейдите в IAM и выберите «Политики» с левой боковой панели. Внутри страницы политики нажмите «Создать политику».
Выберите JSON, введите следующий фрагмент и нажмите «Политика просмотра».
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "VisualEditor0",
"Effect": "Allow",
"Action": [
"ecr:CompleteLayerUpload",
"ecr:GetAuthorizationToken",
"ecr:UploadLayerPart",
"ecr:InitiateLayerUpload",
"ecr:BatchCheckLayerAvailability",
"ecr:PutImage"
],
"Resource": "*"
}
]
}
Назовите вашу политику «CodeBuildToecr», дайте описание, если хотите, и нажмите «Создать политику».
Как только политика была создана, пришло время добавить политику в сервисную роль CodeBuild (созданную ранее). Для этого выберите «роли» с левой боковой панели.
Поиск и выберите роль CodeBuild, которая была создана ранее.
Нажмите «Прикрепите политику».
Поиск политики, которую мы создали ранее (I.E CodeBuildToecr), выберите его и нажмите «Присоединить политику».
Теперь мы готовы построить наш проект с помощью CodeBuild. Но нам все еще нужно автоматизировать кодовыйБильд и развертывающую на шаги ECS, поэтому следуйте.
2. Настройка кодовой обработки
От консоли AWS домой, перейдите к кодепопустошению. Нажмите «Создать трубопровод».
Введите имя трубопровода и нажмите «Далее».
Как до того, как перед выбором «GitHub» в качестве поставщика источника используйте OAUTH для предоставления доступа, выберите и поищите repo (My-Reppo в моем случае) и введите имя ветви (Master в моем случае). Нажмите кнопку «Далее».
Выберите «AWS CodeBuild» в качестве поставщика сборки. Поиск и выберите проект CodeBuild, который мы создали ранее, и нажмите «Далее».
Выберите «Amazon ECS» в качестве провайдера развертывания. Выберите кластер и сервис, который мы создали ранее (в предыдущих статьях) и нажмите «Далее». Просмотрите конфигурацию и нажмите «Создать трубопровод».
Вот и все. После создания трубопровода он начнет создавать и развертывать автоматически (первый раз). Теперь всякий раз, когда вы нажимаете на мастер-филиал (или ветви, которую вы предоставили ранее), автоматически запускаются.
Вы можете настроить правила уведомления, используя AWS Thatbot с Slack (вот что мы используем) или используйте SNS с любым другим услугами, которые вы предпочитаете. Что я буду покрывать какими-то другими сериями.
Технически эта часть, которую мы сделали, только CD. CI входит в игру, когда мы хотим объединить филиалы/PRS и т. Д., И это требует, чтобы вы написали тестовые случаи, которые выполняются перед объединением.
Для реализации CI (непрерывная интеграция) мы будем использовать рабочие процессы GitHub. Создайте папку в корневом дире вашего приложения. И назвать его «.github». Внутри этой папки создайте подпапку и назовите его «рабочие процессы». Внутри этой папки создают новый файл под названием «RECT.YML». Вы также можете использовать следующие команды для достижения этого.
mkdir .github cd .github mkdir workflows touch react.yml
Откройте «React.yml» с помощью текстового редактора и вставьте следующий фрагмент:
name: React CI
on:
push:
branches: [ master ]
pull_request:
branches: [ master ]
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [12.x]
steps:
- uses: actions/checkout@v2
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}
- run: yarn
- run: yarn test
Сохраните файл. Совершить изменения и нажмите на ваш репо Github. Вот и все. Теперь, когда вы вносите изменения в свой код и создаете новые PR, он автоматически запускает тестовые случаи. Вы можете проверить свой рабочий процесс, перейдя на вкладку «Действия» на GitHUB в вашем репо.
Дальше чтение: https://www.atlassian.com/condinous-delivery/principles/connublue-istegration-vs-delivery-vs-vs-devery
Оригинал: «https://dev.to/mubbashir10/set-up-ci-cd-for-containerized-react-app-using-docker-aws-codebuild-aws-ecs-aws-codepipeline-github-2p11»