跳过主要内容

Setting Up CI/CD for Capacitor Apps

了解如何使用CI/CD管道来优化iOS和Android应用的发布流程,提高效率并减少错误。

马丁·多纳迪厄

马丁·多纳迪厄

内容营销

Setting Up CI/CD for Capacitor Apps

想让iOS和Android应用的发布更快、更准确吗? CI/CD管道 Capacitor __CAPGO_KEEP_0__ Capgo.

为什么 CI/CD 对

  • __CAPGO_KEEP_0__ Capacitor apps重要工具
  • Xcode: Android Studio, CocoaPods, , 等等。__CAPGO_KEEP_0__ apps automate building, testing, and deployment, cutting release times by up to 70% and reducing errors by 60%. This guide covers everything you need to know, from setting up your environment to automating live updates with
  • 流水线设置: 自动化任务如 npx cap sync, 依赖缓存和平台特定构建。
  • Live updates with Capgo: 启用发布后更新、分阶段发布和回滚保护。

快速设置步骤:

  1. 准备环境: 安装 iOS 和 Android 所需的工具。
  2. 配置项目: 更新 capacitor.config.ts 并安全地管理环境变量。
  3. 构建管道:自动安装依赖项、构建和测试两种平台。
  4. 优化性能:使用缓存、并行构建和条件工作流。
  5. 添加实时更新:将Capgo用于安全的、按阶段发布的OTA更新。

通过CI/CD,Capacitor应用程序实现更快、更Smooth的发布,同时减少错误和手动干预。准备优化您的工作流程?让我们深入了解!

集成您的现有CI/CD管道中的移动功能

准备您的CI/CD环境

一旦您掌握了CI/CD的基本知识,下一步就是设置环境。这是可靠自动化的基础。

工具和软件设置

确保您安装了这些关键工具:

For iOS Development:

  • Xcode 14 或更高版本
  • Xcode Command Line Tools
  • CocoaPods 用于管理依赖项

For Android Development:

  • Android Studio
  • Android SDK 33 或更高版本
  • Java Development Kit (JDK)

确认您的 Xcode Command Line Tools 是否已安装,请使用:

xcode-select -p

创建一个 Capacitor 项目

Capacitor 框架文档网站

您的 Capacitor 项目需要正确配置才能支持 CI/CD 工作流。这个 capacitor.config.ts 文件是这个设置的核心:

const config: CapacitorConfig = {
  appId: 'com.example.app',
  webDir: 'build',
  ios: { 
    scheme: 'MyApp'
  }
}

这个文件确保您的项目符合 CI/CD 要求。

设置环境变量

安全地管理凭证是将环境设置与 CI/CD pipeline 链接起来的关键部分。

需要定义的关键变量:

  • BUILD_ENV: 指定部署阶段(例如, production)
  • IOS_SIGNING_IDENTITY: 您的 code 签名证书
  • ANDROID_KEYSTORE_PATH: Android keystore 的路径

为了 Android 构建,动态生成一个 local.properties 文件在CI过程中:

echo "sdk.dir=$ANDROID_SDK_ROOT" > android/local.properties

在处理iOS构建时,请确保您的CI平台支持macOS代理。

检查环境是否准备好:

node --version | grep "v16" && xcodebuild -version | grep "Xcode 14" || exit 1

正确管理密钥和凭据可以显著降低应用商店拒绝的机会,正如之前的统计数据所述 [1].

创建您的CI/CD管道

一旦环境准备好,下一步就是为您的 Capacitor应用设置CI/CD管道。这条管道应该高效地管理Web资产和本机平台构建。

安装和更新依赖项

在CI/CD环境中,管理依赖项需要严格的版本控制。从清洁的安装过程开始:

npm install --ignore-scripts
npm install @capacitor/cli

为了加快构建速度,使用依赖项缓存。例如 Azure DevOps 用户已经看到建构时间改善了40-60%

- task: Cache@2
  inputs:
    key: 'npm | "$(Agent.OS)" | package-lock.json'
    path: |
      node_modules
      android/.gradle
      ios/Pods

iOS和Android建构设置

以下是如何配置两种平台的建构:

iOS建构配置:

steps:
  - task: InstallAppleCertificate@2
    inputs:
      certSecureFile: 'certificate.p12'
      certPwd: $(P12_PASSWORD)
  - script: |
      xcodebuild -workspace ios/App/App.xcworkspace -scheme App -configuration Release -archivePath ios/App/App.xcarchive archive

Android建构配置:

cd android
./gradlew bundleRelease

测试和部署步骤

并行使用矩阵策略运行平台测试:

test:
  steps:
    - run: npm run test:unit
    - run: npm run test:e2e
    - name: Run Platform Tests
      matrix:
        platform: [ios, android]
      run: npm run test:${{ matrix.platform }}

对于部署,设置平台特定的工件处理:

平台 工件类型 分发渠道
iOS iOS App Store Connect
Android .aab Google Play Console

正确配置后,使用并行构建可以显著减少管道执行时间。

您的构建已验证并打包,您现在可以继续使用Capgo进行实时更新(下一节将讨论)。

sbb-itb-f9944d2

添加 Capgo 实时更新

Capgo实时更新控制台界面

将Capgo集成到您的工作流中,可增强CI/CD流程,通过启用发布后更新功能。以下是如何设置它的步骤:

Capgo管道配置

首先,在管道环境中安装 Capgo CLI 将其添加到您的管道环境中:

steps:
  - name: Install Capgo CLI
    run: npm install -g @capgo/cli
  - name: Configure Authentication
    env:
      CAPGO_KEY: ${{ secrets.CAPGO_API_KEY }}

这项添加将CI/CD周期扩展到包含 更新管理 到自动化构建和部署流程中。

接下来,在您的构建步骤之后包含上传命令:

- name: Upload Update
  run: |
    capgo upload --api-key $CAPGO_KEY --bundle ./build/app-release.apk
    capgo deploy v${VERSION} --channel production

对于 安全更新,配置验证设置如下:

{
  "verification": {
    "checksum": "strict",
    "certificatePinning": true,
    "updateTimeout": 500
  }
}

Capgo 功能概览

功能 描述
端到端加密 页面/区域: Capgo 解决方案营销页面。角色: 部分或页面标题。见于: 页面解决方案/金融科技.astro。消息关键 `solutions_fintech_cert3_title` (解决方案金融科技 Cert3 标题)。| 页面/区域: Capgo 解决方案营销页面。角色: 部分或页面标题。见于: 页面解决方案/金融科技.astro。消息关键 `solutions_fintech_sol3_title` (解决方案金融科技 Sol3 标题)。| 页面/区域: Capgo 解决方案营销页面。角色: 短 UI 标签或导航项。见于: 页面解决方案/金融科技.astro。消息关键 `solutions_fintech_badge_e2e` (解决方案金融科技 Badge E2e)。| 页面/区域: Capgo 解决方案营销页面。角色: 短 UI 标签或导航项。见于: 页面解决方案/医疗保健.astro。消息关键 `solutions_healthcare_badge_e2e` (解决方案医疗保健 Badge E2e)。
显著减少部署错误。 基于频道的部署
根据特定环境定制更新。 分阶段发布

确保更新逐渐分发。

OTA 更新指南

通过部署后跟踪这些关键指标来增强您的测试过程:

使用分阶段发布来控制更新的分发:

- name: Staged Rollout
  run: |
    capgo deploy v1.2.3 --group "beta-users" --rollout 10%
    capgo deploy v1.2.3 --rollout 50%

更新监控

关注这些指标:

  • 采用率: 在首24小时内目标为40-60%
  • 无故障会话: 保持99.5%以上
  • 验证时间: 确保小于500ms

如果故障超过可接受水平,自动回滚:

- name: Rollback Check
  run: |
    if [ $(capgo stats --version v1.2.3 --metric crashes) -gt 2 ]; then
      capgo rollback --channel production
    fi

改进管道性能

关注三个关键领域可以显著改进管道:

优化构建速度

对于仅有web变化的项目,使用 npx cap sync 可以通过跳过全量原生重建,减少重建时间约40%来节省时间。以下是如何实现条件构建的方法:

- name: Build Strategy
  run: |
    [ "$WEB_ONLY" = true ] && npx cap sync || (./gradlew assembleRelease && xcodebuild ...)

这项方法确保只有必要的组件被重建,从而简化流程。

版本控制自动化

通过以下脚本来自动设置版本和构建号,可以简化您的工作流程:

- name: Set Version
  run: |
    VERSION=$(node -p "require('./package.json').version")
    BUILD_NUMBER=$GITHUB_RUN_NUMBER
    echo "APP_VERSION=${VERSION}" >> $GITHUB_ENV
    echo "BUILD_ID=${BUILD_NUMBER}" >> $GITHUB_ENV

此配置还可以设置自动语义版本控制:

{
  "scripts": {
    "version": "standard-version",
    "build:prod": "npm version patch && ionic build --prod"
  }
}

这些实践提供了一个坚实的框架,通过以下指标来跟踪和改进管道性能:

  • 每个阶段的构建时间
  • 缓存效率(命中/丢失率)
  • 峰值资源使用率

多环境设置

使用环境特定的配置可以简化管理多个环境的过程。以下是一个示例配置:

环境 配置文件
开发 .env.dev
测试 .env.staging
生产 安全存储

您可以使用以下脚本动态配置环境:

- name: Configure Environment
  env:
    API_KEY: ${{ secrets.ENV_SPECIFIC_API_KEY }}
    BUNDLE_ID: ${{ parameters.bundleId }}
  run: |
    echo "ENVIRONMENT=${{ parameters.environment }}" >> $GITHUB_ENV
    echo "API_ENDPOINT=${{ parameters.apiUrl }}" >> $GITHUB_ENV

将这些配置与Capgo的基于频道的部署配对,可以实现精确的、环境特定的更新。这确保了更平滑的发布和更好的对应用程序行为在不同环境下的控制。

概要

CI/CD在开发中的作用

使用CI/CD管道来开发Capacitor应用程序显著提高了工作流的效率。根据行业数据,团队可以实现 50-70% 的发布周期更快 同时进行 iOS 和 Android 构建 [3]. 自动化依赖安装和平台同步等任务,减少了部署错误 40-60% [1][2].

For instance, teams leveraging Azure DevOps pipelines have automated processes such as sequential build steps and Xcode packaging. They also use parameterized environments for both development and production. This approach removes the need for manual Gradle and Xcode CLI operations, ensuring reliable artifact creation every time.

这些改进为使用 Capgo 的更新管理打下了基础

Capgo:更新管理

Capgo 与 CI/CD pipeline 完美集成,能够即时更新,同时保持与应用商店政策的兼容性。更新只会在通过自动化测试门控的管道中部署

通过结合自动化构建和分阶段发布,团队可以实现出色的结果 7 天内覆盖 80% 的用户 并且在 1 小时内可以回滚

常见的策略是运行并行部署跟踪。自动化构建用于内部测试,而分阶段发布则针对用户段。这样可以确保更新既快又安全,且由严格的自动化测试门控支持 [1].

常见问题

How to create a Capacitor app?

构建一个 Capacitor app涉及几个简单的步骤:

  1. 设置环境: 安装 Node.js 和 npm 到您的系统上。然后,使用 Ionic CLI 来启动一个新的项目,带有 Capacitor 支持:

    ionic start myApp tabs --capacitor
  2. 添加平台支持: 添加您要目标的平台,如 iOS 或 Android:

    npx cap add ios
    npx cap add android
  3. 同步您的 web code: 确保您的 web code 与本机平台保持一致,通过运行:

    npx cap sync

同步步骤对于保持应用在各个平台的一致性以及在 CI/CD pipeline 中确保 smooth 操作至关重要。有关设置环境的更多详细信息,请参阅 Tools 部分。

继续阅读:设置 CI/CD 流程的 Capacitor 应用

如果您正在使用 设置 CI/CD 流程的 Capacitor 应用 为了计划 CI/CD 自动化,连接它与 Capgo CI/CD 为产品工作流程在 Capgo CI/CD 中 为产品工作流程在 Capgo Native Builds 中 为产品工作流程在 Capgo Native Builds 中 Capgo Integrations for the product workflow in Capgo Integrations, 为产品工作流程在 __CAPGO_KEEP_0__ Integrations 中 CI/CD Integration GitHub Actions Integration for the implementation detail in GitHub Actions Integration.

Capacitor应用的即时更新

当web层面的bug在线上时,通过Capgo直接发布修复,而不是等待几天的app store审批。用户在后台接收更新,而native层面的变化仍然在正常的审批流程中。

来自Martin的人工支持

立即开始

最新博客文章

Capgo为您提供了创建真正专业的移动应用所需的最佳见解。