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

Question

我在 Windows 中开发了我的应用程序并托管在 AWS Ubuntu 中。该应用程序是使用 Node 和 React 以及 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 未捕获错误:在 webpackMissingModule (Header.js:5) 处找不到模块“../../../images/icons/user.png”

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 实例文件系统相同的文件路径。所以实际的文件可以存储在实例中。文件路径在这里很重要。
2. 如果您想在 AWS Ubuntu 操作系统上部署应用程序，您可以将文件存储在 Ubuntu 中，而不是通过 Windows 操作系统浏览文件。背后的原因是，当您浏览 Windows 操作系统时，文件路径会发生变化。

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