跳转至正文
CI/CD

使用 Codemagic 自动进行 Capacitor iOS build

如何在 5 分钟内使用 Codemagic 为 iOS Ionic 应用设置 CI/CD 流水线(2024)

使用 Codemagic 实现 Capacitor iOS 自动构建 Capgo 博客插图

使用 Codemagic 实现 iOS 持续交付

前提条件

在继续教程之前……

  • iOS 开发者计划会员资格。
  • 想读一下 😆…

关于价格的重要说明

Codemagic Action 价格

https://codemagic.io/pricing/

该服务是“免费”, 每月最多可使用 500 分钟 macOS M1,具体取决于所选机型。
我们将使用一台 macOS M1 机器,你可以在截图中看到其价格和限制(价格以教程编写时为准,未来可能会有变动)

🔴 了解完要求和价格后,如果你愿意,我们就继续…

📣 本文假设我们已在 iTunes Connect 中创建了 App,并且拥有 Apple 生态系统的证书,所有配置都将由 Codemagic 完成!

让我们开始吧 🤿

本文的操作步骤

  1. 使用 App Store Connect API 配合 Codemagic
  2. 要求
  3. 创建 App Store Connect API 密钥
  4. 使用 App Store Connect API 密钥
  5. 复制 Fastlane 文件
  6. 配置 Codemagic

1. 在 Codemagic 中使用 App Store Connect API

自 2021 年 2 月起,所有用户都必须使用双重认证或两步验证登录 App Store Connect。为 Apple ID 增加这层额外安全保护,有助于确保只有您本人能访问自己的账户。
来自 Apple 支持

开始使用 match 需要撤销现有证书。别担心,你会直接获得新证书。

要求

为了能够使用 App Store Connect API,Codemagic 需要 三 以下信息。

  1. Issuer ID。
  2. Key ID。
  3. Key 文件或 Key 内容。

创建 App Store Connect API 密钥

要生成密钥,您必须在 App Store Connect 中拥有管理员权限。如果没有该权限,请将此文章转发给相关人员,并让他们按照以下步骤操作。

1 — 登录 App Store Connect.

2 — 选择 用户与访问权限.

App Store Connect 用户访问权限

3 — 选择 API 密钥选项卡。

App Store Connect API 密钥

4 — 点击生成 API 密钥或添加(+)按钮。

在 App Store Connect 创建 API 密钥

5 — 输入密钥名称并选择访问级别。我们建议选择 App Manager 访问权限,了解更多关于 Apple Developer Program 角色权限的信息 这里

App Store Connect API 密钥创建:名称

6 — 点击 Generate。

无法将 API 密钥的访问权限限定到特定 App。

新密钥的名称、密钥 ID、下载链接及其他信息将显示在页面上。

在 App Store Connect 下载密钥

在这里获取全部三项必要信息: <1> Issue ID。
<2> Key ID。
<3> 点击 “Download API Key” 下载您的 API 私钥。下载链接仅在私钥尚未下载时显示。Apple 不会保留私钥副本,因此您只能下载一次。

🔴 请妥善保管私钥。切勿分享密钥,不要将密钥存储在 code 仓库中,也不要在客户端 code 中包含密钥。

将 App Store Connect API 密钥添加到 Codemagic

  1. 打开你的 Codemagic Team 设置, 选择团队集成 打开团队 选择 code 签名身份 选择 code 签名身份 并上传证书 上传证书

  2. 点击 添加密钥 按钮。

  3. 输入 App Store Connect API key name。这是密钥的可读名称,稍后将在应用设置中用于引用该密钥。

  4. 输入 Issuer ID 以及 Key ID 值。

  5. 点击 选择 .p8 文件 或将文件拖到此处,上传之前下载的 App Store Connect API 密钥。

  6. 点击 保存.

现在我们可以使用 App Store Connect API 密钥来管理 Codemagic 了,太棒了!

2. 创建证书和 Provisioning Profile

证书

打开 Xcode 并前往 设置 > 账户 > Apple ID > 团队 并选择你的团队。

Code 签名身份

点击 管理证书 > + 并选择 Apple Distribution.

Apple Distribution

然后你可以创建一个新证书。

然后,你需要前往 Keychain 将证书下载为 .p12 文件。

为此,你需要打开 Keychain 并切换到 登录 钥匙串,然后点击 我的证书.

我的证书

然后选择要下载的证书。(按证书日期查找)

然后右键点击该证书并选择 导出.

选择文件格式 个人信息交换 (.p12).

这会将证书下载为 .p12 文件。

Provisioning Profile

打开 Apple Developer 并选择正确的团队。

然后,点击 +

创建新配置文件

并选择 App Store Connect.

选择 App Store Connect

然后你需要选择正确的应用,注意不能使用通配符,否则签名会失败。

选择正确的应用

选择你之前创建的正确证书(查看过期日期,它应该与今天的日期和月份相同),然后点击 继续.

选择正确的证书

最后输入 profile 名称并点击 生成.

该名称将用于在 Codemagic 中识别配置文件。

生成描述文件

你可以将描述文件下载为 .mobileprovision 文件。

下载描述文件

添加 Code 签名证书

Codemagic 允许你上传 code 签名证书,格式为包含证书和私钥的 PKCS#12 归档文件(使用证书时需要私钥)。上传时,Codemagic 会要求你提供证书密码(如果证书受密码保护)以及一个唯一的 引用名称,之后可在 codemagic.yaml 配置中用于获取特定文件。

  • 上传证书
  • 生成新证书
  • 从开发者门户获取
  1. 打开你的 Codemagic 团队设置,前往 codemagic.yaml 设置 > Code 签名身份.
  2. 打开 iOS 证书 选项卡。
  3. 点击下方区域上传证书文件 选择 .p12 或 .pem 文件 或将其拖入指定区域。
  4. 输入 证书密码 并选择 引用名称.
  5. 点击 添加证书

添加 Provisioning Profile

Codemagic 允许你上传用于该应用的 provisioning profile,或从 Apple Developer Portal 获取 profile。

对于添加到 Code signing identities 的每个 profile,都会显示其类型、team、bundle id 和过期日期。此外,Codemagic 还会告知你 Code signing identities 中是否有匹配的 code signing certificate(在 证书 字段中显示绿色对勾),否则没有。

3. 设置 Codemagic

配置 Codemagic secrets

有没有想过这些值 ENV 是从哪里来的?其实这不再是秘密——它们来自你项目的 secret。🤦

4. 配置 Codemagic workflow 文件

创建一个名为 codemagic.yml 的文件,放在项目根目录下,并添加以下内容。

workflows:
  ionic-capacitor-ios-workflow:
    name: Capacitor iOS Workflow
    max_build_duration: 120
    instance_type: mac_mini_m1
    integrations:
      app_store_connect: CodeMagic
    environment:
      ios_signing:
        distribution_type: app_store
        bundle_identifier: YOUR_BUNDLE_IDENTIFIER
      vars:
        XCODE_WORKSPACE: ios/App/App.xcworkspace
        XCODE_SCHEME: App
        APP_STORE_APP_ID: YOUR_APP_STORE_APP_ID
      node: v20.14.0
      xcode: 15.4
      cocoapods: default
    triggering:
      events:
        - tag
      tag_patterns:
        - pattern: '*'
          include: true
    scripts:
      - name: Install dependencies
        script: |
          npm install
      - name: Cocoapods installation
        script: |
          cd ios/App && pod install
      - name: Update dependencies and copy web assets to native project
        script: |
          npm run build
          npx cap sync ios
      - name: Set up code signing settings on Xcode project
        script: |
          xcode-project use-profiles
      - name: Increment build number
        script: |
          cd $CM_BUILD_DIR/ios/App
          LATEST_BUILD_NUMBER=$(app-store-connect get-latest-app-store-build-number "$APP_ID")
          agvtool new-version -all $(($LATEST_BUILD_NUMBER + 1))
      - name: Build ipa for distribution
        script: |
          xcode-project build-ipa \
            --workspace "$XCODE_WORKSPACE" \
            --scheme "$XCODE_SCHEME"
    artifacts:
      - build/ios/ipa/*.ipa
      - /tmp/xcodebuild_logs/*.log
      - $HOME/Library/Developer/Xcode/DerivedData/**/Build/**/*.app
      - $HOME/Library/Developer/Xcode/DerivedData/**/Build/**/*.dSYM
    publishing:
      email:
        recipients:
          - YOUR_EMAIL
        notify:
          success: true # To not receive a notification when a build succeeds
          failure: false # To not receive a notification when a build fails
      app_store_connect:
        auth: integration
        # Configuration related to TestFlight (optional)
        # Note: This action is performed during post-processing.
        submit_to_testflight: true
        # Configuration related to App Store (optional)
        # Note: This action is performed during post-processing.
        submit_to_app_store: false

这个 workflow 应手动触发,或在每次 GitHub 后触发。 标签,如果需要自动打 tag,请参考 使用 GitHub actions 自动构建与发布 首先。

接着,这个 workflow 会拉取你的 NodeJS 依赖、安装它们并构建你的 JavaScript 应用。

每次您推送新标签时,系统都会在 TestFlight 中构建一个新版本。

你的 App 不需要使用 Ionic,只有 Capacitor 基础是必需的;它可以包含旧的 Cordova 模块,但应优先使用 Capacitor JS 插件。

5. 触发工作流

触发 workflow

把新的 commit 推送到分支 main 或 development 来触发工作流。

由 commit 启动

几分钟后,build 应该就会出现在你的 App Store Connect dashboard 中。

TestFlight Dashboard

手动启动

您可以手动启动工作流。

首先选择要构建的应用,然后点击 开始新构建.

选择应用

然后选择要构建的分支。

选择分支

并点击 开始新构建.

然后前往构建列表

构建列表

然后点击该构建查看结果。

构建结果

可从本地机器部署

可以,而且毫不费力。

你可以像往常一样使用 Xcode 来构建并签名你的 App。

感谢

本文参考了以下文章:

继续使用 Codemagic 自动构建 Capacitor iOS

如果你正在使用 使用 Codemagic 自动进行 Capacitor iOS build 规划 CI/CD 自动化,并将其与 Capgo CI/CD 集成 用于 Capgo CI/CD 中的产品工作流, Capgo Native Build 用于 Capgo Native Builds 中的产品工作流, Capgo 集成 用于 Capgo 集成中的产品工作流, CI/CD 集成 了解 CI/CD 集成的实现细节,以及 GitHub Actions 集成 有关 GitHub Actions 集成的实现细节。

为 Capacitor 应用提供 Live Updates

当 Web 层出现线上 Bug 时,通过 Capgo 发布修复,而不用等 App Store 审核好几天。用户会在后台收到更新,原生变更则仍走正常审核流程。

博客最新动态

Capgo 为你提供打造真正专业的移动应用所需的最有价值的洞察。