Webpack "npm run build" 在 Google Cloud 上不起作用,但在本地机器上工作



我一直在使用Google Cloud App Engine,直到最近,一切都运行良好。

我有一个 React 应用程序,我使用 webpack 将其捆绑在一起。每当我在本地机器上运行生产 webpack 文件时,它都可以正常工作,但是每当我在 Google Cloud App Engine 上运行它时,它都会卡在这里 clean-webpack-plugin:/home/luis/projectname/dist 已被删除。

它以前工作正常,唯一改变的是我添加了一个自定义域,并通过让我们加密 ssl。目前有两个实例通过GAE运行以前版本的站点(我需要更新它(

我尝试创建一个新项目,并从头开始重复该过程,问题仍然存在。

编辑:

  • 这是包.json { "name": "roto-hive", "version": "0.5.0", "engines": { "node": "8.11.3" }, "description": "RotoHive Web Application", "main": "index.js", "directories": { "test": "test" }, "dependencies": { "body-parser": "^1.18.3", "dotenv": "^6.0.0", "express": "^4.16.3", "fantasydata-node-client": "^1.1.0", "firebase": "^5.0.4", "firebase-admin": "^5.12.1", "fs-extra": "^6.0.1", "mini-css-extract-plugin": "^0.4.1", "mobx": "^5.0.2", "mobx-react": "^5.2.3", "moment": "^2.22.2", "optimize-css-assets-webpack-plugin": "^4.0.3", "react": "^16.4.1", "react-beautiful-dnd": "^7.1.3", "react-circular-progressbar": "^0.8.0", "react-cookie-consent": "^1.7.0", "react-dom": "^16.4.1", "react-firebaseui": "^3.0.4", "react-fontawesome": "^1.6.1", "react-image": "^1.3.1", "react-js-pagination": "^3.0.2", "react-recaptcha": "^2.3.8", "react-responsive-modal": "^3.0.3", "react-router-dom": "^4.3.1", "react-select": "^1.2.1", "react-spinkit": "^3.0.0", "react-toastify": "^4.1.0", "rimraf": "^2.6.2", "solc": "^0.4.24", "truffle-hdwallet-provider": "0.0.5", "uglifyjs-webpack-plugin": "^1.2.7", "web3": "^1.0.0-beta.35" }, "devDependencies": { "assert": "^1.4.1", "babel-cli": "^6.26.0", "babel-eslint": "^8.2.3", "babel-loader": "^7.1.4", "babel-minify-webpack-plugin": "^0.3.1", "babel-plugin-transform-class-properties": "^6.24.1", "babel-plugin-transform-decorators": "^6.24.1", "babel-plugin-transform-decorators-legacy": "^1.3.5", "babel-plugin-transform-object-rest-spread": "^6.26.0", "babel-preset-env": "^1.7.0", "babel-preset-react": "^6.24.1", "chai": "^4.1.2", "clean-webpack-plugin": "^0.1.19", "compression-webpack-plugin": "^1.1.11", "css-loader": "^0.28.11", "enzyme": "^3.3.0", "eslint": "^4.19.1", "eslint-config-standard": "^11.0.0", "eslint-loader": "^2.0.0", "eslint-plugin-import": "^2.12.0", "eslint-plugin-node": "^6.0.1", "eslint-plugin-promise": "^3.8.0", "eslint-plugin-react": "^7.9.1", "eslint-plugin-standard": "^3.1.0", "file-loader": "^1.1.11", "ganache-cli": "^6.1.3", "html-webpack-plugin": "^3.2.0", "jshint": "^2.9.6", "lodash": "^4.17.10", "mocha": "^5.2.0", "nodemon": "^1.17.5", "prettier-eslint": "^8.8.1", "purecss": "^1.0.0", "react-particles-js": "^2.2.0", "react-test-renderer": "^16.4.1", "style-loader": "^0.21.0", "webpack": "^4.14.0", "webpack-bundle-analyzer": "^2.13.1", "webpack-cli": "^3.0.8", "webpack-node-externals": "^1.7.2" }, "scripts": { "build": "webpack --config webpack.prod.js", "start": "node ./dist/server.js", "clean": "rm -rf dist node_modules build", "watch": "webpack --watch --config webpack.dev.js", "test": "mocha", "start:dev": "npm run build && nodemon ./dist/server.js" }, "repository": { "type": "git", "url": "git+https://LDLugo@bitbucket.org/LDLugo/rotohive.git" }, "author": "", "license": "ISC", "homepage": "https://bitbucket.org/LDLugo/rotohive#readme" }

  • 这是webpack.prod.js

'

const path = require('path')
const nodeExternals = require('webpack-node-externals')
const HtmlWebPackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const modeObj = 'production'
const moduleObj = {
rules: [
{
test: /.(js|jsx)$/,
exclude: /node_modules/,
use: 'babel-loader'
},
{
test: /.js$/,
exclude: /node_modules/,
use: ['babel-loader', 'eslint-loader']
},
{
test: /.css$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' }
]
},
{
test: /.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
},
{
test: /.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader'
]
}
]
}
const client = {
entry: {
'client': './src/client/index.js'
},
mode: modeObj,
target: 'web',
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist/public')
},
devtool: 'source-map',
module: moduleObj,
plugins: [
new HtmlWebPackPlugin({
template: 'public/index.html',
favicon: 'public/favicon.ico'
}),
new CleanWebpackPlugin(['dist']),
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css'
})
],
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: true
}),
new OptimizeCSSAssetsPlugin({})
]
}
}
const server = {
entry: {
'server': './src/server/index.js'
},
mode: modeObj,
target: 'node',
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
optimization: {
splitChunks: {
chunks: 'all'
}
},
module: moduleObj,
externals: [nodeExternals()]
}
module.exports = [client, server]

编辑: 所以我将代码捆绑到一个 dist 文件夹中,并尝试手动部署它。盖伊吐出这个错误:npm 错误!代码生命周期(以及其他东西,但那个让我印象深刻(

所有其他

虽然我无法解决这个问题(我设法暂时解决了它,但它总是回来(。我确实找到了解决方法。

所以我所做的是在本地机器上下载谷歌SDK,然后将其连接到我的谷歌云帐户(我创建项目的帐户(。然后从我的本地计算机部署它。

因此,我能够使用npm run build进行构建,然后使用gcloud app deploy来部署捆绑的代码。

最新更新