Можно ли использовать Webpack-Hot-Middleware с NGINX на стороне сервера?

Я работаю над проектом для клиента, и мне нужно использовать функцию замены горячего модуля webpack. Я использую экспресс-приложение (узел) за NGINX. Я использую множество фреймворков javascript для разработки приложения, React оказался одним из них.

Я буду использовать функцию HMR.

У меня есть webpack.config.js вроде этого:

var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var merge = require('webpack-merge');
var validate = require('webpack-validator');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var styleLintPlugin = require('stylelint-webpack-plugin');

//breaking up into smaller modules
//commons module
//first
var start = {        
 context : __dirname ,

 //entry point defination
 entry : { 
    app : ['./require.js','webpack-hot-middleware/client?https:127.0.0.1:8195'], 
    vendor : ['angular','angular-animate','angular-messages','angular-aria','angular-route','angular-material','react','react-dom',''webpack-hot-middleware/client?https:127.0.0.1:8195'']

 },
 //output defination
 output : {
    path : './public/dist',
  publicPath: 'https://127.0.0.1:8195/public/dist/',
    filename : 'app.bundle.js'
 },
 module: { preLoaders: [
      {
        test: /\.(js|jsx)$/,
         exclude: /(node_modules|bower_components)/,
        loaders: ['eslint']
      }    
    ],
    loaders: [
            {test: /\.js$/, loader: 'ng-annotate!babel?presets[]=es2015!jshint', exclude: /node_modules/},
            {
                test: /\.css$/,
                exclude: /(node_modules|bower_components)/,
                loader: ExtractTextPlugin.extract("style-loader", "css")
            },
            {
                test: /\.less$/,
                exclude: /(node_modules|bower_components)/,
                loader: ExtractTextPlugin.extract("style", "css!less")
            },
            {
                test: /\.scss$/,
                exclude: /(node_modules|bower_components)/,
                loader: ExtractTextPlugin.extract("style", "css!sass")
            },
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loaders: ['react-hot', 'babel'],

            },
            {
                test: /\.woff2$/,
                loader: 'url'
            }

        ]
    },
 plugins: [

    new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"vendor.bundle.js"),
    new webpack.DefinePlugin({
     "process.env": {
          NODE_ENV: JSON.stringify("production")
      }
    }),
    new ExtractTextPlugin("styling.css", {allChunks: true}),
    new ExtractTextPlugin("styling.css", {allChunks: true}),
    new ExtractTextPlugin("styling.css", {allChunks: true}),
    //new webpack.optimize.UglifyJsPlugin({
    //compress: {
     //  warnings: false
    // },

 //}),
 //   new webpack.optimize.DedupePlugin(),
  //  new webpack.optimize.OccurrenceOrderPlugin(), 
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  //target: 'web'
};

var config;

// Detect how npm is run and branch based on that
//choose modules
//all modules
switch(process.env.npm_lifecycle_event) {
  case 'build':
    config = merge(start);
    break;
  default:
    config = merge(start);
}

//export config
module.exports = validate(config); 

Мой файл app.js включает:

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
//webpack development server integration 
app.use(require("webpack-dev-middleware")(compiler, {
    noInfo: false, stats: { colors: true,
            chunks: true, 
            'errors-only': true }, headers: { "X-Custom-Header": "yes" },  publicPath: webpackConfig.output.publicPath

}));
app.use(require("webpack-hot-middleware")(compiler, {
   log: console.log
}));

Мой файл NGINX включает

location / {
...
proxy_pass  https://127.0.0.1:8195; 
...
...
} 

Когда я открываю https://127.0.0.1:8195. Затем файлы создаются и обслуживаются. Express прослушивает порт 8195. Но когда я открываю https://domain-name.com, файлы не обслуживаются, а NGINX не т показать ошибку 502.


person Sumit Lahiri    schedule 12.09.2016    source источник
comment
Похоже, это проблема конфигурации/DNS NGINX, поскольку вы можете получить доступ к своим файлам по адресу 127.0.0.1, но не по доменному имени.   -  person detay    schedule 23.06.2017
comment
Почему вы используете веб-пакет на сервере? Webpack предназначен для разработки.   -  person Francisco Mateo    schedule 22.10.2017
comment
Может быть, что-то не так с вашим конфигурационным файлом nginx, как вы установили домен?   -  person 亚里士朱德    schedule 17.01.2018
comment
Хочу выделить комментарий Франсиско Матео, зачем вам это нужно на сервере на nginx?   -  person George    schedule 10.03.2018
comment
@FranciscoMateo и Джордж, некоторые люди занимаются разработкой на удаленных машинах с помощью nginx. nginx — это просто сервер, это не значит, что его нужно использовать для производства. Express — это тоже сервер, но люди обычно используют его для разработки.   -  person VCavallo    schedule 14.06.2018
comment
@VCavallo Да, я знаю об этом, но обычно это делается с помощью чего-то вроде Citrix для удаленного доступа к рабочему столу. nginx — это веб-сервер, а webpack — это бандлер. Нет абсолютно никаких причин использовать веб-пакет на сервере nginx, будь то dev или prod.   -  person Francisco Mateo    schedule 14.06.2018
comment
@FranciscoMateo Я снова не согласен. Я использую безголовый сервер Ubuntu. Я подключаюсь к нему по ssh для терминального доступа и редактирования текста, а затем просматриваю обслуживаемые файлы в своем локальном браузере. У этого подхода есть бесчисленное множество преимуществ, которые я не буду перечислять. Я использую webpack на «сервере», потому что это часть моего процесса разработки. Я использую nginx, поэтому я могу открывать файлы извне. нет причин, по которым эти две вещи должны бороться друг с другом.   -  person VCavallo    schedule 16.06.2018
comment
Я согласен с вами, @VCavallo, что в некоторых конкретных случаях может быть полезно смешивать nginx и webpack. Но было бы полезно знать, связан ли вопрос здесь с одним из этих вариантов использования или использование веб-пакета здесь действительно не имеет смысла...   -  person Ricovitch    schedule 10.08.2018
comment
Честно говоря, я только что попробовал это по какой-то причине. Моя обычная установка для вещей отличается, и я никогда не использую этот подход. Оглядываясь назад, я не могу вспомнить, зачем я тогда это делал. В любом случае. спасибо за комментарии. Думаю, тогда я пытался сделать что-то очень странное с NGINX и HMR. Теперь это кажется забавным :)). Я очень ценю и согласен с комментариями.   -  person Sumit Lahiri    schedule 08.10.2020


Ответы (2)


Я сам пошел по тому же пути и в итоге понял это для своей установки. Я как бы беспорядочно задокументировал это здесь: https://vcavallo.github.io/how_to/webpack/vps/front_end/2018/06/27/remote-dev-machine-webpack-dev-server-nginx.html#the-solution

Вот прямая ссылка на суть моих заметок и различных файлов конфигурации: https://gist.github.com/vcavallo/4f11985c4364bc4edfdf56556bff4ccf

person VCavallo    schedule 11.08.2018

Это точно. Есть несколько конфигураций, необходимых для размещения веб-сокетов, которые использует HMR.

Вот пример конфигурации, которую вы можете использовать.

нгинкс:

  location /my-path {
    proxy_set_header Host $http_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_http_version 1.1;
    proxy_set_header Connection $http_connection;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Sec-WebSocket-Extensions $http_sec_websocket_extensions;
    proxy_set_header Sec-WebSocket-Key $http_sec_websocket_key;
    proxy_set_header Sec-WebSocket-Version $http_sec_websocket_version;
    proxy_cache_bypass $http_upgrade;
    proxy_read_timeout 900;
    client_max_body_size 0;
    proxy_buffering off;
    add_header X-Accel-Buffering no;
    proxy_pass http://my-internal-server;
  }

веб-пакет.config.js:

const webpack = require('webpack')

module.exports = {
  mode: mode,
  entry: {
    main: [
      `webpack-hot-middleware/client?path=__webpack__/__webpack_hmr&timeout=20000`,
      'app/main.js')
    ]
  },
  devServer: {
    hot: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
}
person wizulus    schedule 14.11.2019