Webpack“npm run build”在谷歌云上不起作用，但在本地机器上工作答案

【问题标题】：Webpack "npm run build" doesn't work on Google Cloud, but works in local machineWebpack“npm run build”在谷歌云上不起作用，但在本地机器上工作
【发布时间】：2019-01-17 06:10:33
【问题描述】：

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

我有一个使用 webpack 捆绑在一起的 React 应用程序。每当我在本地机器上运行生产 webpack 文件时，它都可以正常工作，但每当我在 Google Cloud App Engine 上运行它时，它就会卡在这里clean-webpack-plugin: /home/luis/projectname/dist has been removed.

它之前工作得很好，唯一改变的是我添加了一个自定义域，并通过让我们加密的 ssl。目前有两个通过GAE运行旧版本站点的实例（我需要更新它）

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

编辑：

这是 package.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 文件夹中并尝试手动部署它。 GAE 吐出这个错误：npm ERR！代码 ELIFECYCLE（以及其他东西，但那个对我来说很突出）

所有其他

【问题讨论】：

你能分享你的 package.json 和其他配置文件吗？
我已经添加了，如果您还需要其他内容，请告诉我
我在heroku中运行了同样的命令，它也说'进程退出'
能否请您提供完整的错误输出并尝试将详细程度设置为调试进行部署。

标签： node.js reactjs google-app-engine webpack

【解决方案1】：

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

所以我所做的就是在我的本地计算机上下载 google sdk，然后将其连接到我的 google 云帐户（我在其中创建项目的那个）。然后从我的本地机器部署它。

所以我能够使用npm run build 构建，然后使用gcloud app deploy 部署捆绑代码。

【讨论】：