是否可以将 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来服务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

如果您使用客户端路由（例如反应导航），您将必须设置更多内容以确保链接有效。仅使用之前的构建，客户端路由将会失败（404 错误），因为 heroku 会尝试自行路由请求，但您的应用程序需要所有内容都以

index.html

结束，以便它可以自行执行路由任务（客户端路由）。

因此，我们将通过在

heroku/nodejs 旁边添加第二个构建包 heroku-community/static 来防止任何 Heroku 路由

。第二个构建包通过 

/static.json

 文件进行配置（

默认值）：

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

为客户端路由配置 webpack

您可能已经设置了此部分，否则即使在本地也会出现 404 错误。为了允许客户端路由，我们似乎还需要配置 webpack（

output.publicPath

 和 

devServer.historyApiFallback

），

with expo 这可以通过运行 expo customize: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;
};

这里有一篇关于您可能遇到的路由问题的好文章：

修复“无法获取/URL”

Answer 2

将 React Native/expo 应用程序部署到 heroku 的步骤：

1. 将 heroku buildpack 设置为静态：>

   heroku buildpacks:set heroku-community/static

2. 为静态构建类型添加

   static.json

   ：

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

   更多设置：

   https://github.com/heroku/heroku-buildpack-static#configuration

3. npm run build

    (package.json: 

   "build": "expo build:web"

   ) --> 创建 web-build 文件夹

   git add .
   git commit
   git push heroku master
   heroku open