在服务器 AWS 中加载图像时出错

Question

我在 Windows 中开发了我的应用程序并托管在 AWS Ubuntu 中。该应用程序是使用 Node 和 React with Webpack 开发的。

Webpack 配置：

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');
var combineLoaders = require('webpack-combine-loaders');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  context: path.join(__dirname, "public"),
  devtool: debug ? "inline-sourcemap" : null,
  entry: "./src/app/client.js",
  module: {
    loaders: [
        {
            test: /\.jsx?$/,
            exclude: /(node_modules|bower_components)/,
            loader: 'babel-loader',
            query: {
              presets: ['react', 'es2015', 'stage-0'],
              plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
            }
        },
        {
          test: /\.css$/,
          loader: combineLoaders([
            {
              loader: 'style-loader'
            }, {
              loader: 'css-loader',
              query: {
                modules: true,
                localIdentName: '[name]__[local]___[hash:base64:5]'
              }
            }
          ])
        },
        {
            test: /\.scss$/,
            loaders: ["style-loader", "css-loader", "sass-loader"]
        },
        {
            test: /\.(jpe?g|png|gif|svg)$/i,
            loaders: [
                'file?hash=sha512&digest=hex&name=[hash].[ext]',
                'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
            ]
        }
    ]
  },
  sassLoader: {
    includePaths: [path.resolve(__dirname, "/public/src/styles/")]
  },
  output: {
    path: __dirname + "/public/src/",
    filename: "client.min.js"
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
};

该应用程序在我的本地运行良好，但在服务器中却不行。我在控制台中收到错误：

Header.js:5 Uncaught Error: Cannot find module "../../../images/icons/user.png" at webpackMissingModule (Header.js:5)

还有cmd中的错误：

ERROR in ./public/src/images/icons/user.png
Module build failed: Error: spawn     /home/ubuntu/dashboard/node_modules/pngquant-bin/vendor/pngquant ENOENT
at exports._errnoException (util.js:1022:11)
at Process.ChildProcess._handle.onexit (internal/child_process.js:193:32)
at onErrorNT (internal/child_process.js:359:16)
at _combinedTickCallback (internal/process/next_tick.js:74:11)
at process._tickCallback (internal/process/next_tick.js:98:9)
@ ./public/src/app/components/Dashboard/Media/Media.js 76:14-60

在我的node_modules\pngquant-bin\vendor 文件夹中有一个pngquant.exe 文件，这是创建任何问题还是webpack 中指定的目录路径？

更新

console.log(process.env.NODE_ENV); 在我的本地和服务器中提供undefined。

Answer 1

您在 Windows 操作系统中开发应用程序并希望在 Ubuntu 操作系统上进行部署。在将文件从 Windows 导入 Linux 时，我也遇到了同样的问题。

1. 您在 Windows Server 实例上部署应用程序，因为您将在 Windows 操作系统中使用浏览器。当您导入文件时，它将获得与 Windows Server Instance 文件系统相同的文件路径。所以实际文件可以存储在一个实例中。文件路径在这里很重要。
2. 如果您想在 AWS Ubuntu 操作系统上部署应用程序，而不是通过 Windows 操作系统浏览文件，您可以将文件存储在 Ubuntu 中。背后的原因是，当您浏览 Windows 操作系统时，文件路径会发生变化。

我解决了在 Windows 实例中部署应用程序的问题。