Рубрики
Uncategorized

Введение Для настройки конвейера CI / CD для приложений React Apps

Целью данного урока является создание введение в создание конвейера CI / CD для реагирования приложений. T… Теги с DevOps, React, AWS, CICD.

Настройка конвейера 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»