React-BoilerPlate部署到heroku成功，但应用程序出错

Question

我克隆了React-BoilerPlate并编辑为test创建web，我尝试部署到heroku日志中它是成功的，但当我打开浏览器时它显示“应用程序错误”(在我的mac中没有问题它工作)

dashboard.heroku.com中的日志

-----> Node.js app detected
-----> Creating runtime environment

       NPM_CONFIG_LOGLEVEL=error
       NODE_VERBOSE=false
       NODE_ENV=production
       NODE_MODULES_CACHE=true
-----> Installing binaries
       engines.node (package.json):  >=5
       engines.npm (package.json):   >=3

       Resolving node version >=5...
       Downloading and installing node 10.4.1...
       Bootstrapping npm >=3 (replacing 6.1.0)...
       npm 6.1.0 installed
-----> Restoring cache
       Loading 2 from cacheDirectories (default):
       - node_modules
       - bower_components (not cached - skipping)
-----> Building dependencies
       Installing node modules (package.json + package-lock)

       > myapp@1.0.0 preinstall /tmp/build_4cc58fca63d336e918330c92a7320a18
       > npm run npmcheckversion


       > myapp@1.0.0 npmcheckversion /tmp/build_4cc58fca63d336e918330c92a7320a18
       > node ./internals/scripts/npmcheckversion.js


       > myapp@1.0.0 postinstall /tmp/build_4cc58fca63d336e918330c92a7320a18
       > npm run build:dll


       > myapp@1.0.0 build:dll /tmp/build_4cc58fca63d336e918330c92a7320a18
       > node ./internals/scripts/dependencies.js

       audited 25883 packages in 17.902s
       found 46 vulnerabilities (8 low, 38 moderate)
       run `npm audit fix` to fix them, or `npm audit` for details
       Running heroku-postbuild

       > myapp@1.0.0 heroku-postbuild /tmp/build_4cc58fca63d336e918330c92a7320a18
       > npm install && npm run build


       > myapp@1.0.0 preinstall /tmp/build_4cc58fca63d336e918330c92a7320a18
       > npm run npmcheckversion


       > myapp@1.0.0 npmcheckversion /tmp/build_4cc58fca63d336e918330c92a7320a18
       > node ./internals/scripts/npmcheckversion.js


       > myapp@1.0.0 postinstall /tmp/build_4cc58fca63d336e918330c92a7320a18
       > npm run build:dll


       > myapp@1.0.0 build:dll /tmp/build_4cc58fca63d336e918330c92a7320a18
       > node ./internals/scripts/dependencies.js

       audited 25883 packages in 16.989s
       found 46 vulnerabilities (8 low, 38 moderate)
       run `npm audit fix` to fix them, or `npm audit` for details

       > myapp@1.0.0 prebuild /tmp/build_4cc58fca63d336e918330c92a7320a18
       > npm run build:clean


       > myapp@1.0.0 build:clean /tmp/build_4cc58fca63d336e918330c92a7320a18
       > rimraf ./build


       > myapp@1.0.0 build /tmp/build_4cc58fca63d336e918330c92a7320a18
       > cross-env NODE_ENV=production webpack --config internals/webpack/webpack.prod.babel.js --color -p --progress --hide-modules --display-optimization-bailout

       Hash: d1b0ba3fc6910d2a897a
       Version: webpack 3.5.5
       Time: 45827ms
       Asset       Size  Chunks                    Chunk Names
       68b0c4fcb84d239f261c1a5e65818142.gif    4.13 kB          [emitted]
       bc47c23f4a28a80f48dbafb4ae48d853.svg  602 bytes          [emitted]
       b812ddd6e7e7c9bd9fc5ba89d1a87ecd.svg  693 bytes          [emitted]
       68d2042ac5fdae4387e8f3b98e80d755.png    19.3 kB          [emitted]
       0ae4b3198c60ae8e849a17c2b9e36362.png    1.99 kB          [emitted]
       0c41c45073224f7bf4dfdbf7b703c05c.png    2.34 kB          [emitted]
       ec6994795fdd10b1a14a82dd076e7c31.otf    40.1 kB          [emitted]
       ce0b1f00d0b40ef65010ac4ec7e4f6a3.otf    39.8 kB          [emitted]
       .htaccess.bin    1.79 kB          [emitted]
       favicon.ico     370 kB          [emitted]
       icon-120x120.png    11.2 kB          [emitted]
       icon-128x128.png    11.2 kB          [emitted]
       icon-144x144.png    12.7 kB          [emitted]
       icon-152x152.png    13.9 kB          [emitted]
       icon-167x167.png    16.5 kB          [emitted]
       icon-180x180.png    14.4 kB          [emitted]
       icon-192x192.png    17.9 kB          [emitted]
       icon-384x384.png      42 kB          [emitted]
       icon-512x512.png    16.7 kB          [emitted]
       icon-72x72.png    5.89 kB          [emitted]
       icon-96x96.png    8.11 kB          [emitted]
       manifest.json  975 bytes          [emitted]
       9a4cbc132ce42296701bb3cc91fc8bd3.svg  930 bytes          [emitted]
       ced611daf7709cc778da928fec876475.eot    2.05 kB          [emitted]
       f97e3bbf73254b0112091d0192f17aec.svg    2.15 kB          [emitted]
       d41f55a78e6f49a5512878df1737e58a.ttf    1.89 kB          [emitted]
       b7c9e1e479de3b53f1e4e30ebac2403a.woff    1.38 kB          [emitted]
       0.0f8f8d839c3c67ea9a03.chunk.js     343 kB       0  [emitted]  [big]
       1.d9aef47ea860a023a399.chunk.js     331 kB       1  [emitted]  [big]
       2.02140dd8fb729e8ec62d.chunk.js     338 kB       2  [emitted]  [big]
       3.59f24490e8d9db438d4a.chunk.js     162 kB       3  [emitted]
       4.dedc780d9ee602a24732.chunk.js    81.5 kB       4  [emitted]
       5.14ce9b3d76aef2ba3592.chunk.js    40.6 kB       5  [emitted]
       6.0c6db533aceba6385e37.chunk.js    45.3 kB       6  [emitted]
       7.98b59f40657a56912eaf.chunk.js      46 kB       7  [emitted]
       8.3a4ea6143fc6f0ca179e.chunk.js    26.1 kB       8  [emitted]
       9.13d365030651a79eb21d.chunk.js    17.5 kB       9  [emitted]
       10.1e3ab2bf211e3c6c6232.chunk.js    41.1 kB      10  [emitted]
       11.260090743f2cac2a0f93.chunk.js    24.1 kB      11  [emitted]
       12.7bcdf07c7edc3ce0a11d.chunk.js    24.4 kB      12  [emitted]
       13.c4e98897ef480410016d.chunk.js  716 bytes      13  [emitted]
       main.898cbfbcec44f3cfa4c2.js    1.25 MB      14  [emitted]         main
       index.html    1.06 kB          [emitted]
       sw.js    20.6 kB          [emitted]

       WARNING in ./node_modules/moment/src/lib/locale/locales.js
       Module not found: Error: Can't resolve './locale' in '/tmp/build_4cc58fca63d336e918330c92a7320a18/node_modules/moment/src/lib/locale'
       @ ./node_modules/moment/src/lib/locale/locales.js 56:12-46
       @ ./node_modules/moment/src/lib/locale/locale.js
       @ ./node_modules/moment/src/moment.js
       @ ./app/components/home/cover/calendar/index.js
       @ ./app/components/home/cover/index.js
       @ ./app/components/home/index.js
       @ ./app/containers/HomePage/index.js
       @ ./app/containers/HomePage/Loadable.js
       @ ./app/containers/App/index.js
       @ ./app/app.js
       @ multi ./app/app.js
       Child html-webpack-plugin for "index.html":
       1 asset
       Child __offline_serviceworker:
       1 asset
-----> Caching build
       Clearing previous node cache
       Saving 2 cacheDirectories (default):
       - node_modules
       - bower_components (nothing to cache)
-----> Pruning devDependencies

       > pre-commit@1.2.2 uninstall node_modules/pre-commit
       > node uninstall.js

       removed 1620 packages and audited 1114 packages in 19.282s
       found 0 vulnerabilities

-----> Build succeeded!
-----> Discovering process types
       Procfile declares types     -> (none)
       Default types for buildpack -> web
-----> Compressing...
       Done: 38.8M
-----> Launching...
       Released v12
       https://myapp-pr-4.herokuapp.com/ deployed to Heroku

代码为heroku logs --tail --app myapp的日志

2018-06-19T08:33:45.641928+00:00 heroku[web.1]: Idling
2018-06-19T08:33:45.641928+00:00 heroku[web.1]: State changed from up to down
2018-06-19T08:33:46.752542+00:00 heroku[web.1]: Stopping all processes with SIGTERM
2018-06-19T08:33:46.917240+00:00 heroku[web.1]: Process exited with status 143

(我有日志2018-06-19T08:01:33.875099+00:00 appweb.1，但只定义了'___‘，但从未使用过)

在浏览器中，我的应用程序显示为这样(链接中的照片)

enter image description here

感谢您的帮助如果您需要更多细节，请告诉我，我将展示给您

Answer 1

我也遇到了同样的问题，遵循react-boilerplate的说明让它为我工作。这是链接：https://github.com/react-boilerplate/react-boilerplate/blob/master/docs/general/deployment.md

上面写的：

Heroku简单的5步部署过程步骤1:创建一个Process文件，下面这行代码：web: npm run start:prod.我们这样做是因为Heroku默认运行npm run start，所以我们需要这个设置来覆盖默认的run命令。

步骤2:通过运行以下命令为您的Heroku应用程序安装Node.js构建包：heroku buildpacks:set https://github.com/heroku/heroku-buildpack-nodejs#v91 -a [your app name].请确保将#v91替换为任何最新的构建包，您可以在此处找到。https://github.com/heroku/heroku-buildpack-nodejs/releases。

步骤3:将以下行添加到脚本区域中的package.json文件："heroku-postbuild": "npm run build",。这是为了让Heroku可以在部署时构建您的生产资产(您可以在这里了解更多)。然后，调整package.json文件中的预编译脚本，使其看起来像这样："prebuild": "npm run build:clean",，以避免Heroku尝试运行Jest测试(此构建包不支持)。

步骤4:运行heroku config:set NPM_CONFIG_PRODUCTION=false，以便Heroku可以编译包含在devDependencies中的NPM模块(因为构建过程需要许多这样的包)。

步骤5:遵循标准的Heroku部署流程：

git add . git commit -m 'Made some epic changes as per usual' git push heroku master