Есть! 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»