2017-01-10 43 views
0

我在Windows中开发了我的应用程序并在AWS Ubuntu中托管。该应用程序使用Node和React与Webpack开发。在服务器中加载映像时出错AWS

的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

回答

1

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

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

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

+0

感谢Kumaresh,但我想部署在Ubuntu本身。任何其他的工作? –

+0

在代码中,您将获得完整路径的图像并将路径存储为字符串。您将字符串映像路径传递到linux路径(如/ etc/images /(string_imagepath)),那么您将使用linux路径存储到s3存储区。这可能有用! –