GitLab включает в себя утилиты, которые позволяют нам создавать конвейеры, которые можно использовать для CI (непрерывная интеграция) и CD (непрерывная доставка).
Мы будем создавать конвейер для проекта React, созданного с помощью create-react-app. Трубопровод будет выполнять 3 функции.
- Строим проект
- Запуск модульных тестов
- Развертывание нашего файла
Сначала мы начнем с создания нашего приложения для реагирования, выполнив следующую команду
npx create-react-app my-app
Затем мы перейдем в GitLab и войдем в систему, затем создадим репозиторий и загрузим наши файлы проекта, используя следующие команды
cd my-app git remote rename origin old-origin git remote add origin YOUR_REPOSITORY_URL git push -u origin --all git push -u origin --tags
Теперь у нас есть репозиторий, отправленный в GitLab. Пришло время создать наш файл CI / CD.
Создайте новый файл с именем «.gitlab-ci.yml» в корне репозитория. Файл gitlab-ci - это файл yaml, содержащий сценарии, которые будут выполняться GitLab Runner. Наш конвейер будет работать под докер-контейнерами.
Начнем с определения образа докера, который будет использоваться конвейером.
image: node:latest
Это означает, что все задания, для которых не предусмотрено изображение, будут выполняться под образом узла.
Теперь давайте определим 3 этапа, которые будет выполнять конвейер; Сборка, тестирование и развертывание.
image: node:latest stages: - build - test - deploy
Это означает, что теперь мы можем назначать задания на один из этапов, описанных выше. Упорядочение элементов по этапам определяет порядок выполнения заданий. Мы начнем с определения 3 заданий: сборки, тестирования и развертывания, и мы предоставим каждому свой этап в конвейере.
image: node:latest
stages:
- build
- test
- deploy
build:
stage: build
script:
-
test:
stage: test
script:
-
deploy:
stage: deploy
script:
-
-
Затем мы определим, что происходит в каждом задании в ключе сценария, мы начнем со сценария сборки. В случае React мы запустим 2 команды для сборки проекта. npm install для установки зависимостей и npm run build для сборки проекта. Мы добавим артефакт, который можно будет скачать. Артефакты заданий загружаются в GitLab и загружаются одним архивом с помощью пользовательского интерфейса GitLab или GitLab API.
build:
stage: build
script:
- npm install
- npm run build
artifacts:
paths:
- build/
Для тестирования проекта запустим npm test.
test:
stage: test
script:
- npm test
Что касается части развертывания, мы будем развертывать в корзине Amazon S3, поэтому нам нужно внести некоторые дополнительные изменения, чтобы иметь возможность использовать aws cli для загрузки. Мы начнем с переопределения базового образа и использования образа докера, в котором установлен aws cli. Затем мы будем использовать следующую команду для загрузки наших файлов со стадии сборки.
deploy:
stage: deploy
image: tstrohmeier/awscli
script:
- aws s3 cp build/ s3://react-cicd-test/ --recursive
Поскольку мы не хотим выполнять автоматическое развертывание, мы добавим флаг вручную в задание развертывания. Теперь для развертывания для развертывания потребуется нажатие кнопки.
deploy:
stage: deploy
image: tstrohmeier/awscli
script:
- aws s3 cp build/ s3://react-cicd-test/ --recursive
when: manual
Теперь файл должен выглядеть так
image: node:latest
stages:
- build
- test
- deploy
build:
stage: build
script:
- npm install
- npm run build
artifacts:
paths:
- build/
test:
stage: test
script:
- npm test
deploy:
stage: deploy
image: tstrohmeier/awscli
script:
- aws s3 cp build/ s3://react-cicd-test/ --recursive
when: manual
На этом этапе конвейер должен работать и иметь возможность развернуть наш проект реакции в корзине S3, однако aws cli необходимы учетные данные, чтобы иметь возможность загружать файлы в нашу корзину.
Итак, нам нужно добавить некоторые переменные среды в репозиторий. В GitLab мы перейдем в наш репозиторий, затем перейдем в Настройки - ›CI / CD -› Переменные.
Добавить описание
Нам нужно будет добавить 2 переменные для aws cli, AWS_ACCESS_KEY_ID и AWS_SECRET_ACCESS_KEY.
Добавить описание
Образ aws cli может автоматически получать учетные данные без редактирования нашего файла gitlab-ci.
Наконец, любая новая фиксация в репозитории запустит конвейер.
Добавить описание
