为 RNW 应用设置持续集成管道
需要进行架构审查:本文档旨在支持针对 React Native 的“旧”或“遗留”架构的开发。它可能适用也可能不适用于新架构的开发,需要审查并可能需要更新。有关 React Native Windows 中 React Native 架构的信息,请参阅新旧架构。
本指南将帮助您开始为 React Native for Windows 应用设置您的第一个持续集成管道。
使用 GitHub Actions 设置持续集成管道
完成应用开发后,最好设置一个具有自动化构建和测试的 CI 管道,以避免未来出现任何回归。有许多服务可用于设置 CI 管道。我们将使用 GitHub Actions 作为示例,因为它不需要额外的账户设置(如果您已经在 GitHub 上托管您的代码),并且默认的 VM 映像预装了我们所需的所有工具。
GitHub Actions CI/CD 支持的 VM 映像可以在此处找到,请检查预装工具并将其与 React Native Windows 开发依赖项进行比较,找到符合要求的映像。
接下来您需要为 GitHub Actions 创建一个 YAML 文件,基本步骤是:
- 签出代码并设置环境
name: Windows CI
on: [pull_request]
jobs:
run-windows-tests:
name: Build & run tests
runs-on: windows-2022
steps:
- uses: actions/checkout@v2
name: Checkout Code
- name: Setup Node.js
uses: actions/setup-node@v1
with:
node-version: '^18'
- name: Setup MSBuild
uses: microsoft/setup-msbuild@v2
- name: Install node modules
run: yarn --frozen-lockfile
- 构建并运行项目
- name: Run Windows x64 release
run: npx react-native run-windows --arch x64 --release --logging
查看完整的 react-native-webview
示例以及它们的官方示例以获取更多信息。
将 YAML 文件保存到 .github\workflows\
并提交。要了解更多关于 YAML 语法的信息,请参阅GitHub Actions 的工作流语法。
GitHub Actions 应该默认启用,如果因某种原因未启用,您可以转到仓库的设置->Actions 选项卡来启用它(需要所有者访问权限)。
现在推送您的更改,CI 管道应该已经启动并运行。
为签名包构建设置管道
证书用于签名 RNW 应用,以便它们可以本地安装或发布到 Microsoft Store。这些数据不应公开,因此如果我们要通过 GitHub Actions 构建/运行已签名的 RNW 应用包,我们需要采取额外的步骤。
安全存储证书
您有几个选项可以安全地存储您的证书信息:
当您使用 GitHub Actions 运行管道时,GitHub Secrets 效果很好。如果您使用 Azure DevOps 运行管道,后两种方法效果很好。
对于 Azure 安全文件,您将上传 .pfx
文件本身。其余两种方法需要字符串形式的数据。因此,您必须将 .pfx
文件进行 Base64
编码,然后通过运行以下 PowerShell 命令,将生成的字符串作为您的密钥上传:
$fileContentBytes = get-content '<Path-to-Pfx>' -Encoding Byte
[System.Convert]::ToBase64String($fileContentBytes) | Out-File pfx-encoded-bytes.txt
然后将 pfx-encoded-bytes.txt
的内容上传为您的密钥。
从管道访问证书数据
对于 Azure 安全文件,检索密钥将下载 .pfx
文件本身。其余两种方法将为您提供编码字符串。因此,您必须解码密钥,并将其保存到 .pfx
文件中,然后才能用于签名。在 YAML 文件中,从存储在 GitHub Actions 中的编码字符串生成证书的基本步骤是:
- name: Decode the pfx
run: |
$PfxBytes = [System.Convert]::FromBase64String("${{ secrets.Base64_Encoded_Pfx }}")
$PfxPath = [System.IO.Path]::GetFullPath( (Join-Path -Path ProjectDirectoryPath -ChildPath GitHubActionsWorkflow.pfx) )
[System.IO.File]::WriteAllBytes("$PfxPath", $PfxBytes)
其中您的编码字符串是一个名为 Base64_Encoded_Pfx
的 GitHub Secret。
在 YAML 文件中,使用证书构建已签名的 RNW 应用程序的基本步骤是:
steps:
- name: run-windows (Release) - CI
run: yarn windows --no-launch --arch x64 --logging --release --msbuildprops PackageCertificateKeyFile=ProjectDirectoryPath\GitHubActionsWorkflow.pfx
使用完 .pfx
后,请务必从管道中删除它。在 YAML 文件中,删除证书的基本步骤是:
- name: Remove the pfx
run: |
$certificatePath = Join-Path -Path ProjectDirectoryPath -ChildPath GitHubActionsWorkflow.pfx
Write-Host $certificatePath
Remove-Item -path $certificatePath
请参阅 Xaml-Islands-Samples
仓库,了解使用 GitHub Secrets 的管道示例。请参阅 react-native-gallery
仓库,了解使用 Azure DevOps 安全文件的管道示例。请参阅 react-native-windows 仓库,了解使用 Azure Key Vault 的管道示例:证书设置 证书删除 签名 RNW 应用构建
常见问题
我准备进行签名应用构建。如何告诉 MSBuild 使用我的证书?
您可以通过 PackageCertificateKeyFile
MSBuild 属性告诉 MSBuild 您希望使用哪个 .pfx
来签署您的应用程序。此属性需要您要使用的 .pfx
文件的路径。请参阅此处以获取使用 VSBuild
的示例。请参阅此处以获取使用 RNW CLI 的示例。
我的管道在仓库的派生版本(即当创建 PR 时)上运行。我可以从这个管道访问我的证书数据吗?
不能。当数据通过 GitHub Secrets、Azure DevOps 安全文件或 Azure Key Vault 安全存储时,它只能从原始仓库分支上执行的管道运行。无法从运行仓库派生版本代码的管道访问数据,因为如果数据可以被访问,有人可能会在他们的派生版本中操纵管道源代码以检索数据,从而导致数据不安全。
我想从一个无法访问我的证书数据的管道为我的应用程序构建可部署包。我该怎么办?
如果您想在 PR 管道中进行一些端到端测试,以确保传入的更改不会破坏您的项目,则此情况可能适用。您有几个选择可以在没有证书的情况下完成工作。您可以通过从布局部署来成功构建和部署未签名的 RNW 应用程序。只要项目文件中未设置 MSBuild 参数 AppxPackageSigningEnabled
或 PackageCertificateFile
,RNW CLI 默认会从布局部署。如果您的应用程序不是这种情况,您可以通过使用 --deploy-from-layout
CLI 选项强制从布局部署。