Внедрение непрерывной интеграции и доставки (ci/cd) для приложений React Native

Что такое CI/CD?

Непрерывная интеграция (CI) - это практика автоматической интеграции изменений кода от нескольких участников в общий репозиторий несколько раз в день. Каждая интеграция проверяется автоматизированным набором сборок и тестов, улавливая ошибки на ранней стадии. Непрерывная доставка (CD) основывается на CI, автоматизируя весь процесс выпуска, чтобы каждое изменение, которое проходит все тесты, можно было развернуть в производство нажатием кнопки. Для мобильных приложений это включает в себя создание подписанных сборок, загрузку в магазины приложений и управление каналами распространения, такими как TestFlight или внутренний трек тестирования Google Play.

CI/CD стал краеугольным камнем современной разработки программного обеспечения. В контексте React Native, где приложения должны работать как на iOS, так и на Android, автоматизация каждого шага конвейера снижает ручные накладные расходы и минимизирует несоответствия, характерные для платформы. Без CI/CD команды часто полагаются на одного разработчика для ручной сборки, подписи и загрузки релизов — процесс, подверженный человеческим ошибкам и задержкам.

Почему CI/CD имеет значение для реакции нативных

React Native представляет уникальные проблемы, которые делают CI/CD особенно ценными. Кодовая база написана на JavaScript, но конечный продукт является родным приложением. Это означает, что вам нужно управлять двумя различными системами сборки (Xcode для iOS, Gradle для Android), обрабатывать нативные зависимости, которые могут потребовать конфигураций для конкретной платформы, и перемещаться по процессам обзора магазина приложений. Надежный конвейер гарантирует, что эти сложности обрабатываются последовательно каждый раз.

Несмотря на эти преимущества, многие команды React Native начинают без CI/CD, потому что его настройка требует понимания нативного инструментария, фастлейна и подписи на платформе. Инвестиции окупаются быстро, особенно по мере роста команды.

Основные компоненты трубопровода CI/CD для реакционного натива

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

Контроль версий и стратегия ветвления

Ясная модель ветвления является основой. GitFlow (функция, разработка, выпуск, ветви исправления) хорошо работает для более крупных команд с запланированными выпусками. Разработка на основе Trunk (краткосрочные ветви, сливающиеся в основные несколько раз в день) подходит командам, стремящимся к постоянному развертыванию. Что бы вы ни выбрали, убедитесь, что ваши CI-триггеры на тянет запросы для проверки изменений перед слиянием.

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

Автоматическое тестирование

Тестирование является сердцем CI. Для React Native рекомендуется многоуровневый подход:

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

Построить автоматизацию

Создание приложения React Native для производства требует подписания и подготовки конкретных результатов для платформы (IPA для iOS, APK / AAB для Android). fastlane является фактическим стандартом для автоматизации этих шагов. Он обрабатывает подписание кода, скриншоты и даже загрузку в магазины приложений. Типичный конвейер будет работать:

Для iOS вы должны управлять сертификатами и профилями предоставления. Используйте матч Fastlane для безопасного хранения и синхронизации подписывающих активов между членами команды и компьютерами CI.

Качество кода и линтинга

Запустите их в CI как можно раньше - они быстро выходят из строя и потребляют мало ресурсов. Для более глубокого анализа интегрируйте SonarQube или CodeClimate для отслеживания запахов кода, дублирования и уязвимостей безопасности. Многие команды также запускают проверку типов TypeScript (]), чтобы поймать ошибки типов.

Управление артефактами и подписание кода

Построить артефакты (подписанные IPA и APK) следует безопасно хранить для распространения. Используйте облачное хранилище (S3, GCS) или выделенный сервис, как App Center (хотя он был амортирован для новых функций). Для iOS для подписания требуются сертификаты и профили предоставления, срок действия которых истекает и должен быть повернут. Автоматическое обновление с использованием фастлейнового соответствия и хранения приватных ключей в секретных переменных CI.

Популярные платформы CI/CD для React Native

Несколько платформ обеспечивают первоклассную поддержку React Native.Ваш выбор зависит от размера команды, бюджета и существующей экосистемы.

App Center (Microsoft) когда-то был популярным выбором, но теперь находится в режиме обслуживания; рассмотрите возможность перехода на альтернативные платформы.

Шаг за шагом: настройка CI/CD с помощью GitHub Actions

Предположим, что стандартный проект React Native (созданный с помощью ]) хранится на GitHub. Следующий пример устанавливает конвейер для тестирования, создания и развертывания в TestFlight и Google Play.

Workflow файл

Создайте . Определите триггеры: нажмите на основные или отпустите ветви и вытяните запросы.

name: CI/CD Pipeline
on:
 push:
 branches: [main, release/*]
 pull_request:
 branches: [main]

Проведение тестов

Используйте среду Node.js. Зависимости кэша для ускорения последующих запусков.

jobs:
 test:
 runs-on: ubuntu-latest
 steps:
 - uses: actions/checkout@v4
 - uses: actions/setup-node@v4
 with:
 node-version: '20'
 cache: 'npm'
 - run: npm ci
 - run: npm test -- --coverage
 - run: npx eslint .
 - run: npx tsc --noEmit

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

Создание для iOS и Android

Для сборки iOS требуются бегуны macOS (GitHub предлагает или ). Android сборки могут работать на Ubuntu, но требуют Android SDK. Используйте отдельные задания для каждой платформы для параллелизации выполнения.

Android Build Job

 build-android:
 runs-on: ubuntu-latest
 steps:
 - uses: actions/checkout@v4
 - uses: actions/setup-node@v4
 with: { node-version: '20' }
 - run: npm ci
 - run: |
 cd android && ./gradlew assembleRelease
 env:
 SIGNING_KEYSTORE: ${{ secrets.ANDROID_KEYSTORE }}
 SIGNING_KEY_ALIAS: ${{ secrets.ANDROID_KEY_ALIAS }}
 SIGNING_STORE_PASSWORD: ${{ secrets.ANDROID_STORE_PASSWORD }}
 SIGNING_KEY_PASSWORD: ${{ secrets.ANDROID_KEY_PASSWORD }}
 - uses: actions/upload-artifact@v4
 with:
 name: app-release.aab
 path: android/app/build/outputs/bundle/release/app-release.aab

iOS Build Job

 build-ios:
 runs-on: macos-13
 steps:
 - uses: actions/checkout@v4
 - uses: actions/setup-node@v4
 with: { node-version: '20' }
 - run: npm ci
 - run: bundle install
 - run: bundle exec fastlane ios build
 env:
 MATCH_PASSWORD: ${{ secrets.MATCH_PASSWORD }}
 FASTLANE_APPLE_APPLICATION_SPECIFIC_PASSWORD: ${{ secrets.APP_SPECIFIC_PASSWORD }}
 - uses: actions/upload-artifact@v4
 with:
 name: app.ipa
 path: build/ios/App.ipa

Примечание: iOS требует Xcode Command Line Tools, которые предварительно установлены на GitHub macOS бегунов. фастлайн должен быть настроен с , который обрабатывает подписание через матч и строит с тренажерным залом.

Развертывание в App Stores

После создания запустите задания развертывания, которые зависят от рабочих мест сборки. Используйте пилотный фастлан для TestFlight и поставки фастлана для Google Play.

 deploy-testflight:
 needs: [build-ios, test]
 runs-on: macos-13
 steps:
 - uses: actions/checkout@v4
 - run: bundle install
 - run: bundle exec fastlane ios upload_to_testflight
 env:
 FASTLANE_APPLE_APPLICATION_SPECIFIC_PASSWORD: ${{ secrets.APP_SPECIFIC }}

 deploy-playstore:
 needs: [build-android, test]
 runs-on: ubuntu-latest
 steps:
 - uses: actions/checkout@v4
 - run: bundle install
 - run: bundle exec fastlane android deploy_to_playstore
 env:
 PLAY_STORE_JSON_KEY: ${{ secrets.PLAY_STORE_JSON_KEY }}

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

Лучшие практики для React Native CI/CD

Обычные подводные камни и как их избежать

Измерение успеха

Отслеживайте следующие показатели для оценки вашего трубопровода:

Используйте эти показатели для выявления узких мест и итерации на вашем конвейере. Например, если сборка iOS занимает 45 минут, рассмотрите кэширование CocoaPods и использование бегунов macOS M1 для более быстрой компиляции.

Заключение

Внедрение CI/CD для приложений React Native - это не только автоматизация - это создание надежного, воспроизводимого процесса доставки, который масштабируется с вашей командой. Интегрируя тестирование, создание, подписание и развертывание в единый конвейер, вы снижаете риск, ускоряете выпуски и позволяете разработчикам сосредоточиться на функциях. Начните с малого: сначала включите подкладку и единичные тесты, затем добавьте сборки и, наконец, автоматизируйте развертывания. По мере созревания вашего трубопровода, включите тесты E2E, ворота качества кода и мониторинг.

Инструменты и шаблоны, описанные здесь — GitHub Actions, fastlane, Detox и надлежащее кэширование — проверены в бою в производстве командами, отправляющими миллионы загрузок. Их принятие превратит ваш рабочий процесс разработки из ручных, подверженных ошибкам релизов в плавный, непрерывный поток высококачественных обновлений.

Для дальнейшего чтения, обратитесь к Официальной документации CI/CD React Native и CircleCI Руководство для React Native.