Настройка конвейера CI/CD для APC APP (2 часть серии)
Целью данного урока является создание введение в создание конвейера CI/CD для реагирования приложений. Этот учебник ориентирован на новичок и не принимает предыдущего опыта в CI/CD. Трубопровод CI/CD — одна из лучших практик для команд DEVOPS для реализации, для доставки кода меняется чаще и надежно.
Что такое непрерывная интеграция/непрерывное развертывание?
Непрерывная интеграция Процесс перемещения подтолнения кода регулярно изменяется к репозиторию для управления исходным кодом, который сопровождается набором мероприятий, таких как анализ статического кода для проверки качества кода, построение приложения, выполняет тесты против тестируемых случаев, обеспечивая следующее Требование и следует за отраслью стандартом. В случае каких-либо неудач команда будет немедленно проинформирована. Работа разработчика, как правило, заканчивается при просмотре запроса на потянутую по команде и объединение его главной ветви. Служба CI/CD перебирается оттуда, запустив все тесты и развертывание кода до производства, сохраняя при этом команду сообщила о результатах каждого важного события. Это позволит нам исправить проблему на ранних этапах нашего развития.
Непрерывное развертывание Является ли автоматизированный процесс развертывания сборки из CI-процесса, непосредственно к производственной среде.
Приведенное ниже изображение изображена архитектура службы трубопровода CI/CD, которую мы собираемся настроить.
Мы собираемся использовать Git для управления исходным кодом. Из локального репозитория мы будем толкать код в Github. Circle CI будет нашим инструментом CI/CD. Мы будем использовать ведра AWS S3 для хранения CDN Cloudfront приложений Action и AWS Cloudfront, что является CDN (сеть доставки контента) для доставки контента.
Мы начнем процесс, создав приложение React.
1> Создание нового приложения RACT
Мы проверим версии узла и пряжи и создаем приложение React App с именем RevectCICD, используя rac ract-app.
PS C:\react> node -v v12.13.0 PS C:\react> yarn -v 1.22.4 PS C:\react> yarn create react-app reactcicd yarn create v1.22.4 [1/4] Resolving packages... [2/4] Fetching packages...
После создания приложения React создается, проверьте структуру каталогов.
PS C:\react> cd reactcicd
PS C:\react\reactcicd> ls
Directory: C:\react\reactcicd
Mode LastWriteTime Length Name
---- ------------- ------ ----
d----- 7/7/2020 1:42 PM node_modules
d----- 7/7/2020 1:41 PM public
d----- 7/7/2020 1:41 PM src
-a---- 6/29/2020 9:58 PM 310 .gitignore
-a---- 7/7/2020 1:42 PM 745 package.json
-a---- 7/7/2020 1:41 PM 2884 README.md
-a---- 7/7/2020 1:42 PM 473034 yarn.lock
2> Создание клавиш SSH для подключения к Счет GitHub
SSH Ключи обеспечивают безопасный способ установить связь между нашей машиной и сервером GitHub. Посмотрите видео ниже видео, если вы хотите понять, как работает ключ SSH.
Создайте клавишу SSH в системе с помощью команды SSH-Keygen. В Windows используйте PowerShell для запуска этой команды. В Mac/Linux мы можем запустить в терминале.
PS C:\react\reactcicd> ssh-keygen Generating public/private rsa key pair. Enter file in which to save the key (C:\Users\preeth\.ssh\id_rsa): Enter passphrase (empty for no passphrase): Enter same passphrase again:
Как только ключи созданы, мы можем проверить его в каталоге .ssh пользователя. id_rsa — это закрытый ключ и id_rsa.pub — это открытый ключ.
PS C:\react\reactcicd> ls C:\Users\1022786\.ssh
Directory: C:\Users\1022786\.ssh
Mode LastWriteTime Length Name
---- ------------- ------ ----
-a---- 7/7/2020 7:58 AM 1692 awsKey.pem
-a---- 6/4/2020 9:44 AM 2610 id_rsa
-a---- 6/4/2020 9:44 AM 576 id_rsa.pub
-a---- 7/7/2020 8:12 AM 587 known_hosts
3> Добавить открытый ключ в Github
Войдите в учетную запись GitHub и нажмите на значок профиля в правом верхнем углу и выберите настройки
Нажмите SSH и GPG клавиши и нажмите «Новый ключ SSH»
Откройте ранее созданный открытый ключ (id_rsa.pub) в текстовом редакторе и скопируйте открытый ключ. Вставьте клавишу SSH на странице и нажмите Добавить клавишу SSH.
Теперь мы сможем получить доступ к вашим репозиториям GitHub с нашей машины.
4> Создать новый репозиторий в Github
Дайте репозиторию имя, описание (необязательно), выберите частный или публичный репозиторий и создать репозиторий.
Как только репозиторий создан, скопируйте URL-адрес GitHub.
Теперь возвращайтесь к терминалу и перемените в папку, где создается приложение RACT. Инициируйте GIT, добавьте все файлы в постановку и выполните первый коммит.
PS C:\react\reactcicd> git init Reinitialized existing Git repository in C:/react/reactcicd/.git/ PS C:\react\reactcicd> git add . PS C:\react\reactcicd> git commit -m "initial commit" On branch master nothing to commit, working tree clean
Используя ранее скопированный URL, добавьте удаленный репозиторий.
PS C:\react\reactcicd> git remote add origin https://github.com/preethamsathyamurthy/reactCICD.git
Теперь нажмите код из локального хранилища на удаленный репозиторий.
PS C:\react\reactcicd> git push -u origin master Enumerating objects: 22, done. Counting objects: 100% (22/22), done. Delta compression using up to 12 threads Compressing objects: 100% (22/22), done. Writing objects: 100% (22/22), 201.01 KiB | 6.93 MiB/s, done. Total 22 (delta 0), reused 0 (delta 0), pack-reused 0 To https://github.com/preethamsathyamurthy/reactCICD.git * [new branch] master -> master Branch 'master' set up to track remote branch 'master' from 'origin'.
Теперь мы можем видеть, что код выталкивается от локального в ваш репозиторий GitHUB.
PS C:\react\reactcicd> git branch * master
Когда мы проверяем наши филиалы Git, мы видим, что у нас есть только мастер-филиал.
Поэтому по умолчанию у нас есть главная ветвь.
Поэтому во время написания этого учебника я думал, что стратегии ветвления и ветвления могут быть объяснены в отдельном посте и написали его.
Стратегия разветвления и ветвления Git
Preetham · 9 · 8 мин читать
К настоящему времени нам будет понимание стратегии ветвления и ветвления. Мы будем следовать той же стратегию ветвления для этого учебника
Быть в курсе!!! Продолжение следует…
Настройка конвейера CI/CD для APC APP (2 часть серии)
Оригинал: «https://dev.to/preethamsathyamurthy/introduction-to-setting-up-a-ci-cd-pipeline-for-react-apps-34ha»