Question

是否想知道是否有可能将React Native应用程序部署到Heroku？我问的原因是因为我可以检索网址并将其放在iframe中以模仿iPhone，然后用户可以试用该应用，而无需通过iTunes将其安装到iPhone上。

Answer 1

这可以使用 react-native-web (sources)。要在 heroku 上进行设置，您需要做几件事：

在您的 heroku 应用仪表板的设置选项卡中将 buildpack 设置为 heroku/nodejs,
在 package.json 中设置 build 脚本以从 RN 源构建您的网络版本，例如，如果您使用的是 expo：expo build:web，
在根目录下创建一个Procfile来服务web 版本：例如，如果您使用 expo，则构建目录为 web-build，因此命令应为 npx serve web-build，

此外，如果您使用 expo，请确保添加 expo-cli 作为开发依赖项：npm install -D expo-cli。

然后，您只需按照通常的方式推送到 heroku。默认情况下，heroku 将运行 yarn build（或 npm run build，具体取决于您是使用其中一种还是另一种来生成锁定文件）。

最后，package.json 文件可能如下所示（再次使用 expo）：

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "test": "jest --watchAll",
    "build": "expo build:web"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@expo/vector-icons": "^12.0.0",
    "@react-native-community/masked-view": "0.1.10",
    "@react-navigation/bottom-tabs": "^5.11.1",
    "@react-navigation/native": "^5.8.9",
    "@react-navigation/stack": "^5.12.6",
    "expo": "~40.0.0",
    "expo-asset": "~8.2.1",
    "expo-constants": "~9.3.0",
    "expo-font": "~8.4.0",
    "expo-linking": "~2.0.0",
    "expo-splash-screen": "~0.8.0",
    "expo-status-bar": "~1.0.3",
    "expo-web-browser": "~8.6.0",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
    "react-native-gesture-handler": "~1.8.0",
    "react-native-safe-area-context": "3.1.9",
    "react-native-screens": "~2.15.0",
    "react-native-web": "~0.13.12"
  },
  "devDependencies": {
    "expo-cli": "^4.0.16",
    "@babel/core": "~7.9.0",
    "@types/react": "~16.9.35",
    "@types/react-native": "~0.63.2",
    "jest-expo": "~40.0.0",
    "typescript": "~4.0.0"
  },
  "private": true
}

而 Procfile 仅由一行组成：

web: npx serve web-build

使用 reactxp 代替 reac-native-web 可能会获得类似的结果，但我自己从未尝试过。

客户端路由

为客户端路由配置 Heroku

如果您使用客户端路由（例如 React 导航），则必须设置更多内容以确保链接有效。仅使用先前的构建，客户端路由将失败（404 错误），因为 heroku 会尝试自行路由请求，但您的应用需要一切都以 index.html 结束，以便它可以自行执行路由任务（客户端路由）。

因此，我们将通过在 heroku/nodejs 旁边添加第二个 buildpack heroku-community/static 来阻止任何 Heroku 路由。第二个 buildpack 是通过 /static.json 文件 (default values) 配置的：

{
  "root": "web-build/",
  "clean_urls": false,
  "routes": {
    "/**": "index.html"
  }
}

为客户端路由配置 webpack

您可能已经设置了这部分，否则即使在本地也会出现 404 错误。为了允许客户端路由，我们似乎还需要配置 webpack（output.publicPath 和 devServer.historyApiFallback），with expo 这可以通过运行 expo customize:web 然后编辑 {{1 }} 与：

/webpack.config.js

这里有一篇关于这些路由问题的好文章：Fixing the 'cannot GET /URL'

Answer 2

不，这不可能。 React Native应用程序是一个真正的移动应用程序，你不能将它作为一个网站运行它。

如果您需要可以作为网络应用程序轻松访问的移动应用程序 - 请查看Ionic

（所有其他选项只能使用第三方服务，其中大多数不是免费或/并且有很多限制）

是否可以将React Native应用程序部署到Heroku？

2 个答案:

客户端路由

为客户端路由配置 Heroku

为客户端路由配置 webpack