部署Heroku，在Heroku上的webpack捆绑包之后停止构建

Question

不知道如何设置我的环境，以便在Heroku上部署我的MERN应用程序。我正在使用EJS和webpack。当我部署应用程序时，它目前停留在webpack构建阶段：

-----> Using buildpack: heroku/nodejs
-----> 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):  12.18.3
engines.npm (package.json):   unspecified (use default)

Resolving node version 12.18.3...
Downloading and installing node 12.18.3...
Using default npm version: 6.14.6

-----> Restoring cache
Cached directories were not restored due to a change in version of node, npm, yarn or stack
Module installation may take longer for this build

-----> Installing dependencies
Installing node modules

> fsevents@1.2.13 install /tmp/build_31a40992/node_modules/nodemon/node_modules/fsevents
> node install.js


Skipping 'fsevents' build as platform linux is not supported

> nodemon@1.19.4 postinstall /tmp/build_31a40992/node_modules/nodemon
> node bin/postinstall || exit 0

Love nodemon? You can now support the project via the open collective:
> https://opencollective.com/nodemon/donate


> bcrypt@5.0.1 install /tmp/build_31a40992/node_modules/bcrypt
> node-pre-gyp install --fallback-to-build

[bcrypt] Success: "/tmp/build_31a40992/node_modules/bcrypt/lib/binding/napi-v3/bcrypt_lib.node" is installed via remote
added 1003 packages in 7.872s

-----> Build
Running build

> project@1.0.0 build /tmp/build_31a40992
> webpack --mode production

Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
asset App.js 592 KiB [compared for emit] [minimized] [big] (name: main) 1 related asset
orphan modules 10.6 KiB [orphan] 3 modules
runtime modules 663 bytes 3 modules
modules by path ./node_modules/ 142 KiB
modules by path ./node_modules/style-loader/dist/runtime/*.js 5.02 KiB 6 modules
modules by path ./node_modules/react/ 6.48 KiB 2 modules
modules by path ./node_modules/react-dom/ 119 KiB 2 modules
modules by path ./node_modules/scheduler/ 4.91 KiB 2 modules
modules by path ./node_modules/css-loader/dist/runtime/*.js 3.85 KiB 2 modules
./node_modules/object-assign/index.js 2.06 KiB [built] [code generated]
modules by path ./src/ 18.3 KiB
./src/App.jsx + 3 modules 17.2 KiB [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./src/styles/PricesComponent.css 1.1 KiB [built] [code generated]

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
App.js (592 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 (583 KiB)
BuyOrders.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/

webpack 5.67.0 compiled with 3 warnings in 33959 ms

asset Edit.js 580 KiB [compared for emit] [minimized] [big] (name: main) 1 related asset
runtime modules 663 bytes 3 modules
orphan modules 1.13 KiB [orphan] 1 module
modules by path ./node_modules/ 142 KiB
modules by path ./node_modules/style-loader/dist/runtime/*.js 5.02 KiB 6 modules
modules by path ./node_modules/react/ 6.48 KiB 2 modules
modules by path ./node_modules/react-dom/ 119 KiB 2 modules
modules by path ./node_modules/scheduler/ 4.91 KiB 2 modules
modules by path ./node_modules/css-loader/dist/runtime/*.js 3.85 KiB 2 modules
./node_modules/object-assign/index.js 2.06 KiB [built] [code generated]
modules by path ./src/ 14.8 KiB
./src/AppDep/Edit.jsx + 1 modules 12.2 KiB [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./src/styles/Edit.css 2.64 KiB [built] [code generated]

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
Edit.js (580 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 (580 KiB)
Edit.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/

webpack 5.67.0 compiled with 3 warnings in 33955 ms

asset MakeBuy.js 572 KiB [compared for emit] [minimized] [big] (name: main) 1 related asset
runtime modules 663 bytes 3 modules
orphan modules 1.13 KiB [orphan] 1 module
modules by path ./node_modules/ 142 KiB
modules by path ./node_modules/style-loader/dist/runtime/*.js 5.02 KiB 6 modules
modules by path ./node_modules/react/ 6.48 KiB 2 modules
modules by path ./node_modules/react-dom/ 119 KiB 2 modules
modules by path ./node_modules/scheduler/ 4.91 KiB 2 modules
modules by path ./node_modules/css-loader/dist/runtime/*.js 3.85 KiB 2 modules
./node_modules/object-assign/index.js 2.06 KiB [built] [code generated]
modules by path ./src/ 9.07 KiB
./src/AppDep/MakeBuy.jsx + 1 modules 8.12 KiB [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./src/styles/Make.css 975 bytes [built] [code generated]

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
MakeBuy.js (572 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 (572 KiB)
MakeBuy.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/

webpack 5.67.0 compiled with 3 warnings in 33960 ms

asset MakeSell.js 572 KiB [compared for emit] [minimized] [big] (name: main) 1 related asset
runtime modules 663 bytes 3 modules
orphan modules 1.13 KiB [orphan] 1 module
modules by path ./node_modules/ 142 KiB
modules by path ./node_modules/style-loader/dist/runtime/*.js 5.02 KiB 6 modules
modules by path ./node_modules/react/ 6.48 KiB 2 modules
modules by path ./node_modules/react-dom/ 119 KiB 2 modules
modules by path ./node_modules/scheduler/ 4.91 KiB 2 modules
modules by path ./node_modules/css-loader/dist/runtime/*.js 3.85 KiB 2 modules
./node_modules/object-assign/index.js 2.06 KiB [built] [code generated]
modules by path ./src/ 9.48 KiB
./src/AppDep/MakeSell.jsx + 1 modules 8.53 KiB [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./src/styles/Make.css 975 bytes [built] [code generated]

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
MakeSell.js (572 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 (572 KiB)
MakeSell.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/

webpack 5.67.0 compiled with 3 warnings in 34225 ms

asset MyOrders.js 665 KiB [compared for emit] [minimized] [big] (name: main) 1 related asset
orphan modules 531 KiB [orphan] 266 modules
runtime modules 663 bytes 3 modules
cacheable modules 212 KiB
modules by path ./node_modules/ 142 KiB 15 modules
modules by path ./src/ 70.3 KiB
./src/AppDep/MyOrders.jsx + 12 modules 59.7 KiB [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./src/styles/MyOrders.css 1.11 KiB [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./src/styles/Order.css 710 bytes [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./src/styles/Matches.css 1.17 KiB [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./src/styles/Edit.css 2.64 KiB [built] [code generated]
+ 2 modules

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
MyOrders.js (665 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 (665 KiB)
MyOrders.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/

webpack 5.67.0 compiled with 3 warnings in 37873 ms

asset Order.js 603 KiB [compared for emit] [minimized] [big] (name: main) 1 related asset
orphan modules 501 KiB [orphan] 259 modules
runtime modules 663 bytes 3 modules
cacheable modules 174 KiB
modules by path ./node_modules/ 142 KiB
modules by path ./node_modules/style-loader/dist/runtime/*.js 5.02 KiB 6 modules
modules by path ./node_modules/react/ 6.48 KiB 2 modules
modules by path ./node_modules/react-dom/ 119 KiB 2 modules
modules by path ./node_modules/css-loader/dist/runtime/*.js 3.85 KiB 2 modules
modules by path ./node_modules/scheduler/ 4.91 KiB 2 modules
+ 1 module
modules by path ./src/ 32.8 KiB
./src/AppDep/Order.jsx + 5 modules 26.8 KiB [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./src/styles/Order.css 710 bytes [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./src/styles/Edit.css 2.64 KiB [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./src/styles/Form.css 2.71 KiB [built] [code generated]

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
Order.js (603 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 (603 KiB)
Order.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/

webpack 5.67.0 compiled with 3 warnings in 37116 ms

asset Prices.js 34.5 KiB [compared for emit] [minimized] (name: main) 1 related asset
modules by path ./node_modules/react/ 6.48 KiB
./node_modules/react/index.js 190 bytes [built] [code generated]
./node_modules/react/cjs/react.production.min.js 6.3 KiB [built] [code generated]
./src/AppDep/Prices.jsx 3.99 KiB [built] [code generated]
./node_modules/object-assign/index.js 2.06 KiB [built] [code generated]
webpack 5.67.0 compiled successfully in 11248 ms

asset PricesComponent.js 69 KiB [compared for emit] [minimized] (name: main) 1 related asset
runtime modules 663 bytes 3 modules
orphan modules 5.14 KiB [orphan] 2 modules
modules by path ./node_modules/ 17.4 KiB
modules by path ./node_modules/style-loader/dist/runtime/*.js 5.02 KiB 6 modules
modules by path ./node_modules/react/ 6.48 KiB
./node_modules/react/index.js 190 bytes [built] [code generated]
./node_modules/react/cjs/react.production.min.js 6.3 KiB [built] [code generated]
modules by path ./node_modules/css-loader/dist/runtime/*.js 3.85 KiB
./node_modules/css-loader/dist/runtime/cssWithMappingToString.js 2.28 KiB [built] [code generated]
./node_modules/css-loader/dist/runtime/api.js 1.57 KiB [built] [code generated]
./node_modules/object-assign/index.js 2.06 KiB [built] [code generated]
modules by path ./src/ 11.7 KiB
./src/AppDep/PricesComponent.jsx + 2 modules 10.6 KiB [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./src/styles/PricesComponent.css 1.1 KiB [built] [code generated]
webpack 5.67.0 compiled successfully in 11402 ms

asset SellOrders.js 583 KiB [compared for emit] [minimized] [big] (name: main) 1 related asset
runtime modules 663 bytes 3 modules
orphan modules 6.42 KiB [orphan] 2 modules
modules by path ./node_modules/ 142 KiB
modules by path ./node_modules/style-loader/dist/runtime/*.js 5.02 KiB 6 modules
modules by path ./node_modules/react/ 6.48 KiB 2 modules
modules by path ./node_modules/react-dom/ 119 KiB 2 modules
modules by path ./node_modules/scheduler/ 4.91 KiB 2 modules
modules by path ./node_modules/css-loader/dist/runtime/*.js 3.85 KiB 2 modules
./node_modules/object-assign/index.js 2.06 KiB [built] [code generated]
modules by path ./src/ 20 KiB
./src/AppDep/SellOrders.jsx + 2 modules 17.4 KiB [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./src/styles/SellOrders.css 2.6 KiB [built] [code generated]

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
SellOrders.js (583 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 (583 KiB)
SellOrders.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/

webpack 5.67.0 compiled with 3 warnings in 33961 ms

asset Navigation.js 75.3 KiB [compared for emit] [minimized] (name: main) 1 related asset
runtime modules 663 bytes 3 modules
orphan modules 1.15 KiB [orphan] 1 module
modules by path ./node_modules/ 17.4 KiB
modules by path ./node_modules/style-loader/dist/runtime/*.js 5.02 KiB 6 modules
modules by path ./node_modules/react/ 6.48 KiB
./node_modules/react/index.js 190 bytes [built] [code generated]
./node_modules/react/cjs/react.production.min.js 6.3 KiB [built] [code generated]
modules by path ./node_modules/css-loader/dist/runtime/*.js 3.85 KiB
./node_modules/css-loader/dist/runtime/cssWithMappingToString.js 2.28 KiB [built] [code generated]
./node_modules/css-loader/dist/runtime/api.js 1.57 KiB [built] [code generated]
./node_modules/object-assign/index.js 2.06 KiB [built] [code generated]
modules by path ./src/ 11 KiB
./src/AppDep/Navigation.jsx + 1 modules 6.73 KiB [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./src/styles/Navigation.css 4.27 KiB [built] [code generated]
webpack 5.67.0 compiled successfully in 11400 ms

asset MatcheRow.js 69.4 KiB [compared for emit] [minimized] (name: main) 1 related asset
runtime modules 663 bytes 3 modules
orphan modules 1.14 KiB [orphan] 1 module
modules by path ./node_modules/ 17.4 KiB
modules by path ./node_modules/style-loader/dist/runtime/*.js 5.02 KiB 6 modules
modules by path ./node_modules/react/ 6.48 KiB
./node_modules/react/index.js 190 bytes [built] [code generated]
./node_modules/react/cjs/react.production.min.js 6.3 KiB [built] [code generated]
modules by path ./node_modules/css-loader/dist/runtime/*.js 3.85 KiB
./node_modules/css-loader/dist/runtime/cssWithMappingToString.js 2.28 KiB [built] [code generated]
./node_modules/css-loader/dist/runtime/api.js 1.57 KiB [built] [code generated]
./node_modules/object-assign/index.js 2.06 KiB [built] [code generated]
modules by path ./src/ 8.09 KiB
./src/AppDep/MatcheRow.jsx + 1 modules 5.82 KiB [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./src/styles/MatcheRow.css 2.27 KiB [built] [code generated]
webpack 5.67.0 compiled successfully in 11399 ms

所以。。。webpack 5.67.0在11399毫秒中成功编译

但是。。。理想情况下，我想运行

npm run server

构建之后。

作为参考，heroku上成功的MERN部署应该是这样的：

-----> Building on the Heroku-20 stack
-----> Determining which buildpack to use for this app
-----> 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):  unspecified
engines.npm (package.json):   unspecified (use default)

Resolving node version 14.x...
Downloading and installing node 14.18.3...
Using default npm version: 6.14.15

-----> Installing dependencies
Installing node modules
added 538 packages in 5.08s

-----> Build
Running build

> deploy-react-webpack@1.0.0 build /tmp/build_8c86a15a
> webpack --mode production

asset main.js 129 KiB [emitted] [minimized] (name: main) 1 related asset
asset ./index.html 278 bytes [emitted]
modules by path ./node_modules/react/ 6.48 KiB
./node_modules/react/index.js 190 bytes [built] [code generated]
./node_modules/react/cjs/react.production.min.js 6.3 KiB [built] [code generated]
modules by path ./node_modules/react-dom/ 119 KiB
./node_modules/react-dom/index.js 1.33 KiB [built] [code generated]
./node_modules/react-dom/cjs/react-dom.production.min.js 118 KiB [built] [code generated]
modules by path ./node_modules/scheduler/ 4.91 KiB
./node_modules/scheduler/index.js 198 bytes [built] [code generated]
./node_modules/scheduler/cjs/scheduler.production.min.js 4.72 KiB [built] [code generated]
./src/index.js 3.64 KiB [built] [code generated]
./node_modules/object-assign/index.js 2.06 KiB [built] [code generated]
webpack 5.67.0 compiled successfully in 3745 ms

-----> Caching build
- node_modules

-----> Pruning devDependencies
removed 473 packages and audited 64 packages in 2.943s

2 packages are looking for funding
run `npm fund` for details

found 0 vulnerabilities


-----> Build succeeded!
-----> Discovering process types
Procfile declares types     -> (none)
Default types for buildpack -> web
-----> Compressing...
Done: 34.2M
-----> Launching...
Released v3
https://morning-sands-39344.herokuapp.com/ deployed to Heroku

有什么想法吗？

这些是我的主要设置文件

webpack.config.js

const path = require('path')
// module.exports = {
//   entry: './public/App.js',
//   output: {
//     filename: 'App.js',
//     path: path.resolve(__dirname, 'dist'),
//   },
//   watch: true,
//   mode: 'development',

// }
var config = {
watch: true,
mode: 'development',
resolve: {
extensions: ['.js', '.jsx']
},
module: {
rules: [
{
test: /.css$/,
use: ['style-loader', 'css-loader']
},
{
test: [/.js$/, /.jsx$/],
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: [
["@babel/preset-env", {
"targets": {
"ie": "11",
"edge": "15",
"safari": "10",
"firefox": "50",
"chrome": "49"
}
}],
"@babel/preset-react"
]
}
}
}
]
},
devtool : 'inline-source-map',
};
var fooConfig = Object.assign({}, config, {
//name: "a",
entry: './src/App.jsx',
output: {
filename: 'App.js',
path: path.resolve(__dirname, 'public/dist'),
},
});
var barConfig = Object.assign({}, config,{
entry: './src/Databases.jsx',
output: {
filename: 'Databases.js',
path: path.resolve(__dirname, 'public/dist'),
},
});
var booConfig = Object.assign({}, config,{
entry: './src/Matches.jsx',
output: {
filename: 'Matches.js',
path: path.resolve(__dirname, 'public/dist'),
},
});
var Config1 = Object.assign({}, config,{
entry: './src/AppDep/BuyOrders.jsx',
output: {
filename: 'BuyOrders.js',
path: path.resolve(__dirname, 'public/dist/AppDep'),
},
});
var Config2 = Object.assign({}, config,{
entry: './src/AppDep/Edit.jsx',
output: {
filename: 'Edit.js',
path: path.resolve(__dirname, 'public/dist/AppDep'),
},
});
var Config3 = Object.assign({}, config,{
entry: './src/AppDep/MakeBuy.jsx',
output: {
filename: 'MakeBuy.js',
path: path.resolve(__dirname, 'public/dist/AppDep'),
},
});
var Config4 = Object.assign({}, config,{
entry: './src/AppDep/MakeSell.jsx',
output: {
filename: 'MakeSell.js',
path: path.resolve(__dirname, 'public/dist/AppDep'),
},
});
var Config5 = Object.assign({}, config,{
entry: './src/AppDep/MyOrders.jsx',
output: {
filename: 'MyOrders.js',
path: path.resolve(__dirname, 'public/dist/AppDep'),
},
});
var Config6 = Object.assign({}, config,{
entry: './src/AppDep/Order.jsx',
output: {
filename: 'Order.js',
path: path.resolve(__dirname, 'public/dist/AppDep'),
},
});
var Config7 = Object.assign({}, config,{
entry: './src/AppDep/Prices.jsx',
output: {
filename: 'Prices.js',
path: path.resolve(__dirname, 'public/dist/AppDep'),
},
});
var Config8 = Object.assign({}, config,{
entry: './src/AppDep/PricesComponent.jsx',
output: {
filename: 'PricesComponent.js',
path: path.resolve(__dirname, 'public/dist/AppDep'),
},
});
var Config9 = Object.assign({}, config,{
entry: './src/AppDep/SellOrders.jsx',
output: {
filename: 'SellOrders.js',
path: path.resolve(__dirname, 'public/dist/AppDep'),
},
});
var Config10 = Object.assign({}, config,{
entry: './src/AppDep/Navigation.jsx',
output: {
filename: 'Navigation.js',
path: path.resolve(__dirname, 'public/dist/AppDep'),
},
});
var Config11 = Object.assign({}, config,{
entry: './src/AppDep/MatcheRow.jsx',
output: {
filename: 'MatcheRow.js',
path: path.resolve(__dirname, 'public/dist/AppDep'),
},
});

// Return Array of Configurations
module.exports = [
fooConfig, barConfig, booConfig, Config1, Config2, Config3, Config4, Config5, Config6, Config7, Config8, Config9, Config10, Config11
];

感谢

Answer 1

Heroku使用Procfiles或start命令启动服务器。在package.json的脚本部分添加一个start命令，该命令指向nodejs服务器。

"script": {
"start": "node pathtoyourserver.js"
}

或者你可以添加一个Procfile

web: node pathtoyourserver.js

或者使用你的npm命令

web: npm run server

https://devcenter.heroku.com/articles/nodejs-support