Настройка непрерывных интеграционных трубопроводов для вашего проекта Frontend может помочь вам избежать ошибок и отфильтровать проблемы, подкрадывающиеся в производство.
Фото Nathan Dumlao. на Unsplash Отфильтровать лучшее для ваших конечных пользователей 👆
Наличие CI/CD в вашем проекте Frontend с самого начала может помочь в том, чтобы избежать «разбитых окон» в вашем проекте (Ref: Сломанная теория окон ).
Кроме того, настройка рабочего процесса может помочь Значительно улучшить опыт разработчика (DX) и пользовательский опыт (UX)
Трубопровод, который установлен раннее В рамках проекта может помочь команде работать с едиными целями и установленными руководящими принципами.
участок
Эта статья демонстрирует настройку постоянной интеграции для стартера Next.js Приложение развернуто на Vercel Жить на репозитории GitHub. Трубопровод использует действия GitHub с открытым исходным кодом из Github Marketplace .
Джобс CI работает синхронно. Если работа не удается, процесс выйдет.
Для этой статьи я решил настроить следующие задания:
- Отвлечение (Eslint + Stylelint) — помогает с последовательным dx
- Развертывание Vercel — помогает с превью развертывания полезно для CI
- Бюджетные проверки маяка — помогает в целостности UX и поддерживать консистенцию на протяжении всего жизненного цикла программного обеспечения
Дополнительные работы Вы можете добавить в ваш трубопровод CI:
- Отправить Slack Notification Если работа терпит неудачу
- Беги Cypress Tests /Jest тесты против превью URL-адреса
- Настройка семантической версии/ семантический релиз
Если вы обнаружите, что используете что-то еще, чем параметры, которые я выбрал выше. Вот некоторые причины, по которым я сам мнение с выбранными инструментами для этого примера:
Почему Next.js Вместо угловых, NUXT.JS и т. Д.? Next.js дает гибкость статической генерации страницы и/или использовать боковую сторону сервера. Меньшего размера пакета помогает в достижении лучшего UX.
Почему Vercel вместо AWS усиливается или NetLify, и т. Д.? Предварительный просмотр развертывания! Каждый PR генерирует URL-адрес предварительного просмотра развертывания. Позволяет легко и эффективно управлять тестами E2E или проверки маяка против URL-просмотра. Также, так как я использую all.js.
Почему Github Действия вместо GitLab или Bitbucket и т. Д. Возможность использования и/или записи действий GitHub с открытым исходным кодом.
1. Начиная
В этом примере я устанавливаю трубопровод CI для приложения Coilerplate Next.js.
NPX Create-Next-App
После создания следующего приложения BoaterPlate I инициализируем настройку ESLINT:
Eslint -init.
Инициация ESLINT приведет вас к набору вопросов и поможет вам настроить правильные правила Lint для вашего проекта. Он автоматически генерирует файл конфигурации и устанавливает зависимости.
Для линтных стилей я в основном предпочитаю использовать Стилелинт , помогает принуждать конвенции CSS/SCSS и избежать ошибок для стилей для стилей. Эквивалентно использовать ESLINT для файлов JavaScript. Узнайте больше о Настройка стилелинта Для вашего проекта Frontend.
Если вы пишете стили в землях CSS-In-js, Stylelint есть стилизованные компоненты Расширение Что вы можете настроить также:)
Наконец, добавьте сценарии проверки Lint внутри package.json Файл, чтобы мы могли настроить его с нашим трубопроводом CI рядом.
2. Создание рабочего процесса Действия GitHub
Чтобы написать действия GitHub, нам нужно создать Main.yml Файл рабочего процесса внутри .Гитеб/рабочие процессы/
В этом примере CI у нас есть 3 рабочих места нашего рабочего процесса.
- Исходный код Lint (Eslint + Stylelint)
- Если нет ошибок кругов, то -> Развертывание на Vercel
- Если развернуть сборку успешно, то -> Проверка производительности работы с маяком
Мы начинаем, определяя, что рабочие места должны работать всякий раз, когда есть Толчок событие на любой ветке.
Имя: CI ON: [push]
Исходя из вашего использования, вы также можете выбрать разные события. Оформить заказ другой События, которые вызывают рабочий процесс
3. Настройка планирования
jobs:
lint:
runs-on: ubuntu-latest
steps:
- name: Begin linting
uses: actions/checkout@v2
with:
fetch-depth: 0
- name: Use Node 12
uses: actions/setup-node@v1
with:
node-version: 12.x
- name: Use cached node_modules
uses: actions/cache@v2
with:
path: node_modules
key: nodeModules-${{ hashFiles('**/yarn.lock') }}
restore-keys: |
nodeModules-
- name: Install dependencies
run: yarn install --frozen-lockfile
- name: Run ESLint
run: yarn lint
- name: Run stylelint
run: yarn stylelint
Эта работа проверяет, придерживается ли код/изменения в правилах Lint. Как видите, задание проверяет задачи для Eslint и Stylelint.
Чтобы улучшить DX и поймать эти проблемы с линтами во время разработки, лучше всего установить вашу IDE с соответствующими плагинами. Так как я использую VSCode, вот Eslint или Стилелинт плагины, которые я использую. Мне также нравится настроить Формат на сохранении В VSCode settings.json Файл на автоматически Формат и исправить все исправленные проблемы, когда я ударю сохраняю.
4. Создание превью развертывания с Vercel
deploy:
runs-on: ubuntu-latest
needs: lint
steps:
- uses: actions/checkout@v2
- uses: amondnet/vercel-action@v20
id: vercel-deployment
with:
github-token: ${{ secrets.GH_TOKEN }}
vercel-token: ${{ secrets.VERCEL_TOKEN }}
vercel-org-id: ${{ secrets.ORG_ID}}
vercel-project-id: ${{ secrets.PROJECT_ID}}
vercel-project-name: 'nextjs-tooling'
outputs:
preview-url: ${{ steps.vercel-deployment.outputs.preview-url }}
Эта работа использует действие OpenSource GitHub Action: Vercel Действия Действие Opensource позволяет нам легко генерировать развертывание Vercel, независимо от того, являются ли они развертываниями для предварительного просмотра или развертываниями производства.
Здесь мы также проверяем, если Производство сборки Успешно или нет, поскольку мы делаем развертывание.
Использование этого действия в трубопроводе CI лучше, чем настройка Vercel для интеграции GitHub, поскольку интеграция GitHub асинхронная и работает независимо от состояния трубопровода.
Как только развертывание будет завершено, Vercel генерирует превью-URL Отказ
Вы можете выбрать пробел кипарис-тесты против URL-адреса предварительного просмотра. В этой статье мы будем создавать работу маяка, которая будет использовать этот превью-URL.
5. Запустите бюджетные проверки бюджета против превью развертывания
lighthouse:
runs-on: ubuntu-latest
needs: deploy
steps:
- uses: actions/checkout@v2
- name: Run Lighthouse on urls and validate with lighthouserc
uses: treosh/lighthouse-ci-action@v7
with:
urls: |
${{ needs.deploy.outputs.preview-url }}
${{ needs.deploy.outputs.preview-url }}/some-other-path
budgetPath: ./budget.json
runs: 3
Эта работа использует Opensource Treosh/Lighthouse-Ci-Action Действие GitHub. Действие использует маяк CI и проверяет наши развертывания. Действие позволяет нам установить многочисленные варианты, такие как
- Тестирование против нескольких путей
- предоставление бюджета
- Количество прогонов (сколько раз CI должен проверить URL?)
- И еще много ..
На этой работе создать бюджет — самая важная задача. Как вы, возможно, знали, с Обновление опыта Google Page Приходя в мае/июне 2021 года, оценки маяка и производительность скорости страницы будут приоритетными приоритетами в рейтинге поиска.
Следовательно, настройка этого Github Action поможет очень поможет для веб-сайтов, которые полагаются на поисковый трафик Google. Если не позаботиться о ранней стадии, это вполне нормально для размеров связки, чтобы подумать, так как веб-сайт является итерацией, то это приводит к более низкому Оценка маяка Отказ Этот маяк Github Action помогает нам следить за любым расхождением в каждом фиксации.
Основываясь на вашем проекте, также может быть важно установить правильный бюджет маяка. Бюджет для примера репо: https://github.com/snowballdigital/nextjs-tooling/blob/main/budget.json.
6. CI в действии
Рабочий GitHub Repo: https://github.com/snowballdigital/nextjs-tooling
Теперь у нас есть все 3 настроек рабочих мест в конвейере CI, на каждом толчке в ветку будет работать следующие 3 рабочими задания:
Кроме того, если есть PR, Vercel-действия Будет комментировать PR после успешного развертывания URL-адреса предварительного просмотра.
В заключение
Просто любой коммит, который нарушает ваши правила CI, не сделает его до производства. И на 3 рабочих места, которые мы определены в этой статье, имеет основной фокус на UX и DX.
Эти настройки трубопроводов лучше всего подходят для любого проекта Frontend, поскольку успешные трубопроводы дают вам, что дополнительный утонченный и уверенность в предоставлении твердого, согласованного конечного пользовательского опыта, а также улучшенный опыт разработчика для вашей команды и соавторы.
Заинтересованы в строительстве молнии быстрого веб-приложений на реагирование? Мы в поисках старших разработчиков Frontend, Примените здесь!
Оригинал: «https://dev.to/meetdave3/ci-cd-tooling-for-frontend-projects-using-github-actions-5998»