我正在尝试在heroku上使用Webpack 4部署我的简单reactjs 16.8.6。
我已经尝试过为组件包括延迟加载，并且已经在stackoverflow上看到并尝试了许多解决方案，但是没有一个解决我的问题。我不知道查看我的heroku日志文件的问题所在。它只是警告和节点模块错误，我第一次使用heroku，所以我需要为heroku做些什么或添加什么，我正确地遵循了所有部署步骤，它显示已成功部署，但在尝试执行时仍然显示“应用程序错误”在heroku上打开网站。
内置日志文件：
-----> Node.js app detected
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NODE_ENV=production
NODE_MODULES_CACHE=true
NODE_VERBOSE=false
-----> Installing binaries
engines.node (package.json): 10.1.0
engines.npm (package.json): 6.9.0
Resolving node version 10.1.0...
Downloading and installing node 10.1.0...
Bootstrapping npm 6.9.0 (replacing 5.6.0)...
npm 6.9.0 installed
-----> Restoring cache
- node_modules
-----> Installing dependencies
Installing node modules (package.json + package-lock)
audited 50112 packages in 16.01s
found 63 low severity vulnerabilities
run `npm audit fix` to fix them, or `npm audit` for details
-----> Build
Running build
> example@0.1.0 build /tmp/build_dc8013021bc209e1bac89229b0579201
> webpack --mode production
Hash: e7d503a89b51cddf1705
Version: webpack 4.29.6
Time: 13409ms
Built at: 2019-03-31 11:25:04
Asset Size Chunks Chunk Names
./index.html 1.72 KiB [emitted]
062ea122b3e9a6a664abcb921271c9ad.png 323 KiB [emitted] [big]
3d7380a833cd5572414470a8c719cdbf.png 312 KiB [emitted]
favicon.ico 3.78 KiB [emitted]
js/bundle.js 596 KiB 0 [emitted] [big] main
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
40fc28864e80faa971922ff123ffc1e0.png (473 KiB)
062ea122b3e9a6a664abcb921271c9ad.png (323 KiB)
WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
main (596 KiB)
js/bundle.js
WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
Child html-webpack-plugin for "index.html":
1 asset
Entrypoint undefined = ./index.html
[0] ./node_modules/html-webpack-plugin/lib/loader.js!./public/index.html 1.85 KiB {0} [built]
[2] (webpack)/buildin/global.js 878 bytes {0} [built]
[3] (webpack)/buildin/module.js 552 bytes {0} [built]
+ 1 hidden module
-----> Caching build
- node_modules
-----> Pruning devDependencies
removed 168 packages and audited 41359 packages in 15.133s
found 63 low severity vulnerabilities
run `npm audit fix` to fix them, or `npm audit` for details
-----> Build succeeded!
-----> Change to Node.js build process
Heroku has begun executing the "build" script defined in package.json
during Node.js builds.
Read more: https://devcenter.heroku.com/changelog-items/1573
-----> Discovering process types
Procfile declares types -> (none)
Default types for buildpack -> web
-----> Compressing...
Done: 54.3M
-----> Launching...
Released v4
https://example.com/ deployed to Heroku
日志：
2019-03-31T13:53:01.000000+00:00 app[api]: Build succeeded
2019-03-31T13:53:01.574617+00:00 heroku[web.1]: Starting process with command `npm start`
2019-03-31T13:53:04.331946+00:00 heroku[web.1]: State changed from starting to crashed
2019-03-31T13:53:04.338921+00:00 heroku[web.1]: State changed from crashed to starting
2019-03-31T13:53:04.141111+00:00 app[web.1]:
2019-03-31T13:53:04.141195+00:00 app[web.1]: > example@0.1.0 start /app
2019-03-31T13:53:04.141202+00:00 app[web.1]: > webpack-dev-server --open --mode production
2019-03-31T13:53:04.141203+00:00 app[web.1]:
2019-03-31T13:53:04.148500+00:00 app[web.1]: sh: 1: webpack-dev-server: not found
2019-03-31T13:53:04.155568+00:00 app[web.1]: npm ERR! file sh
2019-03-31T13:53:04.155913+00:00 app[web.1]: npm ERR! code ELIFECYCLE
2019-03-31T13:53:04.156178+00:00 app[web.1]: npm ERR! errno ENOENT
2019-03-31T13:53:04.156434+00:00 app[web.1]: npm ERR! syscall spawn
2019-03-31T13:53:04.158166+00:00 app[web.1]: npm ERR! exampleb@0.1.0 start: `webpack-dev-server --open --mode production`
2019-03-31T13:53:04.158331+00:00 app[web.1]: npm ERR! spawn ENOENT
2019-03-31T13:53:04.158620+00:00 app[web.1]: npm ERR!
2019-03-31T13:53:04.158829+00:00 app[web.1]: npm ERR! Failed at the example@0.1.0 start script.
2019-03-31T13:53:04.159067+00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
2019-03-31T13:53:04.167285+00:00 app[web.1]:
2019-03-31T13:53:04.167520+00:00 app[web.1]: npm ERR! A complete log of this run can be found in:
2019-03-31T13:53:04.167653+00:00 app[web.1]: npm ERR! /app/.npm/_logs/2019-03-31T13_53_04_160Z-debug.log
2019-03-31T13:53:04.314503+00:00 heroku[web.1]: Process exited with status 1
2019-03-31T13:53:11.798582+00:00 heroku[web.1]: Starting process with command `npm start`
2019-03-31T13:53:13.967668+00:00 heroku[web.1]: State changed from starting to crashed
2019-03-31T13:53:13.843741+00:00 app[web.1]:
2019-03-31T13:53:13.843761+00:00 app[web.1]: > example@0.1.0 start /app
2019-03-31T13:53:13.843763+00:00 app[web.1]: > webpack-dev-server --open --mode production
2019-03-31T13:53:13.843765+00:00 app[web.1]:
2019-03-31T13:53:13.860315+00:00 app[web.1]: sh: 1: webpack-dev-server: not found
2019-03-31T13:53:13.865559+00:00 app[web.1]: npm ERR! file sh
2019-03-31T13:53:13.865825+00:00 app[web.1]: npm ERR! code ELIFECYCLE
2019-03-31T13:53:13.866210+00:00 app[web.1]: npm ERR! errno ENOENT
2019-03-31T13:53:13.866520+00:00 app[web.1]: npm ERR! syscall spawn
2019-03-31T13:53:13.869744+00:00 app[web.1]: npm ERR! example@0.1.0 start: `webpack-dev-server --open --mode production`
2019-03-31T13:53:13.869747+00:00 app[web.1]: npm ERR! spawn ENOENT
2019-03-31T13:53:13.869749+00:00 app[web.1]: npm ERR!
2019-03-31T13:53:13.869750+00:00 app[web.1]: npm ERR! Failed at the example@0.1.0 start script.
2019-03-31T13:53:13.869753+00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
2019-03-31T13:53:13.877763+00:00 app[web.1]:
2019-03-31T13:53:13.877900+00:00 app[web.1]: npm ERR! A complete log of this run can be found in:
2019-03-31T13:53:13.877990+00:00 app[web.1]: npm ERR! /app/.npm/_logs/2019-03-31T13_53_13_870Z-debug.log
2019-03-31T13:53:13.931427+00:00 heroku[web.1]: Process exited with status 1
2019-03-31T13:53:18.414100+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=example.herokuapp.com request_id=a5dcb4cd-7369-4420-81c9-f146ca727c9a fwd="103.21.238.150" dyno= connect= service= status=503 bytes= protocol=https
2019-03-31T13:53:19.463720+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=example.herokuapp.com request_id=31aeca36-43ac-4b5a-9092-a1e24fbf17cb fwd="103.21.238.150" dyno= connect= service= status=503 bytes= protocol=https
package.json
{
"name": "biz-web",
"version": "0.1.0",
"private": true,
"engines": {
"node": "10.1.0",
"npm": "6.9.0"
},
"dependencies": {
"babel-core": "^6.26.3",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^2.1.1",
"file-loader": "^3.0.1",
"font-awesome": "^4.7.0",
"particles.js": "^2.0.0",
"react": "^16.8.6",
"react-css-modules": "^4.7.9",
"react-dom": "^16.8.6",
"react-mobile-store-button": "0.0.4",
"react-particles-js": "^2.5.1",
"react-responsive": "^6.1.1",
"react-scripts": "2.1.8",
"style-loader": "^0.23.1",
"url-loader": "^1.1.2"
},
"scripts": {
"heroku-prebuild": "npm install --dev",
"start": "webpack-dev-server --open --mode development",
"build": "webpack --mode development",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"@babel/core": "^7.4.0",
"@babel/preset-env": "^7.4.2",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.5",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.2.1"
}
}
webpack.config.js：
const path = require('path');
const HWP = require('html-webpack-plugin');
var BUILD_DIR = path.resolve(__dirname, 'public');
var APP_DIR = path.resolve(__dirname, 'src');
module.exports = {
entry: APP_DIR + '/index.js',
output: {
path: BUILD_DIR,
filename: 'js/bundle.js'
},
module:{
rules:[{
test: /\.js$/,
exclude: ['/node_modules/'],
loader: 'babel-loader',
query: { compact:false,presets: ["@babel/preset-env", "@babel/preset-react"],
plugins:["@babel/plugin-syntax-dynamic-import"]}
},
{
test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
loader: 'url-loader?limit=100000'
},
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: true,
localIdentName: '[name]__[local]__[hash:base64:5]'
}
}
]
},
]
},
plugins: [
new HWP({
template: path.join(__dirname + '/public/index.html'),
filename: "./index.html",
favicon: './public/favicon.ico'
})
]
}
我使用create-react-app创建了我的react应用，并且我还尝试使用npm start删除并重新安装节点模块。
答案 0 :(得分：2)
直接的问题是Heroku没有安装devDependencies，并且您在devDependencies脚本中使用的是start之一：
"start": "webpack-dev-server --open --mode development"
但是webpack-dev-server 应该在devDependencies中。您不应该在生产中使用它。相反，您的start脚本应该类似于
"start": "node server.js"
（尽管具体细节取决于您的应用程序）。尝试相应地更新package.json，进行提交，然后再次推送到Heroku。