Рубрики
Uncategorized

Как добавить CI в свой интерфейс с действиями GitHub — Nuxtjs Cate Execution

Alba silvente 💃🏼. @dawntraoz … Теги от ActionHackhackon, CICD, тестирование, NUXT.

Есть! MyBug (3 часть серии)

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

Вступление

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

Что такое постоянная интеграция

Непрерывная интеграция (CI) — это практика развития, где часто часто интегрируют код в общий репозиторий. Идеальный случай заключается в том, что каждая интеграция ( Merge ), может быть проверена автоматическими сборкой и тестами.

Что такое действия github и github рабочий процесс

Действия GitHub помочь вам автоматизировать Ваше рабочие процессы разработки программного обеспечения в одном месте, где вы храните код, https://github.com/ . И, также, Сотрудничать на запросы по тяги и проблемам. С ними вы можете построить функции с конца до конца CI и непрерывное развертывание (CD) непосредственно в вашем хранилище.

Вы можете создавать свои собственные действия или использовать и настраивать действия, разделяемые сообществом, посмотрите на Рынок Отказ

Рабочие процессы Нестандартные автоматизированные процессы, комбинация отдельных задач ( Действия ), что вы можете настроить в своем репозитории для создания, тестирования, пакета, выпуска или развертывания любого проекта.

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

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

Но я также должен сказать, что после того, как увидев, насколько легко можно настроить, отныне я планирую использовать его во всех моих проектах. Я надеюсь, что вы будете чувствовать то же самое, когда закончите этот пост 💜

Подготовьте свой проект

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

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

"lint": "eslint --ext .js, .vue --ignore-path .gitignore ."
"test:unit": "jest"

Кроме того, как я хочу проверить, что мой проект работает в разных операционных системах, мне нужно было добавить файл .Gitattributes в мой проект, чтобы избежать несовместимости с форматом Newlines между OS:

# Enforce Unix newlines
* text=auto eol=lf

Настройка нашего собственного рабочего процесса

Для этой статьи я собираюсь объяснить Есть! MyBug Конфигурация сделана в Nuxtjs , но его можно применять к любому проекту JavaScript, поскольку они построены в той же среде ( Узел ).

Чтобы начать создание файла YAML, у нас есть два варианта:

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

  • 2 — Создать Папка называется ..gitub и добавьте рабочие процессы папка внутри нее. Создайте файл yaml с именем Кабинета или тот, который вы выберете.

Оба варианта будут заканчиваться файлом YAML на пути .Гитеб/рабочие процессы/Ci.yml Отказ

Давайте начнем с конфигурации файла Ci.yml.

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

# Name your workflow
name: CI

# Set on which events you want run the actions.
# In this case the workflow will run on push for master and on pull request for master and develop branches
on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master, develop ]

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

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

Хотя это также дает нам возможность делать это в нашей собственной самосвязной среде.

Как я хотел запустить свой проект в разных операционных системах (Windows, Linux и MacOS) с той же версией узла, я использовал A Стратегия Это создает сборку Матрица для рабочих мест.

jobs:
  # This workflow contains a job called "integration"
  integration:
        # A strategy that defines different variations of an environment to run each job in.
    strategy:
      matrix:
        os: [ubuntu-latest, macos-latest, windows-latest]
        node: [12]
    # The runners that the job will run on
    runs-on: ${{ matrix.os }}

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

А шаг Можно запустить команды, запустить задачи настройки или запустить действие в репозитории. На каждом шаге мы определим некоторые свойства как:

  • Имя , чтобы отобразить на Github
  • использует , чтобы указать действие для запуска и с , пройти пары ключа/значения, определенные действием
  • Если , чтобы предотвратить работу шага, если не будет выполнено условие
  • Беги , чтобы запустить команды на оболочке ОС

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

  • Сначала нам нужно настроить Node.js.

Чтобы добавить Node.js в мою среду, я использовал действие Настройка-узел Проверено GitHub, проходящая узел-версию с параметром Узел Определяется в матрица Мы видели выше.

Поэтому, когда мы должны изменить версию узла, мы должны сделать это только в одном месте.

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

  jobs:
    integration:
      # ...
      # Steps represent a sequence of tasks that will be executed as part of the job
      steps:
        - name: Setup Node.js environment
          uses: actions/setup-node@v1.4.3
          with:
            node-version: ${{ matrix.node }}

        - name: Checkout master branch
          uses: actions/checkout@v2
  • Тогда давайте установим наши зависимости NPM

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

Но поскольку мы хотим сделать это эффективным способом, давайте добавим немного кэш нашему Node_Modules. Для этого я добавил кэш Действие Указание папки путь быть кэшированным ( node_modules ) и явный ключ Для восстановления и сохранения кеша ( Package-lock.json ).

Используя Если Условный доступный в шагах, которые мы можем проверить, если выход этого кэша (кэш-хэш-удар — логический, чтобы указать клавишу совпадения), является true или false, а затем продолжить или избегать выполнения команды.

  jobs:
    integration:
      # ...
      # Steps represent a sequence of tasks that will be executed as part of the job
      steps:

        # ... Before steps ...

        - name: Cache node_modules
          uses: actions/cache@v2.1.0
          with:
            # A list of files, directories, and wildcard patterns to cache and restore
            path: node_modules
            # An explicit key for restoring and saving the cache
            key: ${{ matrix.os }}-node-v${{ matrix.node }}-deps-${{ hashFiles(format('{0}{1}', github.workspace, '/package-lock.json')) }}

        - name: Install dependencies
          if: steps.cache.outputs.cache-hit != 'true'
          run: npm install

        # ... After steps ...
  • Проверьте eslint и блок тесты

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

Мы создадим шаг для запуска команды: NPM запустить LINT, а один для: NPM прогона теста: блок, каждый шаг даст отрицательный или положительный ответ, если он дает ошибку или не запускать команду.

Кроме того, поскольку мы сделали тесты, мы особенно взволнованы, чтобы показать, что охват кода, который мы достигли. Вот почему мы используем действие: Кодеков/Кодеков-Действие Отказ Используя его https://www.codecov.io/ Веб-сайт будет иметь историю нашего запроса на тягу с увеличением или снижением покрытия. Это также позволяет нам показать процент охвата в нашем readme.md Добавляя:

  

Это будет выглядеть как:

  jobs:
    integration:
      # ...
      # Steps represent a sequence of tasks that will be executed as part of the job
      steps:

        # ... Before steps ...

        - name: Run ESLint
          run: npm run lint

        - name: Run unit tests
          run: npm run test:unit

        - name: Code coverage
          uses: codecov/codecov-action@v1.0.12

Как только мы увидели каждую раздел рабочего процесса отдельно, здесь я оставляю вам полный файл CI.yml, чтобы вы могли использовать его во всех ваших проектах!

# Name your workflow
name: CI

# Set on which events you want run the actions.
# In this case the workflow will run on push for master and on pull request for master and develop branches
on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master, develop ]

jobs:
  # This workflow contains a job called "integration"
  integration:
        # A strategy that defines different variations of an environment to run each job in.
    strategy:
      matrix:
        os: [ubuntu-latest, macos-latest, windows-latest]
        node: [12]
    # The runners that the job will run on
    runs-on: ${{ matrix.os }}

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
      - name: Setup Node.js environment
        uses: actions/setup-node@v1.4.3
        with:
          node-version: ${{ matrix.node }}

      - name: Checkout master branch
        uses: actions/checkout@v2

      - name: Cache node_modules
        uses: actions/cache@v2.1.0
        with:
          # A list of files, directories, and wildcard patterns to cache and restore
          path: node_modules
          # An explicit key for restoring and saving the cache
          key: ${{ matrix.os }}-node-v${{ matrix.node }}-deps-${{ hashFiles(format('{0}{1}', github.workspace, '/package-lock.json')) }}

      - name: Install dependencies
        if: steps.cache.outputs.cache-hit != 'true'
        run: npm install

      - name: Run ESLint
        run: npm run lint

      - name: Run unit tests
        run: npm run test:unit

      - name: Code coverage
        uses: codecov/codecov-action@v1.0.12

Я надеюсь, что это было полезно и что вы не покидаете этот пост, не узнав что-то новое. Спасибо за чтение и если у вас есть какие-либо сомнения, вы можете спросить меня в https://twitter.com/dawntraoz.

Если вы хотите использовать больше значков, как один для покрытия, установите этот веб-сайт: https://badgen.net/ (Это удивительно!)

Есть! MyBug (3 часть серии)

Оригинал: «https://dev.to/dawntraoz/how-to-add-ci-to-your-frontend-with-github-actions-nuxtjs-case-study-4fle»