De uitvoering van continue integratie en levering (c/cd) voor React Internal Apps

Wat is CI/CD?

Continuous Integration (CI) is de praktijk van het automatisch integreren van codewijzigingen van meerdere deelnemers in een gedeelde repository meerdere keren per dag. Elke integratie wordt geverifieerd door een geautomatiseerde bouw- en testsuite, vangen fouten vroeg. Continuous Delivery (CD) bouwt voort op CI door het hele releaseproces te automatiseren zodat elke verandering die alle tests passeert kan worden ingezet om de productie met de druk op een knop. Voor mobiele toepassingen, dit omvat het genereren van ondertekende bouwt, uploaden naar app-opslags, en het beheren van distributiekanalen zoals TestFlight of Google Play.

CI/CD is een hoeksteen geworden van moderne software engineering. In de context van React Native, waar apps moeten draaien op zowel iOS als Android, het automatiseren van elke stap van de pijpleiding vermindert handmatige overhead en minimaliseert platformspecifieke inconsistenties. Zonder CI/CD, teams vaak vertrouwen op een enkele ontwikkelaar handmatig bouwen, ondertekenen en uploaden releases . . een proces gevoelig voor menselijke fouten en vertragingen.

Waarom CI/CD zaken voor React Native

React Native introduceert unieke uitdagingen die CI/CD bijzonder waardevol maken. De codebase is geschreven in JavaScript, maar het eindproduct is een native app. Dit betekent dat u twee verschillende build systemen (Xcode voor iOS, Gradle voor Android), omgaan met inheemse afhankelijkheden die platform-specifieke configuraties nodig kunnen hebben, en navigeren app store review processen. Een robuuste pijpleiding zorgt ervoor dat deze complexiteiten worden consequent behandeld elke keer.

• Faster feedback loops . . Ontwikkelaars krijgen onmiddellijke resultaten van tests, pluisjes en statische analyse, vaak binnen enkele minuten na het duwen van code.
• Verminderde integratiehel . . . Frequent merges met geautomatiseerde verificatie voorkomen grote, conflict-beladen merges.
• Reproduceerbare builds . . . CI omgevingen zijn schoon en geconfigureerd vanaf nul, waardoor ..werken op mijn machine problemen.
• Streamlined releases . . Automating app store inzendingen (screenshots, metadata, ondertekening) snijdt release cycli van dagen tot uren.
• Hogere codekwaliteit

Ondanks deze voordelen, veel React Native teams beginnen zonder CI / CD omdat het opzetten van het vereist begrip van inheemse tooling, fastlane, en platform-specifieke ondertekening. De investering loont snel, vooral als het team groeit.

Kerncomponenten van een CI/CD Pijpleiding voor React Indicatief

Elke pijpleiding moet de volgende fasen omvatten, besteld van snelste naar langzaamste. Mislukkingen vroeg in de pijplijn moet de uitvoering te stoppen om de hulpbronnen te behouden.

Versiebeheer en branchingstrategie

Een duidelijk vertakkend model is de basis. GitFlow (feature, develop, release, hotfix branches) werkt goed voor grotere teams met geplande releases. Trunk-gebaseerde ontwikkeling (kortlevende branches die meerdere malen dagelijks in hoofd zijn samengevoegd) past bij teams die streven naar continue implementatie. Welke u ook kiest, zorg ervoor dat uw CI triggers op pull verzoeken om wijzigingen te valideren voordat u mergen.

De meeste CI systemen kunt u regels per branch . . bijvoorbeeld, het uitvoeren van alleen unit tests op functie branches, maar volledige integratie testen en beta implementaties op de belangrijkste branch.

Geautomatiseerde testen

Testen is het hart van CI. Voor React Native wordt een gelaagde aanpak aanbevolen:

• Eenheidstests . . Gebruik Jest (al gebundeld met React Native) om bedrijfslogica, reducties en nutsfuncties te testen. Gist is snel en kan parallel lopen.
• Integratietests . . Test interacties tussen componenten en diensten. React Native Testing Library helpt componenten en gedrag te herstellen.
• End-to-end (E2E) tests
• Snapshot testing . . . Ontdek onbedoelde wijzigingen van de UI door weergegeven output te vergelijken met opgeslagen snapshots. Gebruik voorzichtig als snapshots onderhoudszwaar kunnen worden.

Stel uw CI in om de bouw niet te laten slagen als een test niet slaagt. Overweeg het instellen van dekking drempels om kwaliteit poorten af te dwingen.

Bouwautomatisering

Voor het bouwen van een React Native app voor productie is het signeren en voorbereiden van platformspecifieke deliverables (IPA voor iOS, APK/AAB voor Android) vereist. fastlane[] is de de facto standaard voor het automatiseren van deze stappen. Het behandelt code ondertekening, screenshots en zelfs uploaden naar app stores. Een typische pijplijn zal draaien:

• (gebruik sportschool) om een .ipa te maken
• (gebruik gradle) om een .aab te creëren

Voor iOS moet u certificaten en provisioning profielen beheren. Gebruik fastlane .. match om veilig het opslaan en synchroniseren van ondertekenende activa tussen teamleden en CI-machines.

Codekwaliteit en lijn

Dwing een consistente codestijl met behulp van ESLint en Prettier. Voer deze in CI zo vroeg mogelijk . . Ze falen snel en verbruiken weinig middelen. Voor diepere analyse, integreren SonarQube of CodeKlimaat om code geuren, duplicatie, en beveiligingskwetsbaarheiden volgen. Veel teams ook uitvoeren TypeScript type-checking () om typefouten te vangen.

Artefact Management en Code Signing

Bouw artefacten (gesigneerde IPA's en APK's) moeten veilig worden opgeslagen voor distributie. Gebruik een cloudopslagemmer (S3, GCS) of een speciale service zoals App Center (hoewel het is verouderd voor nieuwe functies). Voor iOS vereist ondertekenen certificaten en provisioning profielen die vervallen en moeten worden gedraaid. Automatiseer vernieuwing met behulp van fastlane match en sla private sleutels op in CI geheime variabelen.

Popular CI/CD Platforms for React Inative

Verschillende platforms bieden eersteklas ondersteuning voor React Native. Uw keuze is afhankelijk van de grootte van het team, budget en bestaand ecosysteem.

• GitHub Acties . . . Vriendelijke integratie met GitHub. Gratis niveau omvat 2000 minuten/maand voor openbare repositories. Uitgebreide marktplaats van acties voor React Native, fastlane, en code ondertekening. Beste voor teams al op GitHub.
• GitLab CI/CD
• CircleCI .. Zeer aanpasbaar met caching en parallelisme. iOS-bouw vereist macOS-runners (kosten extra). Populair onder mobiele teams door robuuste Docker en macOS ondersteuning.
• Bitrise
• Codemagic . . Gericht op flutter en react Native. Biedt macOS-machines en integreert met Codemagic. eigen signing management. Goed alternatief voor budgetbewuste teams.

App Center (Microsoft) was ooit een populaire keuze maar is nu in de onderhoudsmodus; overwegen migreren naar alternatieve platforms.

Stap voor stap: CI/CD instellen met GitHub-acties

Stel een standaard React Native project (gecreëerd met ) opgeslagen op GitHub. Het volgende voorbeeld stelt een pijpleiding in voor het testen, bouwen en implementeren van TestFlight en Google Play.

Werkstroombestand

Creëer . Definieer triggers: duw naar hoofdtakken of loslaten van branches, en trek verzoeken in.

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

Tests

Gebruik een Node.js omgeving. Cache afhankelijkheden om de volgende runs te versnellen.

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

Als een stap mislukt, stopt de job en de pijpleiding waarschuwt de ontwikkelaar.

Bouwen voor iOS en Android

iOS builds vereist macOS runners (GitHub biedt of ). Android builds kan draaien op Ubuntu maar vereist de Android SDK. Gebruik aparte taken voor elk platform om de uitvoering te paralleliseren.

Android bouwt werk

 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 bouwt werk

 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

Opmerking: iOS vereist Xcode Command Line Tools, die vooraf zijn geïnstalleerd op GitHub macOS runners. fastlane moet worden geconfigureerd met een die ondertekenen via match behandelt en bouwt met fitnessruimte.

Inschakelen naar App Stores

Na het bouwen, uitvoeren van implementatietaken die afhankelijk zijn van de bouwtaken. Gebruik fastlane pilot[ voor TestFlight en fastlane supply voor 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 }}

Voor productie-vrijgave, voeg een handmatige goedkeuring stap of alleen trigger op tags.

Beste praktijken voor react-inheemse CI/CD

• Cache agressief . . Cache node modules, CocoaPods, Gradle caches en Homebrew pakketten. Sla ze op basis van een hash van lockfiles. Dit kan knippen bouwtijden met 50% of meer.
• Gebruik omgevingsvariabelen en -geheimen
• Parameter builds
• Trek tests parallel aan . . Splits testsuites over meerdere banen of gebruik test sharding (ondersteund door Jest met en ]).
• Kleep de oorspronkelijke afhankelijkheden zorgvuldig .Als u bibliotheken met native code (bijv. react-native-camera) gebruikt, zorg dan dat uw CI de vereiste systeemafhankelijkheden (bijv. OpenCV) heeft voorgeïnstalleerd.
• Monorepo overwegingen
• Record en alarm

Vaak Pitfalls en hoe ze te vermijden

• Lange build times
• Vlakke tests
• Certificeren en provisioning profiel verlopen
• iOS ondertekening problemen in CI . . . Gemeenschappelijke valkuilen: verkeerde provisioning profiel, mismatch tussen bundel identificatie en profiel, verlopen private sleutel. Dubbele controle match configuratie en ervoor te zorgen dat alle geheimen correct zijn.
• Android keystore verlies .Backups van uw release keystore bewaren. Als u verloren bent, kunt u de app niet bijwerken. Gebruik CI-geheimen om het op te slaan, maar bewaar ook een lokale back-up op een veilige locatie.
• Dependency versie mismatches

Meten van succes

Volg de volgende metrics om uw pijpleiding te evalueren:

• Bouwtijd .. Totale tijd van commit naar artefact. Richt voor minder dan 30 minuten voor een volledige pijpleiding.
• Implementatiefrequentie
• Failure rate
• Tijd tot feedback
• Testdekking

Gebruik deze metrics om knelpunten te identificeren en te itereren op uw pijpleiding. Bijvoorbeeld, als iOS bouwt duurt 45 minuten, overwegen caching CocoaPods en het gebruik van macOS M1 runners voor een snellere compilatie.

Conclusie

De implementatie van CI/CD voor React Native apps gaat niet alleen over automatisering . . Het gaat over het creëren van een betrouwbare, onuitwisbare leveringsproces dat schalen met uw team. Door het integreren van testen, bouwen, ondertekenen en implementatie in een enkele pijplijn, vermindert u risico, snelheid releases, en vrije ontwikkelaars om zich te concentreren op functies. Start klein: laat het testen van de luifel en units eerst, voeg dan bouwen, en tenslotte automatiseer implementaties. Als uw pijpleiding rijpt, neemt E2E-tests, code kwaliteit poorten, en monitoring.

De tools en patronen die hier beschreven worden . . GitHub Acties, fastlane, Detox, en de juiste caching . . zijn de battle-getest in productie door teams die miljoenen downloads. Aanvaarding ervan zal uw ontwikkeling workflow van handmatige, foutgevoelige releases om te zetten in een vlotte, continue stroom van hoogwaardige updates.

Raadpleeg React Native