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

Question

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

Answer 1

这可以使用react-native-web来实现(sources)。要在 Heroku 上进行设置，您需要做几件事:

• 在 Heroku 应用仪表板的设置选项卡中将构建包设置为 heroku/nodejs,
• 在 package.json 中设置 build 脚本以从 RN 源构建您的 Web 版本，例如，如果您使用的是 expo:expo build:web ，
• 在根目录中创建一个Procfile来为网络提供服务版本:例如，如果您使用expo，则构建目录为web-build，因此命令应为npxserve 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-community/static 来阻止任何 Heroku 路由在 heroku/nodejs 旁边。第二个构建包是通过 /static.json 文件 ( default values ) 配置的:

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

为客户端路由配置 webpack

您可能已经设置了此部分，否则即使在本地也会出现 404 错误。为了允许客户端路由，我们似乎还需要配置 webpack(output.publicPath 和 devServer.historyApiFallback)，with expo这可以通过运行 expocustomize:web 然后编辑 /webpack.config.js 来完成:

const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function (env, argv) {
    const config = await createExpoWebpackConfigAsync(env, argv);
    config.output.publicPath = '/';
    config.devServer = {
        ...config.devServer,
        historyApiFallback: true,
    };
    return config;
};

这里有一篇关于您可能遇到的这些路由问题的好文章:Fixing the 'cannot GET /URL'