Skip to main content

构建并部署你的应用

¥Build and Deploy your App

现在你已经构建了第一个应用,你将希望将其分发,以便每个人都可以开始使用它。构建和部署应用的机制可能非常繁琐。这就是 应用流程 发挥作用的地方。Appflow 允许你有效地生成 Web 和原生构建、推送实时应用更新、将应用发布到应用商店以及自动化整个过程。完整的快速入门指南可以在 此处 中找到。

¥Now that you have built your first app, you are going to want to get it distributed so everyone can start using it. The mechanics of building and deploying your application can be quite cumbersome. That is where Appflow comes into play. Appflow allows you to effectively generate web and native builds, push out live app updates, publish your app to the app stores, and automate the whole process. The entire Quickstart guide can be found here.

下面我们将概述这些步骤。

¥Below we will run through an overview of the steps.

连接你的存储库

¥Connect Your Repo

Appflow 直接与 Git 版本控制配合使用,并使用你现有的代码库作为部署和包构建的真实来源。你首先需要与托管服务集成,例如 GitHub 或 Bitbucket,或者你可以将代码直接推送到 Appflow。完成此操作后,Appflow 将可以访问你的代码。

¥Appflow works directly with Git version control and uses your existing code base as the source of truth for Deploy and Package builds. You will first need to integrate with your hosting service, such as GitHub or Bitbucket, or you can push your code directly to Appflow. Once this is completed, Appflow will have access to your code.

有关将代码存储库连接到 Appflow 的更多信息,请查看 Appflow 文档中的 连接你的存储库 部分。

¥For more on connecting your code repository to Appflow, checkout the Connect your Repo section inside the Appflow docs.

安装 Appflow SDK

¥Install the Appflow SDK

Appflow SDK(也称为 Ionic Deploy 插件)将允许你利用可以说是两个最好的 Appflow 功能:将实时更新部署到你的应用并绕过应用商店。Ionic Appflow 的实时更新功能随 Appflow SDK 一起提供,并具有检测和同步你已推送到仪表板中已识别通道的应用更新的功能。

¥The Appflow SDK (also known as Ionic Deploy plugin) will allow you to take advantage of arguably two of the best Appflow features: deploying live updates to your app and bypassing the app stores. Ionic Appflow's Live Update feature is shipped with Appflow SDK and features the capabilities of detecting and syncing the updates for your app that you have pushed to your identified channels within the dashboard.

要将 Appflow SDK 插件添加到你的项目中,你可以按照 Appflow 仪表板中的安装说明进行操作,方法是单击 Deploy > Destinations 部分内的 "安装说明"。或者,你可以通过在应用的根目录中执行以下命令来手动安装插件:

¥To get the Appflow SDK plugin added to your project, you can follow the install instructions within the Appflow Dashboard by clicking on "Install Instructions" inside of the Deploy > Destinations section. Alternatively, you can install the plugin manually by executing the following command in your app's root directory:

ionic deploy add  \
--app-id="YOUR_APP_ID" \
--channel-name="YOUR_CHANNEL_NAME" \
--update-method="background|auto|none" \

有关安装 Appflow SDK 的先决条件和其他说明,请访问 Appflow 文档中的 安装 Appflow SDK 部分。

¥For prerequisite and additional instructions on installing the Appflow SDK, visit the Install the Appflow SDK section inside the Appflow docs.

推送提交

¥Push a Commit

为了让 Appflow 访问代码的最新和最大的更改,你需要通过你选择的版本控制集成推送提交。对于那些使用 GitHub 或 Bitbucket 的人来说,这将如下所示:

¥In order for Appflow to access the latest and greatest changes to your code, you will need to push a commit via the version control integration of your choosing. For those that use GitHub or Bitbucket, this would look as follows:

git add . # stage any changes
git commit -m "added appflow sdk" # commit staged changes
git push origin main # push the changes from the main branch to your git host

推送完成后,你将在 Appflow 仪表板的 Commits 选项卡下看到你的提交。有关这方面的更多信息,请查看 Appflow 文档中的 推送提交 部分。

¥After the push is made, you will then see your commit under the Commits tab of the Appflow Dashboard. For more on this, take a look at the Push a Commit section inside the Appflow docs.

部署实时更新

¥Deploy a Live Update

安装 Appflow SDK 并将你的提交推送到仪表板后,你就可以将实时更新部署到设备了。实时更新功能将已安装的 Appflow SDK 与你的原生应用一起使用来监听特定的部署通道目标。当将实时更新分配给通道目标时,该更新将部署到运行配置为监听该特定通道目标的二进制文件的用户设备。

¥With the Appflow SDK installed and your commit pushed up to the Dashboard, you are ready to deploy a live update to a device. The Live Update feature uses the installed Appflow SDK with your native application to listen to a particular Deploy Channel Destination. When a live update is assigned to a Channel Destination, that update will be deployed to user devices running binaries that are configured to listen to that specific Channel Destination.

要部署实时更新,需要创建 Web 构建。这可以通过 Commits 选项卡中的 Start build 图标或单击 Build > Builds 选项卡右上角的 New build 按钮来完成。选择要部署的正确提交后,选择 Web 目标平台和 Latest 构建堆栈。根据你的 Appflow 计划,你将能够包含自定义环境(如果配置了)。最后,你可以启用 Live Update 并选择通道,以便在构建成功完成后自动将其分配给该通道。

¥To get the live update deployed, a Web build will need to be created. This can be done through the Start build icon from the Commits tab or by clicking the New build button in the top right corner of the Build > Builds tab. After selecting the correct commit to deploy, select the Web target platform and the Latest build stack. Depending on your Appflow plan, you will then be able to include custom environments, if any are configured. Finally, you can enable Live Update and pick the Channel to automatically assign the build to once it successfully completes.

完成 Web 构建后,你可以使用其他版本控制选项。完成本部分并成功部署构建后,你可以将其分配到你在安装 Appflow SDK 时通过单击构建详细信息页面中的 Deploy live updates 按钮将其配置为监听的同一通道。可以通过单击 Build > Builds 选项卡中构建上的 Deploy live updates 图标并从下拉列表中选择通道来完成相同的操作。

¥Upon completion of the Web Build, additional versioning options are available to you. After completing this section and you have a successful Deploy build, you can then assign it to the same Channel you configured the Appflow SDK to listen to when you installed it by clicking the Deploy live updates button in the build detail page. The same can be done by clicking the Deploy live updates icon on the build in the Build > Builds tab and select the Channel from the dropdown.

要接收此实时更新,你需要在设备或模拟器上运行该应用。最快、最简单的方法是通过以下命令:

¥To receive this live update, you will need to run the app on a device or an emulator. The quickest and easiest way to do this is through the following command:

ionic [cordova | cap] run [ios | android] [options]

假设应用已正确配置为监听你部署的通道,如果你在设置过程中选择了自动更新方法,应用应在启动时立即更新。如果选择后台更新方法,请务必在应用中停留约 30 秒,以确保更新已下载。然后,关闭应用,重新打开它,你将看到已应用的更新!

¥Assuming the app is configured correctly to listen to the channel you deployed too, the app should immediately update on startup if you have chosen the auto update method during setup. If the background update method was chosen, be sure to stay in the app for about 30 seconds to ensure the update was downloaded. Then, close the application, reopen it, and you will see the updates applied!

要深入了解部署实时更新的步骤的更多详细信息,以及禁用部署以进行开发等其他信息,请查看 Appflow 文档中的 部署实时更新 部分。

¥To dive into more details on the steps to deploy a live update, as well as additional information such as disabling deploy for development, check out the Deploy a Live Update section inside the Appflow docs.

构建原生二进制文件

¥Build a Native Binary

接下来是用于你的应用构建和部署过程的原生二进制文件。这是通过 Ionic 包 服务完成的。首先,你需要创建一个 包构建。这可以通过单击 Commits 选项卡中的 Start build 图标或单击 Build > Builds 选项卡右上角的 New build 按钮来完成。然后,你将为你的构建选择正确的提交,并填写所有几个必填字段以及你想要指定的任何可选字段。填写所有信息并开始构建后,你可以检查其进度并查看日志(如果遇到任何错误)。

¥Next up is a native binary for your app build and deploy process. This is done via the Ionic Package service. First things first, you will need to create a Package build. This can be done by clicking the Start build icon from the Commits tab or by clicking the New build button in the top right from the Build > Builds tab. Then you will select the proper commit for your build and fill in all of the several required fields and any optional fields that you want to specify. After filling in all of the information and the build begins, you can check out it's progress and review the logs if you encounter any errors.

如果包构建成功,你将可以使用 iOS 二进制文件(.ipa 或 IPA)或/和 Android 二进制文件(.apk 或 APK)。随后可以下载该文件,以便你可以通过单击构建详细信息页面右侧 Artifacts 部分中的文件名或单击 Build > Builds 选项卡中构建上的 Download IPA/APK 图标将其安装在设备上。

¥Given a successful Package build, an iOS binary (.ipa or IPA) or/and an Android binary (.apk or APK) file becomes available to you. The file can subsequently be downloaded so you can install it on a device by clicking the file name in the Artifacts section in the right of the build detail page or clicking the Download IPA/APK icon on the build in the Build > Builds tab.

有关构建原生二进制文件的更多信息可以在 Appflow 文档内的 构建原生二进制文件 部分中找到。

¥Further information regarding building native binaries can be found inside of the Build a Native Binary section inside the Appflow docs.

创建自动化

¥Create an Automation

自动化 使你和你的团队能够利用 Appflow 的全部 CI/CD 功能。你可以创建自动化,每次你的团队向给定分支提交新代码时都会触发 包构建部署构建。自动化还可以配置为使用不同的环境和原生配置来构建不同版本的应用以进行开发、暂存、质量检查和生产。

¥Automations enable you and your team to utilize the full CI/CD powers of Appflow. You can create automations that trigger Package builds and Deploy builds every time your team commits new code to a given branch. The automations can also be configured to use different environments and native configurations for building different versions of your app for development, staging, QA and production.

有关更多信息,请访问 Appflow 文档中的 创建自动化 部分。在那里你将看到有关创建单个自动化的详细信息。但是,你可以为不同的分支或工作流程创建多个自动化,并自定义它们以满足你的需求。需要注意的是,我们的 基本计划 及以上版本的用户可以使用创建自动化的功能。

¥For more information, visit the Create an Automation section within the Appflow docs. There you will see details on creating a single automation. However, you can create multiple automations for different branches or workflows and customize them to fit your needs. An important note is that the ability to create an automation is available for those on our Basic plans and above.

创造环境

¥Create an Environment

包构建部署构建 可以通过 环境 进一步定制。这个强大的功能允许你根据构建时传入的环境变量创建不同的配置。与 自动化 功能结合使用时,开发团队可以轻松配置开发、暂存和生产构建配置,从而使他们能够采用 DevOps 最佳实践并比以往更快地交付更高质量的更新。

¥Package builds and Deploy builds can be further customized via Environments. This powerful feature allows you to create different configurations based on the environment variables passed in at build time. When combined with the Automation feature, development teams can easily configure development, staging, and production build configurations, allowing them to embrace DevOps best practices and ship better quality updates faster than ever.

创建环境适用于 基本计划 及以上级别的人员。有关这方面的更多信息可以在 Appflow 文档中的 创造环境 部分找到。

¥Creating an Environment is available for those on our Basic plans and above. More information on this can be found in the Create an Environment section within the Appflow docs.

创建原生配置

¥Create a Native Configuration

原生配置 允许你轻松修改可在不同环境(开发、生产、登台等)之间更改的通用配置值,因此你无需使用额外的逻辑或手动将它们提交到版本控制。原生配置可以附加到任何 包构建自动化

¥Native Configurations allow you to easily modify common configuration values that can change between different environments (development, production, staging, etc.) so you do not need to use extra logic or manually commit them to version control. Native configurations can be attached to any Package build or Automation.

原生配置可用于:

¥Native configs can be used to:

要获得创建原生配置的能力,你需要使用我们的 基本计划 及更高版本。有关此功能的更多详细信息,请参阅 Appflow 文档中的 创建原生配置 部分。

¥For access to the ability to create a Native Configuration, you will need to be on our Basic plans and above. Additional details of this feature can be found in the Create a Native Configuration section within the Appflow docs.

下一步是什么?

¥What’s Next?

恭喜!你开发了一个完整的跨平台照片库应用,可以在 Web、iOS 和 Android 上运行。不仅如此,你还构建了应用并将其部署到你的用户设备!

¥Congratulations! You developed a complete cross-platform Photo Gallery app that runs on the web, iOS, and Android. Not only that, you have also then built the app and deployed it to your users devices!

从这里开始有很多路径可供选择。尝试向应用添加另一个 Ionic UI 组件,或更多 原生功能。天空是极限。添加其他功能后,通过 Appflow 再次运行构建和部署过程,将其提供给你的用户。

¥There are many paths to follow from here. Try adding another Ionic UI component to the app, or more native functionality. The sky’s the limit. Once you have added another feature, run the the build and deploy process again through Appflow to get it out to your users.

快乐的应用构建!💙

¥Happy app building! 💙