Рубрики
Uncategorized

Настройка рабочего процесса CI / CD на действиях GitHub для приложения React (с страницами GitHub и CodeCov)

В этом руководстве я собираюсь показать вам, как создать простой рабочий процесс, который я использую на моем личном про … Теги с GitHub, React, DevOps, JavaScript.

В этом руководстве я собираюсь показать вам, как создать простой рабочий процесс, который я использую на моих личных проектах с реагированием.

Этот рабочий процесс создан на Действия GitHub Будет ответственность за автоматическое тестирование исходного кода, генерировать отчет о проведении тестового покрытия и загрузить его на Кодеков , построить и разверните проект на Страницы GitHub Отказ Все эти задания активируются событием Push или Pull Event на ветке Master.

Весь исходный код можно найти в этом репозитории:

Dyarleniber/React-Workflow-GH-действия

Исходный код сообщения: Настройка рабочего процесса CI/CD на действиях GitHub для приложения raction (с страницами GitHub и CodeCov)

Действия GitHub позволяют автоматизировать, настраивать и выполнять рабочие процессы разработки программного обеспечения прямо в вашем репозитории GitHUB.

Рабочий процесс — это настраиваемый автоматизированный процесс, состоит из одной или нескольких заданий. Вы можете настроить свои рабочие процессы для выполнения, когда случается определенная активность на GitHub, в запланированном времени или когда происходит событие за пределами GitHub.

Конфигурация рабочего процесса определяется файлом yaml. GitHub предоставляет предварительно настроенные шаблоны рабочего процесса.

Во-первых, на вашем репозитории React App Github перейдите на главную страницу репозитория, нажмите «Действия».

Затем вы увидите предложения о шаблонах CI, которые лучше всего подходят для вашего проекта. Вы можете использовать шаблоны рабочих процессов в качестве пуска для создания вашего пользовательского рабочего процесса. В этом случае нажмите Настроить этот рабочий процесс, под названием Node.js.

Наконец, вы увидите файл yaml по умолчанию:

# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions

name: Node.js CI

on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [10.x, 12.x, 14.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: npm ci
    - run: npm run build --if-present
    - run: npm test

Существует 2 события, которые вызывают рабочий процесс на запросе Push или Pull. Виртуальная среда, используемая для запуска рабочего процесса, является машина Ubuntu в последней версии.

В разделе разделения используются 2 действия и 3 сценария NPM. Первое действие Действия/Оформление @ v2 Это стандарт, который вы должны включить в ваш рабочий процесс перед другими действиями, когда ваш рабочий процесс требует копии кода вашего репозитория. Второй, как предполагает имя, это настроен для Node.js, как вы можете видеть, настроек выполнен в разных версиях Node.js через массив со всеми используемыми версиями.

Помимо этих действий, вы можете просматривать искать действия в Github Marketplace использовать в ваших рабочих процессах.

Github Marketplace — это центральное расположение для вас, чтобы найти действия, созданные сообществом GitHub.

Давайте начнем изменение имени, версия Node.js и сценарии NPM, используемые в рабочем процессе:

name: CI/CD

on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [12.x]

    steps:
    - name: Checkout repository
      uses: actions/checkout@v2

    - name: Set up Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}

    - name: Install dependencies
      run: npm install

    - name: Run the tests
      run: npm test

    - name: Build
      run: npm run build

После настройки Node.js теперь мы устанавливаем зависимости, выполняя тесты и построение приложения.

Вы можете определить имя для каждого шага.

Теперь мы собираемся использовать CodeCov для загрузки и сравнения отчетов о тестовом покрытии. CodeCov является одним из самых популярных исследований кода, и он полностью бесплатный для проектов с открытым исходным кодом.

Во-первых, перейдите к Веб-сайт кодеков И создайте учетную запись, вы можете использовать учетную запись GitHub, чтобы зарегистрироваться.

Затем доступа к учетной записи на веб-сайте, щелкните репозитории после того, как нажмите «Добавить новый репозиторий» и выберите «Репозиторий, который вы хотите использовать».

Вы увидите токен, этот токен не будет полезен, если ваш репозиторий является публичным, в противном случае, если ваш репозиторий является частным, вы должны скопировать его, так как вам нужно будет использовать его позже.

Есть Действие Доступно в Github Marketplace , что легко загружать отчеты в кодеков, мы будем использовать его.

Первое, что нам нужно сделать, это изменить NPM тест Команда для создания тестовых отчетов:

- name: Run the tests and generate coverage report
  run: npm test -- --coverage

После этого включите следующие действия в рабочем процессе:

- name: Upload coverage to Codecov
  uses: codecov/codecov-action@v1

Если у вас есть репозиторий, вы должны включить токен кодеков через секрет Это делает ваш токен доступным в рабочем процессе. Нравится:

- name: Upload coverage to Codecov
  uses: codecov/codecov-action@v1
  with:
    token: ${{ secrets.CODECOV_TOKEN }}

Мы создадим секрет на GitHub для развертывания в на мгновение.

Мы будем использовать страницы GitHub для развертывания нашего приложения. Страницы GitHub являются публичными страницами, размещенными и опубликованными через GitHub.

Прежде чем добавлять новые шаги на рабочий процесс, нам нужно установить и настроить новый пакет в проекте.

  1. Добавить домашнюю страницу в package.json Отказ

Откройте свой package.json И добавьте поле домашнего страницы для вашего проекта:

"homepage": "https://myusername.github.io/my-app",
  1. Установить Gh-Pages и добавить Развертывание к Скрипты в package.json Отказ

Бегать:

$ npm install --save gh-pages

Добавьте следующие сценарии в вашем package.json :

"predeploy": "npm run build",
"deploy": "gh-pages -d build",

предраспределение Сценарий запустится автоматически перед Развертывание бежит.

Теперь мы собираемся создать новый токен доступа, чтобы развернуть наше приложение через рабочий процесс.

Перейти к Личный доступ к тонкам токенов В настройках разработчика вашего профиля GitHub и нажмите Создать новый токен.

Заполните ноту (что это за токен?) И в области REPO выберите только первые 4 варианта.

Скопируйте генерируемый токен.

Теперь, чтобы использовать этот токен в рабочем процессе на действиях GitHub, мы должны создать секрет для нашего хранилища.

Секреты зашифрованы переменные среды, которые позволяют хранить конфиденциальную информацию в вашем хранилище. Секреты, которые вы создаете, доступны для использования в рабочих процессах действий GitHub.

На GitHub перейдите на главную страницу репозитория в качестве имени вашего репозитория нажмите «Настройки». В левой боковой панели нажмите Секреты. И, наконец, нажмите Добавить новый секрет.

Введите имя для вашего секрета в поле «Имя ввода», например Jobing_deploy_access_token. .

Введите значение для вашего секрета (который должен быть токен личного доступа Мы только что создали).

Нажмите Добавить секрет.

Наконец, мы можем включить сценарий NPM запустить развертывание как последний шаг в нашем рабочим процессе.

Но до этого мы должны сделать некоторые конфигурации в Git. Чтобы убедиться, что он будет иметь весь необходимый доступ, чтобы иметь возможность развернуть приложение.

Ваш последний шаг на вашем рабочем процессе должен быть таким так:

- name: Deploy
  run: |
    git config --global user.name $user_name
    git config --global user.email $user_email
    git remote set-url origin https://${github_token}@github.com/${repository}
    npm run deploy
  env:
    user_name: 'github-actions[bot]'
    user_email: 'github-actions[bot]@users.noreply.github.com'
    github_token: ${{ secrets.ACTIONS_DEPLOY_ACCESS_TOKEN }}
    repository: ${{ github.repository }}

Имя и информация по электронной почте не обязательно должны быть вашей реальной информацией. И вы должны заменить Jobing_deploy_access_token. с именем секрета, который вы только что создали.

github.repository Переменная автоматически получит имя вашего репозитория.

Чтобы узнать больше о переменных средах на действиях GitHub, пожалуйста, Прочитайте эту статью Отказ

После добавления команды развертывания на вашем рабочем процессе нажмите «Пуск» и нажмите «Сделать новый файл».

Ваш последний файл рабочего процесса должен быть таким:

name: CI/CD

on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [12.x]

    steps:
    - name: Checkout repository
      uses: actions/checkout@v2

    - name: Set up Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}

    - name: Install dependencies
      run: npm install

    - name: Run the tests and generate coverage report
      run: npm test -- --coverage

    - name: Upload coverage to Codecov
      uses: codecov/codecov-action@v1

    - name: Build
      run: npm run build

    - name: Deploy
      run: |
        git config --global user.name $user_name
        git config --global user.email $user_email
        git remote set-url origin https://${github_token}@github.com/${repository}
        npm run deploy
      env:
        user_name: 'github-actions[bot]'
        user_email: 'github-actions[bot]@users.noreply.github.com'
        github_token: ${{ secrets.ACTIONS_DEPLOY_ACCESS_TOKEN }}
        repository: ${{ github.repository }}

Убедитесь, что параметры GitHub Pages в настройках проекта GitHub устанавливаются для использования филиала Gh-Pages:

Теперь, в каждом Push или Pull Event Event на ветке Master Friends, рабочий процесс CI/CD будет активирован. И вы сможете увидеть, прошли ли все шаги или нет.

Вы также можете добавить значок статуса рабочего процесса в ваш репозиторий. Значки состояния показывают, не проходит ли рабочий процесс в данный момент или прохождение. Общее место для добавления значка состояния находится в Readme.md Файл вашего репозитория, но вы можете добавить его на любую веб-страницу, которую вы хотите.

Это URL по умолчанию для добавления значка состояния рабочего процесса, предоставленного действиями GitHub:

https://github.com///workflows//badge.svg

Если ваш рабочий процесс использует ключевое слово имени, вы должны ссылаться на рабочий процесс по имени. Если название вашего рабочего процесса содержит белое пространство, вам нужно заменить пространство с помощью строки URL-URL% 20.

Для получения дополнительной информации о Github Действия Рабочий процесс Статус значок, Прочитайте эту статью Отказ

Например, это будет значок, который я поставим в моем Readme.md файл:

![CI/CD](https://github.com/dyarleniber/react-workflow-gh-actions/workflows/CI/CD/badge.svg)

CodeCov также предоставил значок, который вы можете использовать в ваших проектах. Это пример URL:

[![codecov](https://codecov.io/gh///branch/master/graph/badge.svg)](https://codecov.io/gh//)

В моем случае мой URL будет:

[![codecov](https://codecov.io/gh/dyarleniber/react-workflow-gh-actions/branch/master/graph/badge.svg)](https://codecov.io/gh/dyarleniber/react-workflow-gh-actions)

Вы также можете использовать этот удивительный веб-сайт: Shields.io настроить ваши значки. Доступ к веб-сайту вы увидите много вариантов категорий значков, которые вы можете использовать, такие как сборка, покрытие кода, размер, загрузки, лицензия и так далее. В каждой категории вы можете выбрать услугу, которую вы используете, заполните имя репозитория, настройте, как предпочитаете, и скопируйте ссылку значка.

Например, это будет моим пользовательским значком покрытия:

[![Codecov](https://img.shields.io/codecov/c/github/dyarleniber/react-workflow-gh-actions)](https://codecov.io/gh/dyarleniber/react-workflow-gh-actions)

Я также включал номер лицензии:

![License](https://img.shields.io/github/license/dyarleniber/react-workflow-gh-actions)

Эти значки в вашем Readme.md Файл, должен выглядеть так:

Вы можете исследовать Shields.io Веб-сайт и смотрите различные варианты имеющихся значков.

Чтобы сделать ваши рабочие процессы быстрее и эффективнее, вы можете создавать и использовать кеши для зависимостей и других общим повторно используемых файлов.

GitHub может кэшировать зависимости, которые вы часто используете в рабочих процессах. Работа на Github Hosted Runners Начните в чистой виртуальной среде и должны загружать зависимости каждый раз, вызывая повышенное использование сети, более длительное время выполнения и повышенную стоимость.

Чтобы кэшировать зависимости для работы, вам нужно использовать GitHub кэш действие. Действие извлекает кеш, идентифицированный уникальным ключом. Для получения дополнительной информации см. Действия/кэш Отказ

В нашем случае мы можем создать новый кеш, когда пакеты в Package-lock.json Изменение файлов или при изменении операционной системы бегуна. Клавиша кэша использует контексты и выражения для генерации ключа, который включает операционную систему Runner и хэш SHA-256 Package-lock.json файл.

Вы должны включить следующий фрагмент кода перед установкой зависимостей:

    - name: Cache dependencies
      uses: actions/cache@v2
      with:
        path: |
          **/node_modules
        key: ${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}

ключ требуется. Это ключ, созданный при сохранении кеша и ключа, используемого для поиска кэша. Клавиши имеют максимальную длину 512 символов.

путь требуется. Это путь к файлу на бегунке к кэше или восстановлению. Это может быть абсолютный путь или относительно рабочего каталога. Ввод PATH должен быть каталогом. Вы не можете кэшировать один файл.

Восстановление клавиш является дополнительным параметром. Это упорядоченный список альтернативных ключей для использования кэша, если к ключу не произошло никакого удара кэша.

кэш Действие попытается восстановить кеш на основе ключ Вы предоставляете. Когда действие находит кеш, действие восстанавливает кэшированные файлы на путь Вы настраиваете. Если нет точного совпадения, действие создает новую запись кэша, если задание успешно завершится. Новый кеш будет использовать ключ Вы предоставили и содержат файлы в дорожка каталог.

Оригинал: «https://dev.to/dyarleniber/setting-up-a-ci-cd-workflow-on-github-actions-for-a-react-app-with-github-pages-and-codecov-4hnp»