Ignite CI/CD配置：自动化构建与部署流水线-优快云博客

Ignite CI/CD配置：自动化构建与部署流水线

【免费下载链接】ignite Infinite Red's battle-tested React Native project boilerplate, along with a CLI, component/model generators, and more! 项目地址: https://gitcode.com/GitHub_Trending/ig/ignite

引言：为什么React Native项目需要CI/CD？

在移动应用开发中，持续集成和持续部署（CI/CD）已经成为现代开发流程的核心。对于React Native项目而言，CI/CD的重要性更加突出：

跨平台构建复杂性：需要同时处理iOS和Android两个平台的构建
测试矩阵庞大：不同设备、操作系统版本的兼容性测试
发布频率高：移动应用需要频繁更新以保持竞争力
质量保证：自动化测试确保每次提交的质量

Ignite作为业界领先的React Native样板项目，提供了完善的CI/CD基础设施。本文将深入探讨如何为Ignite项目配置完整的自动化构建与部署流水线。

Ignite CI/CD架构概览

Ignite项目的CI/CD架构采用分层设计，确保构建、测试、部署各环节的可靠性：

mermaid

核心配置文件详解

1. EAS (Expo Application Services) 配置

Ignite项目使用EAS作为主要的构建服务，eas.json是核心配置文件：

{
  "cli": {
    "version": ">= 3.15.1"
  },
  "build": {
    "development": {
      "extends": "production",
      "distribution": "internal",
      "android": {
        "gradleCommand": ":app:assembleDebug"
      },
      "ios": {
        "buildConfiguration": "Debug",
        "simulator": true
      }
    },
    "preview": {
      "extends": "production",
      "distribution": "internal",
      "ios": { "simulator": true },
      "android": { "buildType": "apk" }
    },
    "production": {
      "distribution": "internal",
      "autoIncrement": true,
      "env": {
        "APP_ENV": "production"
      }
    }
  },
  "submit": {
    "production": {
      "android": {
        "serviceAccountKeyPath": "./keys/service-account-key.json",
        "track": "production"
      },
      "ios": {
        "appleId": "your-apple-id@example.com",
        "ascAppId": "YOUR_APP_ID",
        "appleTeamId": "YOUR_TEAM_ID"
      }
    }
  }
}

2. Package.json构建脚本

Ignite提供了丰富的npm脚本用于不同环境的构建：

{
  "scripts": {
    "build:ios:sim": "eas build --profile development --platform ios --local",
    "build:ios:dev": "eas build --profile development:device --platform ios --local",
    "build:ios:preview": "eas build --profile preview --platform ios --local",
    "build:ios:prod": "eas build --profile production --platform ios --local",
    "build:android:sim": "eas build --profile development --platform android --local",
    "build:android:dev": "eas build --profile development:device --platform android --local",
    "build:android:preview": "eas build --profile preview --platform android --local",
    "build:android:prod": "eas build --profile production --platform android --local",
    "test": "jest",
    "test:watch": "jest --watch",
    "test:maestro": "maestro test -e MAESTRO_APP_ID=com.helloworld .maestro/flows"
  }
}

完整的CI/CD流水线实现

GitHub Actions配置示例

创建.github/workflows/ci-cd.yml文件：

name: Ignite CI/CD Pipeline

on:
  push:
    branches: [ main, develop ]
  pull_request:
    branches: [ main ]

jobs:
  # 代码质量检查
  lint-and-test:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v4
    
    - name: Setup Node.js
      uses: actions/setup-node@v3
      with:
        node-version: '20.x'
        cache: 'npm'
    
    - name: Install dependencies
      run: npm ci
      
    - name: Run TypeScript check
      run: npx tsc --noEmit
      
    - name: Run ESLint
      run: npx eslint . --ext .ts,.tsx
      
    - name: Run Jest tests
      run: npm test -- --coverage
      
    - name: Upload coverage reports
      uses: codecov/codecov-action@v3

  # iOS构建
  build-ios:
    needs: lint-and-test
    runs-on: macos-latest
    if: github.ref == 'refs/heads/main'
    steps:
    - uses: actions/checkout@v4
    
    - name: Setup Node.js
      uses: actions/setup-node@v3
      with:
        node-version: '20.x'
        cache: 'npm'
    
    - name: Install dependencies
      run: npm ci
      
    - name: Install EAS CLI
      run: npm install -g eas-cli
      
    - name: Build iOS app
      run: eas build --platform ios --profile production --non-interactive
      env:
        EXPO_TOKEN: ${{ secrets.EXPO_TOKEN }}

  # Android构建
  build-android:
    needs: lint-and-test
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/main'
    steps:
    - uses: actions/checkout@v4
    
    - name: Setup Node.js
      uses: actions/setup-node@v3
      with:
        node-version: '20.x'
        cache: 'npm'
    
    - name: Install dependencies
      run: npm ci
      
    - name: Install EAS CLI
      run: npm install -g eas-cli
      
    - name: Build Android app
      run: eas build --platform android --profile production --non-interactive
      env:
        EXPO_TOKEN: ${{ secrets.EXPO_TOKEN }}

  # 端到端测试
  e2e-tests:
    needs: [build-ios, build-android]
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v4
    
    - name: Setup Node.js
      uses: actions/setup-node@v3
      with:
        node-version: '20.x'
        cache: 'npm'
    
    - name: Install dependencies
      run: npm ci
      
    - name: Run Maestro tests
      run: npm run test:maestro

CircleCI配置示例

创建.circleci/config.yml文件：

version: 2.1

jobs:
  test:
    docker:
      - image: cimg/node:20.0
    steps:
      - checkout
      - restore_cache:
          keys:
            - v1-dependencies-{{ checksum "package-lock.json" }}
            - v1-dependencies-
      - run:
          name: Install dependencies
          command: npm ci
      - save_cache:
          paths:
            - node_modules
          key: v1-dependencies-{{ checksum "package-lock.json" }}
      - run:
          name: Run tests
          command: npm test -- --coverage
      - run:
          name: Run linting
          command: npx eslint . --ext .ts,.tsx

  build-ios:
    macos:
      xcode: 14.0.0
    steps:
      - checkout
      - run:
          name: Install Node.js
          command: |
            curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
            export NVM_DIR="$HOME/.nvm"
            [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
            nvm install 20
            nvm use 20
      - run:
          name: Install dependencies
          command: npm ci
      - run:
          name: Build iOS
          command: npm run build:ios:prod

workflows:
  version: 2
  test-and-build:
    jobs:
      - test
      - build-ios:
          requires:
            - test
          filters:
            branches:
              only: main

环境变量与密钥管理

安全配置最佳实践

# .env.production
APP_ENV=production
API_BASE_URL=https://api.yourdomain.com
SENTRY_DSN=your-sentry-dsn

# .env.development  
APP_ENV=development
API_BASE_URL=https://dev-api.yourdomain.com
SENTRY_DSN=your-dev-sentry-dsn

GitHub Secrets配置

Secret名称	描述	用途
EXPO_TOKEN	Expo访问令牌	EAS构建认证
APP_STORE_CONNECT_API_KEY	App Store Connect API密钥	iOS应用提交
GOOGLE_PLAY_SERVICE_ACCOUNT	Google Play服务账号	Android应用提交
SENTRY_AUTH_TOKEN	Sentry认证令牌	错误监控

测试策略与质量保障

测试金字塔实施

mermaid

Jest测试配置

// jest.config.js
module.exports = {
  preset: 'react-native',
  setupFilesAfterEnv: ['@testing-library/jest-native/extend-expect'],
  transformIgnorePatterns: [
    'node_modules/(?!((jest-)?react-native|@react-native|@react-navigation|@expo|expo-.*))'
  ],
  collectCoverageFrom: [
    'app/**/*.{js,jsx,ts,tsx}',
    '!app/**/*.d.ts',
    '!app/**/types.ts'
  ],
  coverageThreshold: {
    global: {
      branches: 80,
      functions: 80,
      lines: 80,
      statements: 80
    }
  }
};

Maestro端到端测试

创建.maestro/flows/smoke-test.yaml：

appId: com.yourcompany.yourapp
---
- launchApp
- assertVisible: "Welcome"
- tapOn: "Get Started"
- assertVisible: "Home Screen"
- scrollUntilVisible:
    element: "Settings"
    direction: DOWN
- tapOn: "Settings"
- assertVisible: "Settings Screen"

监控与告警机制

构建状态监控

# .github/workflows/monitor.yml
name: Build Monitor

on:
  workflow_run:
    workflows: ["CI/CD Pipeline"]
    types: [completed]

jobs:
  notify:
    runs-on: ubuntu-latest
    if: ${{ github.event.workflow_run.conclusion != 'success' }}
    steps:
      - name: Send Slack notification
        uses: 8398a7/action-slack@v3
        with:
          status: ${{ github.event.workflow_run.conclusion }}
          channel: '#build-notifications'
        env:
          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}

性能监控配置

// app/utils/performanceMonitor.ts
import { Platform } from 'react-native';

export const initPerformanceMonitoring = () => {
  if (__DEV__) {
    // 开发环境使用Reactotron
    import('../devtools/ReactotronConfig').then(() => {
      console.log('Reactotron configured');
    });
  } else {
    // 生产环境使用Sentry
    import('@sentry/react-native').then((Sentry) => {
      Sentry.init({
        dsn: process.env.SENTRY_DSN,
        environment: process.env.APP_ENV,
      });
    });
  }
};

部署策略与发布管理

分阶段发布流程

mermaid

版本管理策略

{
  "version": "1.2.3",
  "buildNumber": 456,
  "versioningStrategy": {
    "ios": {
      "buildNumber": "CFBundleVersion",
      "version": "CFBundleShortVersionString"
    },
    "android": {
      "buildNumber": "versionCode",
      "version": "versionName"
    }
  }
}

故障排除与最佳实践

常见问题解决方案

问题	原因	解决方案
iOS构建失败	证书问题	检查Provisioning Profile
Android构建慢	Gradle配置	优化gradle.properties
测试覆盖率低	测试配置	调整collectCoverageFrom
EAS构建超时	资源不足	升级EAS计划

性能优化建议

缓存策略：充分利用GitHub Actions和CircleCI的缓存机制
并行执行：iOS和Android构建可以并行进行
依赖优化：使用npm ci而不是npm install
镜像选择：选择预装依赖的Docker镜像

总结

Ignite项目的CI/CD配置体现了现代React Native开发的最佳实践。通过结合EAS、GitHub Actions/CircleCI、以及完善的测试策略，可以构建出高效、可靠的自动化流水线。

关键要点：

EAS为核心：利用Expo的云构建服务简化跨平台构建
分层测试：单元测试、集成测试、端到端测试全覆盖
安全第一：妥善管理环境变量和密钥
监控告警：实时监控构建状态和应用性能
渐进发布：采用分阶段发布策略降低风险

通过本文的配置指南，您可以为Ignite项目建立完整的CI/CD流水线，显著提升开发效率和发布质量。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考