Ошибка при загрузке изображений на сервере 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 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?

UPDATE

console.log(process.env.NODE_ENV); дает в моем местном и сервере undefined.

Answer 1

Вы разработали приложение в ОС Windows и хотите развернуть его на Ubuntu OS. У меня тоже была такая же проблема при импорте файлов из Windows в Linux.

1. Развертывание приложения на экземпляре Windows Server, потому что вы будете использовать браузер в ОС Windows. Когда вы импортируете файл, он получит путь к файлу так же, как файловая система экземпляра Windows Server. Таким образом, фактический файл может храниться в экземпляре. Путь к файлу здесь имеет значение.
2. Если вы хотите развернуть приложение на ОС AWS Ubuntu, вместо просмотра файлов через ОС Windows вы можете хранить файлы в Ubuntu. Причина в том, что путь к файлу изменяется при просмотре ОС Windows.

Я решил установить приложение в Экземпляр Windows.