likes
comments
collection
share

ReactNative Expo开发 - 12 译 - 使用自己的主机承载应用

作者站长头像
站长
· 阅读数 4

ReactNative Expo开发 - 12 译 - 使用自己的主机承载应用 通常情况下,当启用空中 (OTA) 更新时,您的应用程序将从 Expo 的 CDN 获取包含 JavaScript 捆绑包和资产的更新。然而,在某些情况下,您会希望在自己的服务器上托管您的JS捆绑包和资产。例如,在一些国家,OTA更新速度很慢或无法使用,而这些国家已经在AWS和谷歌云上屏蔽了Expo的CDN提供商。在这些情况下,您可以在自己的服务器上托管您的更新,以更好地适应您的使用案例。 为了简单起见,本文的其余部分将参考托管Android平台的更新,但您可以在任何时候将Android换成iOS,一切仍将如此。

导出更新

首先,您需要导出更新的所有静态文件,以便它们可以从您的CDN服务。要做到这一点,在你的项目目录下运行expo export --public-url ,它将输出你的应用程序的所有静态文件到一个名为dist的目录。在本指南中,我们将使用 expo.github.io/self-hostin… 作为我们的服务器端点示例。Asset和bundle文件通过其内容的MD5哈希来命名。你的输出目录现在看起来应该是这样的。

.
├── android-index.json
├── ios-index.json
├── assets
│   └── 1eccbc4c41d49fd81840aef3eaabe862
└── bundles
      ├── android-01ee6e3ab3e8c16a4d926c91808d5320.js
      └── ios-ee8206cc754d3f7aa9123b7f909d94ea.js

托管您的静态文件

一旦你输出了更新的静态文件,你就可以在自己的服务器上托管这些内容。例如,在你的dist输出目录中,托管你自己的文件的一个简单方法是将内容推送到Github。你可以启用Github Pages,让你的应用在一个基本的URL中可用,比如username.github.io/project-nam… Github 上托管你的文件,你可以做这样的事情。在你的项目目录下运行这个

expo export --public-url https://expo.github.io/self-hosting-example

将输出目录的内容提交到您的repo中

cd dist
git init && git remote add origin git@github.com:expo/self-hosting-example.git
git add * && git commit -m "Update my app with this JS bundle"
git push origin master

要设置一个QR代码来查看您的托管更新,或者如果您想在本地托管您的文件,请按照以下 "在开发中加载QR代码/URL "部分的说明进行操作。

在开发中加载QR码/URL

您也可以将自己服务器上托管的更新以二维码/URL的形式加载到Expo手机客户端中进行开发。

二维码

您要用来转换为QR码的URI将使用exps/exp协议进行深度链接。exps和exp都会分别使用HTTPS和HTTP深度链接到移动应用中并执行请求。你可以使用在线二维码生成器从输入的URI创建自己的二维码。下面是一个例子,说明你如何用远程服务器来做这件事。

URI: exps://expo.github.io/self-hosting-example/android-index.json
QR code: Generate the URI from a website like https://www.qr-code-generator.com/

下面是一个在localhost上进行操作的例子。在开发模式下运行expo export 然后在你的输出目录下启动一个简单的HTTP服务器。

# Find your local IP address with `ipconfig getifaddr en0`
# export static app files
expo export --public-url http://`ipconfig getifaddr en0`:8000 --dev
# cd into your output directory
cd dist
# run a simple http server from output directory
python -m SimpleHTTPServer 8000
URI: exp://192.xxx.xxx.xxx:8000/android-index.json (find your local IP with a command like ipconfig getifaddr en0)

QR code: Generate a QR code using your URI from a website like www.qr-code-generator.com/ URL

如果您通过传递URL字符串将更新加载到开发客户端,您将需要传递指向JSON清单文件的URL。下面是一个来自远程服务器的URL例子。

https://expo.github.io/self-hosting-example/android-index.json

下面是一个来自localhost的URL例子。

http://localhost:8000/android-index.json

HTTP Headers

在一些托管服务上,如AWS和Firebase,你需要明确地将JavaScript文件的头 "Content-Type "设置为 "application/javascript",这样OTA更新才能正常工作。否则 Updates.checkForUpdateAsync()将以 "Failed to fetch new update "的错误提示失败。 下面是一个firebase.json配置的例子,部署目标名为 "native"。

{
  "hosting": [
    {
      "target": "native",
      "public": "dist",
+      "headers": [
+        {
+          "source": "**/*.js",
+          "headers": [
+            {
+              "key": "Content-Type",
+              "value": "application/javascript"
+            }
+          ]
        }
      ]
    }
  ]
}

将您的应用程序导出到本地

expo export --public-url https://my-app-native.firebaseapp.com/

deploy the app to firebase

firebase deploy --only hosting:native -m "Deploy my app"`。 构建单机应用 为了配置您的独立二进制文件以从您的服务器拉取OTA更新,您需要定义您将托管index.json文件的URL。将托管index.json文件的URL传递给expo构建命令。 对于iOS构建,从你的终端运行以下命令: expo build:ios --public-url <path-to-ios-index.json>,其中public-url选项将是类似expo.github.io/self-hostin… 对于Android构建,从终端运行以下命令: expo build:android --public-url <path-to-android-index.json>,其中public-url选项将是类似expo.github.io/self-hostin…

原文:docs.expo.io/distributio…

转载自:https://juejin.cn/post/6863358656726073358
评论
请登录