如何将 react-native-web 应用程序部署到 heroku 中？答案

【问题标题】：How to deploy react-native-web app into heroku?如何将 react-native-web 应用程序部署到 heroku 中？
【发布时间】：2018-08-04 15:07:51
【问题描述】：

我正在尝试在我的大学项目中使用 react-native-web。

我已经按照步骤here 成功创建了 react-native-web 应用程序的开发版本。我想将我的应用程序部署到 Heroku，在搜索了很多问题后，我仍然无法在 Heroku 上运行我的应用程序。它总是在启动后 60 秒后崩溃。

2018-02-24T19:19:44.376383+00:00 heroku[web.1]: Starting process with command `./node_modules/.bin/webpack-dev-server --inline --port 28330`
2018-02-24T19:19:49.667640+00:00 app[web.1]: Project is running at [1m[34mhttp://localhost:28330/[39m[22m
2018-02-24T19:19:49.668544+00:00 app[web.1]: webpack output is served from [1m[34m/[39m[22m
2018-02-24T19:20:02.082843+00:00 app[web.1]: Hash: [1m070ba25084e72482b7f3[39m[22m
2018-02-24T19:20:02.082868+00:00 app[web.1]: Version: webpack [1m3.11.0[39m[22m
2018-02-24T19:20:02.082871+00:00 app[web.1]: Time: [1m11923[39m[22mms
2018-02-24T19:20:02.082873+00:00 app[web.1]:     [1mAsset[39m[22m     [1mSize[39m[22m  [1mChunks[39m[22m  [1m[39m[22m           [1m[39m[22m       [1mChunk Names[39m[22m
2018-02-24T19:20:02.082874+00:00 app[web.1]: [1m[33mbundle.js[39m[22m  [1m[33m2.35 MB[39m[22m       [1m0[39m[22m  [1m[32m[emitted][39m[22m  [1m[33m[big][39m[22m  main
2018-02-24T19:20:02.082877+00:00 app[web.1]:    [2] [1m./node_modules/react/index.js[39m[22m 190 bytes {[1m[33m0[39m[22m}[1m[32m [built][39m[22m
2018-02-24T19:20:02.082878+00:00 app[web.1]:   [65] [1m./node_modules/react-native-web/dist/index.js[39m[22m 12.9 kB {[1m[33m0[39m[22m}[1m[32m [built][39m[22m
2018-02-24T19:20:02.082880+00:00 app[web.1]:  [122] [1mmulti (webpack)-dev-server/client?http://localhost:28330 ./index.web.js[39m[22m 40 bytes {[1m[33m0[39m[22m}[1m[32m [built][39m[22m
2018-02-24T19:20:02.082882+00:00 app[web.1]:  [123] [1m(webpack)-dev-server/client?http://localhost:28330[39m[22m 7.91 kB {[1m[33m0[39m[22m}[1m[32m [built][39m[22m
2018-02-24T19:20:02.082884+00:00 app[web.1]:  [124] [1m./node_modules/url/url.js[39m[22m 23.3 kB {[1m[33m0[39m[22m}[1m[32m [built][39m[22m
2018-02-24T19:20:02.082885+00:00 app[web.1]:  [131] [1m./node_modules/strip-ansi/index.js[39m[22m 161 bytes {[1m[33m0[39m[22m}[1m[32m [built][39m[22m
2018-02-24T19:20:02.082887+00:00 app[web.1]:  [133] [1m./node_modules/loglevel/lib/loglevel.js[39m[22m 7.86 kB {[1m[33m0[39m[22m}[1m[32m [built][39m[22m
2018-02-24T19:20:02.082889+00:00 app[web.1]:  [134] [1m(webpack)-dev-server/client/socket.js[39m[22m 1.08 kB {[1m[33m0[39m[22m}[1m[32m [built][39m[22m
2018-02-24T19:20:02.082890+00:00 app[web.1]:  [136] [1m(webpack)-dev-server/client/overlay.js[39m[22m 3.67 kB {[1m[33m0[39m[22m}[1m[32m [built][39m[22m
2018-02-24T19:20:02.082892+00:00 app[web.1]:  [141] [1m(webpack)/hot nonrecursive ^\.\/log$[39m[22m 170 bytes {[1m[33m0[39m[22m}[1m[32m [built][39m[22m
2018-02-24T19:20:02.082893+00:00 app[web.1]:  [143] [1m(webpack)/hot/emitter.js[39m[22m 77 bytes {[1m[33m0[39m[22m}[1m[32m [built][39m[22m
2018-02-24T19:20:02.082895+00:00 app[web.1]:  [145] [1m./index.web.js[39m[22m 380 bytes {[1m[33m0[39m[22m}[1m[32m [built][39m[22m
2018-02-24T19:20:02.082897+00:00 app[web.1]:  [243] [1m./node_modules/react-native-web/dist/exports/Vibration/index.js[39m[22m 796 bytes {[1m[33m0[39m[22m}[1m[32m [built][39m[22m
2018-02-24T19:20:02.082899+00:00 app[web.1]:  [283] [1m./node_modules/react-native-web/dist/exports/VirtualizedList/index.js[39m[22m 327 bytes {[1m[33m0[39m[22m}[1m[32m [built][39m[22m
2018-02-24T19:20:02.082901+00:00 app[web.1]:  [285] [1m./App.js[39m[22m 2.53 kB {[1m[33m0[39m[22m}[1m[32m [built][39m[22m
2018-02-24T19:20:02.082903+00:00 app[web.1]:     + 271 hidden modules
2018-02-24T19:20:02.082911+00:00 app[web.1]: webpack: Compiled successfully.
2018-02-24T19:20:21.276101+00:00 heroku[web.1]: Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch
2018-02-24T19:20:21.276101+00:00 heroku[web.1]: Stopping process with SIGKILL
2018-02-24T19:20:21.364850+00:00 heroku[web.1]: Process exited with status 137
2018-02-24T19:20:44.673361+00:00 heroku[web.1]: Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch
2018-02-24T19:20:44.673652+00:00 heroku[web.1]: Stopping process with SIGKILL
2018-02-24T19:20:44.812657+00:00 heroku[web.1]: Process exited with status 137
2018-02-24T19:20:44.892098+00:00 heroku[web.1]: State changed from starting to crashed

有没有人可以告诉我将我的 react-native-web 部署到 Heroku 的步骤？

谢谢。

【问题讨论】：

你查了吗this question?
我做了，但我不知道代码放在哪里以及如何运行代码
您可能需要创建一个带有 express 框架或类似框架的 server.js 文件，并以此为您的应用程序提供服务，并将端口设置为正确的值。我不知道怎么用，因为我从未使用过它，但 this 和 this 的帖子可能会带你到某个地方
对于 reactjs 有一个用于 heroku github.com/mars/create-react-app-buildpack 的 buildpack，不确定是否存在 react native。

标签： heroku react-native webpack webpack-dev-server react-native-web

【解决方案1】：

您正在尝试在生产环境中运行 webpack-dev-server，不建议这样做。

您需要：

在 npm/yarn 中设置生产 webpack 构建脚本，以便构建浏览器端代码（通常输出到“build”或“dist”目录）。 Heroku (see here) 上应该有说明，因此它知道在服务器签出您的主分支后要运行哪个脚本来在服务器上构建它。
设置通过“启动”脚本加载的最小服务器脚本。为此尝试 ExpressJs。请注意，Heroku 创建了一个 PORT 环境变量 (process.env.PORT)，其中包含分配给 HTTP 服务器的 HTTP 端口（将其传递给 express.listen）。 Heroku have a minimal Express server example to look at。

【讨论】：