首发于公众号 前端混合开发,欢迎关注。

image.png

在这篇文章中,我将指导你如何在AppCenter中为一个React Native项目在 Android 和 iOS 上设置多个环境。我们将建立三个明确的分发环境,分别用于开发、测试和生产,并配置 CodePush 以便为每个环境提供更新。

步骤1:在AppCenter中配置多个环境。

  1. 前往应用中心:选择你的应用
  2. 导航至 Distribute > CodePush > Settings
  3. 创建多个环境:点击 + New Deployment 命名你的环境,并保存它。例如:

    • Development
    • Testing
    • Production

image.png

image.png

  1. 生成 CodePush 命令:创建这些环境后,你将收到针对每个环境的特定CodePush命令。每个命令的唯一区别在于最后指定的环境。以下是一些例子:

image.png

// For Development
appcenter codepush release-react -a xxxxx/AwesomeProject -d Development

// For Testing
appcenter codepush release-react -a xxxxx/AwesomeProject -d Testing

// For Production
appcenter codepush release-react -a xxxxx/AwesomeProject -d Production

iOS应用重复这些步骤,你的AppCenter设置现在就已经完成

步骤2:针对Android的平台特定配置

编辑 android/app/build.gradle: 为 releaseDevelopmentreleaseTesting 添加两个新的发布对象,每个对象都有各自的CodePush密钥。这些名称可以由你自己选择,你可以在AppCenter中找到密钥: AppCenter->Select your Android App->Distribute->CodePush->settings

release {
       signingConfig signingConfigs.debug
       minifyEnabled enableProguardInReleaseBuilds
       proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
       resValue "string", "CodePushDeploymentKey", 'xxxxxx' //Paste your CodePush Key for Production.
  }
releaseDevelopment {
       matchingFallbacks = ['release']
       signingConfig signingConfigs.release
       minifyEnabled enableProguardInReleaseBuilds
       proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
       resValue "string", "CodePushDeploymentKey", 'xxxxxx' //Paste your CodePush Key for Developement.
}  
releaseTesting {
       matchingFallbacks = ['release']
       signingConfig signingConfigs.debug
       minifyEnabled enableProguardInReleaseBuilds
       proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
       resValue "string", "CodePushDeploymentKey", 'xxxxxx' //Paste your CodePush Key for Testing.
 }

image.png

2.为特定环境构建:为所需环境构建应用程序的发布版本。例如,对于开发环境,将 assembleRelease 替换为 assembleReleaseDevelopment

cd android && ./gradlew clean && ./gradlew app:assembleReleaseDevelopment && cd ..

3.CodePush更新:对你的JavaScript进行更改,然后运行相应环境的CodePush命令。以下是开发环境的一个例子:

appcenter codepush release-react -a xxxxx/AwesomeProject -d Development

成功运行此命令后,前往 AppCenter -> YourProjectName -> Distribute -> CodePush 。从下拉菜单中选择你的环境,选择版本,然后点击右上角的设置(齿轮图标)。启用 Required Update 选项。

在CodePush之前

image.png

在CodePush之后:

image.png

步骤3:针对iOS的平台特定配置

Xcode 配置:

  • 打开Xcode并选择你的项目 Xcode->ProjectName
  • 在配置下, 右键 duplicate “Release 配置并添加你的环境 + icon -> Duplicate “Release” Configuration

image.png

image.png

2. Xcode中的用户自定义设置:

  • 前往构建设置并为 CodePush密钥 Build Settings -> + icon -> Add User Defined Setting 添加用户定义的设置。
  • 将你的每个环境对应的CodePush密钥粘贴到 CODEPUSH_KEY 中。

image.png

image.png

image.png

3. Info.plist 配置:

在你的项目目录中的 Info.plist 文件中,添加以下键和字符串,其中字符串与你在Xcode的用户定义设置中定义的字符串匹配:

<key>CodePushDeploymentKey</key>
<string>$(CODEPUSH_KEY)</string>

image.png

4. 为不同环境发布构建:

要为不同环境创建发布版本,请在Xcode中选择你的项目名称,前往 Edit Scheme > Archive > Build Configuration ,并选择你想要的环境。

image.png

image.png

5. CodePush更新

对JavaScript进行更改,并运行相应环境的CodePush命令。以下是开发环境的一个示例:

appcenter codepush release-react -a xxxxxx/AwesomeProject-IOS -d Development

成功运行此命令后,前往 AppCenter -> YourProjectName -> Distribute -> CodePush 。从下拉菜单中选择你的环境,选择版本,然后点击右上角的设置(齿轮图标)。启用 Required Update 选项。

在CodePush之前

image.png

在CodePush之后:

image.png

你的多环境CodePush设置已经完成,适用于Android和iOS。

总结

在你的React Native项目中设置多个CodePush环境可以极大地提升你的开发、测试和生产流程。通过本指南提供的配置,你可以灵活地在不同的环境中无缝部署更新,确保更顺畅的应用开发生命周期。

请谨慎管理您的CodePush密钥和环境,确保敏感信息的安全,并遵循应用程序分发和更新的最佳实践。此外,始终在将它们推向生产环境之前,在你的测试环境中彻底测试您的CodePush更新,以确保可靠的用户体验。

https://medium.com/@ritika100898/multi-environment-setup-for-...

交流

首发于公众号 大迁世界,欢迎关注。📝 每周一篇实用的前端文章 🛠️ 分享值得关注的开发工具 ❓ 有疑问?我来回答

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考点、资料以及我的系列文章。


王大冶
68.2k 声望105k 粉丝