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

Posted 2021-03-29

我正在尝试在我的大学项目中使用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的步骤？

谢谢。

答案

您正在尝试在生产环境中运行webpack-dev-server，这是不推荐的。

你需要：

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