在nginx上运行反应应用程序 - 铬错误

我正在将反应应用程序从webpack-dev-server转换为nginx。在nginx上运行反应应用程序 - 铬错误

我正在用webpack构建源代码包并将其输出到nginx的wwwroot文件夹。这工作。

当我使用chrome访问app localhost：8080 /的根目录时，它在加载完初始html之后停止加载。当我看到nginx日志时，我看到：

my-nginx-container | 2017/05/12 20:52:42 [error] 6#6: *4 "/wwwroot/react-draggable.js.map/index.html" is not found (2: No such file or directory), client: 172.20.0.1, server: , request: "GET /react-draggable.js.map// HTTP/1.1", host: "localhost:8080" 
my-nginx-container | 172.20.0.1 - - [12/May/2017:20:52:42 +0000] "GET /react-draggable.js.map// HTTP/1.1" 404 169 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:53.0) Gecko/20100101 Firefox/53.0" "-" 
my-nginx-container | 172.20.0.1 - - [12/May/2017:20:52:43 +0000] "GET /react-image-lightbox.js.map// HTTP/1.1" 404 169 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:53.0) Gecko/20100101 Firefox/53.0" "-" 
my-nginx-container | 2017/05/12 20:52:43 [error] 6#6: *4 "/wwwroot/react-image-lightbox.js.map/index.html" is not found (2: No such file or directory), client: 172.20.0.1, server: , request: "GET /react-image-lightbox.js.map// HTTP/1.1", host: "localhost:8080"

如果我在firefox中执行同样的操作，它会正常加载。

有关于此的一个很长的thread，并试图将它整理了几个小时后，我放弃了！

有人在这里有一些智慧。

我的WebPack配置：

var webpack = require('webpack'); 
var path = require('path'); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var ExtractTextPlugin = require("extract-text-webpack-plugin"); 

var BUILD_DIR = '/wwwroot' //path.resolve(__dirname, 'src/client/public'); 
var APP_DIR = path.resolve(__dirname, 'src/client/app'); 

var config = { 
    resolve: { 
    extensions: ['.js', '.jsx', '.scss'], 
    alias: { 
     jquery: "jquery/src/jquery" 
    } 
    }, 
    entry: { 
    main: APP_DIR + '/index.jsx', 
    }, 
    output: { 
    publicPath: './', 
    path: BUILD_DIR, 
    filename: '[name].js', 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx?/, 
     include: APP_DIR, 
     loader: 'babel-loader', 
     query: { 
      presets: ['react', 'es2015', 'stage-0', 'stage-1'], 
      plugins: [ 
      'react-html-attrs', 
      'transform-class-properties', 
      'transform-decorators-legacy', 
      ], 
     }, 
     }, 
     { test: /.(woff|woff2|eot|ttf)$/, loader: 'url-loader?prefix=font/&limit=5000', }, 
     { test: /\.(scss|css)$/, loader: ExtractTextPlugin.extract('css-loader!sass-loader'), }, 
    ], 
    }, 
    devtool: 'eval-source-map', 
    plugins: [ 
    new webpack.ProvidePlugin({ 
     'Promise': 'es6-promise', 
     'fetch': 'imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch' 
    }), 
    new ExtractTextPlugin("[name].css"), 
    new webpack.ProvidePlugin({ 
     $: "jquery", 
     jQuery: "jquery" 
    }), 
    new HtmlWebpackPlugin({ 
     title: 'PhotoTank', 
     template: 'src/client/app/html-template.ejs', 
     filename: '/wwwroot/index.html' 
    }) 
    ], 

    devServer: { 
    contentBase: path.resolve(__dirname, 'src/client'), 
    proxy: { 
     "/api": { 
      target: "http://192.168.2.189:3000", 
      pathRewrite: {"^/api" : ""} 
     } 
    }, 
    historyApiFallback: true 
    }, 

}; 

module.exports = config;

来源

2017-05-12 martin

变化'devtool： 'EVAL-源map''到'devtool：' ＃直列源map'' –

@jonathandion你是怎么去做！！！你先生，是忍者。 – martin

很高兴我帮了忙！呃，我应该发布，然后接受anwser？ –

在配置的WebPack变化：

devtool: 'eval-source-map'

到

devtool: '#inline-source-map'

来源

2017-05-13 15:23:24

正如@jonathandion

在配置的WebPack修改建议：

devtool: 'eval-source-map'

到

devtool: '#inline-source-map'

来源

2017-05-13 10:01:46 martin

在nginx上运行反应应用程序 - 铬错误

回答

相关问题