开发基于 Expo 的 App 并搭建私有热更新服务

1,297 阅读2分钟

本文主要参考 expo 官方教程, 并且加入笔者遇到的一些坑, 这意味着这篇文章具有时效性.
github.com/expo/custom…
本文是笔者另一篇文章的姐妹篇, 如果你想要了解热更新服务如何在生产环境中管理, 可以参阅
www.yuque.com/muxi2015/vu….

简易流程

首先要明确一点, 使用私有热更新服务意味着你要放弃 expo(eas)的官方服务器的热更新服务, 并且要使用 expo-dev-client 模式.

简易流程如下:
一. 参考本文 bare你的代码, docs.expo.dev/development…
二. 在 app.config.json(app.config.js/app.config.ts) 中, 为 updates.url设置正确的 url(下文会讲), 为 runtimeVersion设置正确的值(下文会讲)
三. 打包 App
四. 部署热更新服务端
五. 发布热更新

详细流程

一. bare 代码

在 expo 中, 代码管理模式有两种 managedbare, managed表示由 expo 帮助你管理原生代码, bare表示自行管理原生代码. 通俗点讲就是执行 expo prebuild, 当然, 现在别着急, 等配置完第二步在执行

二. 配置热更新服务 url

如果使用 managed模式, 将会使用 expo的热更新服务器, 但是既然我们要搭建自己的热更新服务器, 就要配置我们自己的热更新服务 url, 而配置的字段就是 updates.url, 这个字段就是你部署的热更新服务的地址, 例如 [http://192.168.31.35:3000/api/manifest](http://192.168.31.35:3000/api/manifest)
同时还需要配置一个 runtimeVersion字段, 笔者也不清楚为什么 expo 开发者会起这个名字, 它们会被一起使用, 在检测热更新时expo会请求类似的 updates.url?runtimeVersion=runtimeVersion&platform=android的 api 来检查是否有更新, 例如 [http://192.168.31.35:3000/api/manifest?runtime-version=app&platform=android](http://192.168.31.35:3000/api/manifest?runtime-version=app&platform=android), 如果没有特殊需求, 笔者建议配置为 app.

三. 打包 App

可以自行通过 expo prebuild产生的 androidios文件夹打包, 也可以使用 expo[eas 服务](https://docs.expo.dev/build/introduction/), 笔者一般使用 eas build --profile preview --platform android --local进行本地打包.

四. 部署热更新服务

官方已经提供了 nextjs 版本的, 这里笔者参考(拷贝)其代码, 开发一个 express 版本的, 笔者公司也是使用该版本, 需要可以自取, 支持 docker 部署.
github.com/MonchiLin/e…

五. 发布热更新

在 app 项目目录下执行 expo export --experimental-bundle, 会得到 dist文件夹.
如果你使用笔者的热更新服务版本, 只需要将 dist文件夹放置于 热更新服务/public/updates/{runtimeVersion}, 例如你在 app.config.json中将 runtimeVersion设置为了 app, 那么路径就为 热更新服务/public/updates/app
默认情况下 app 检测到热更新会自动更新, 并且在更新完成之后下次打开生效.

官方 demo 仓库和笔者的另一篇文章中都有完整的 demo, 有兴趣可以 clone 代码自行研究.

坑(持续更新中)

android 不能通过 localhost访问局域网, 所以你在测试热更新中, 应该将 app.config.jsonupdates.url字段设置为 192.168.x.x或者 10.0.2.2