Setting Up CI/CD for Capacitor Apps

Want faster, error-free app releases for iOS and Android? CI/CD pipelines for Capacitor 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 Capgo.

CI/CD的关键点:

为什么CI/CD对 Capacitor 应用程序至关重要?
: 可以加快构建速度78%并减少商店拒绝的数量60%。: 必备工具, Xcode, Android StudioCocoaPods
, 等。管道设置： npx cap sync依赖缓存和平台特定构建。
实时更新：Capgo: 开启发布后更新，带有分阶段发布和回滚保护。

快速设置步骤：

准备环境: 安装 iOS 和 Android 所需的工具。
配置项目: 更新 capacitor.config.ts 并安全地管理环境变量。
构建管道: 为两种平台自动安装依赖项、构建和测试。
优化性能: 使用缓存、并行构建和条件工作流程。
Add live updates：集成Capgo进行安全的、OTA更新以及分阶段发布。

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

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

准备您的CI/CD环境

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

工具和软件设置

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

对于iOS开发：

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管道链接的关键部分。

需要定义的关键变量：

BUILD_ENV: 指定部署阶段（例如， production)
IOS_SIGNING_IDENTITY:您的code签名证书
ANDROID_KEYSTORE_PATH:您的Android.keystore文件路径

在Android构建中，动态在CI过程中生成一个 local.properties 文件：

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

当与iOS构建一起工作时，请确保您的CI平台支持macOS代理。

To check if your environment is ready:

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

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

创建您的 CI/CD Pipelines

一旦您的环境准备好，就需要为您的 Capacitor 应用设置 CI/CD pipeline。这条管道应该高效地管理 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	.ipa	App Store Connect
Android	.aab	Google Play Console

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

Once your builds are validated and packaged, you’re ready to move on to live updates with Capgo (discussed in the next section).

sbb-itb-f9944d2

添加 Capgo 实时更新控制台界面

Capgo Live Update Dashboard Interface

Integrating Capgo into your workflow enhances your CI/CD process by enabling post-release updates. Here’s how to set it up:

Capgo Pipeline Configuration

首先，安装 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 功能概览

功能	描述
端到端加密	极大地减少了部署错误。
基于通道的部署	根据具体环境定制更新。
分阶段发布	确保更新逐渐分发。

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在开发中的作用

使用Capacitor应用的CI/CD管道显著提高了工作流效率。根据行业数据，团队可以实现 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].

常见问题

如何创建一个 Capacitor 应用？

创建一个 Capacitor 应用涉及几个简单的步骤：

设置环境: 在系统上安装 Node.js 和 npm。然后，使用 Ionic CLI 来启动一个新的项目，带有 Capacitor 支持：
```
ionic start myApp tabs --capacitor
```
添加平台支持: 添加您要目标的平台，如 iOS 或 Android：
```
npx cap add ios
npx cap add android
```
同步 web code: 确保您的 web code 与原生平台保持一致，运行：
```
npx cap sync
```

同步步骤对于保持应用程序在各个平台上的一致性以及在 CI/CD pipeline 中的平滑运行至关重要。有关设置环境的更多详细信息，请参阅工具部分。

继续设置 CI/CD for Capacitor 应用

如果您正在使用 设置 CI/CD for Capacitor 应用 来规划 CI/CD 自动化，连接它与 Capgo CI/CD 为产品工作流程在Capgo CI/CD中 Capgo 本地构建为产品工作流程在Capgo 本地构建中 Capgo 集成为产品工作流程在Capgo 集成中 CI/CD 集成 CI/CD 集成的实现细节中， GitHub 动作集成为GitHub 动作集成的实现细节