URL-адрес опроса клиента Webpack devserver не соответствует настройке Webpack devServer.publi c

Question

Basi c тестовый сервер в режиме реального времени: https://socket.syntapse.co.uk/wds1/. Ничего не делает, кроме загрузки некоторых пакетов и console.log для проверки загрузки клиента веб-пакета и функции обновления в реальном времени.

Проблема: я пытаюсь настроить сервер dev веб-пакета для перезагрузки в реальном времени через обратный прокси-сервер nginx. Хотя я установил правильные значения в webpack.config. js файл клиента html не использует правильный URL-адрес "devServer.publi c" при опросе и пропускает путь. Я не изменил «devServer.sockPath», который по умолчанию равен «sock js -node», и «devServer.inline», который по умолчанию равен true. Исходя из моей конфигурации, я ожидаю, что правильный URL-адрес для сокета сервера wds будет:

https://socket.syntapse.co.uk/wds1/sockjs-node/info?t=1578494631898

, который на самом деле возвращает действительные json данные, как ожидалось, например,

{
"websocket": true,
"origins": [
"*:*"
],
"cookie_needed": false,
"entropy": 690102182
}

но страница клиента неоднократно пытается опрашивать:

https://socket.syntapse.co.uk/sockjs-node/info?t=1578494631898

, поскольку он пропускает раздел / wds1 / пути, который я определяю для "devServer.publi c "в webpack.config. js (полная конфигурация приведена ниже).

Краткое описание проблемы: клиент не использует полный путь" devServer.publi c ", определенный в webpack.config. js файл в качестве root для своего сокетного соединения.

Конфигурация:

nginx .conf

server {
    listen 80;
    server_name socket.syntapse.co.uk;
    # webpack socket
    location ^~ /wds1/sockjs-node/ {
        proxy_pass http://0.0.0.0:3803/sockjs-node/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
    location ^~ /wds1/ {
        proxy_pass http://0.0.0.0:3803/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

webpack.conf. js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    devtool: 'inline-source-map',
    entry: {
        index: './src/index.js',
        app: './src/app.js',
        print: './src/print.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    devServer: {
        contentBase: './dist',
        host: '0.0.0.0',
        port: 3802,
        public: 'https://socket.syntapse.co.uk/wds1/',
        disableHostCheck: true,
        overlay: {
            warnings: true,
            errors: true
        }        
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Development',
        }),
    ],
};

пакет. json

{
  "name": "webpack-simple-example",
  "version": "1.0.0",
  "description": "simplest webpack-dev-server configuration",
  "main": "index.js",
  "scripts": {
    "build": "webpack --mode=development",
    "dev": "webpack-dev-server --progress"
  },
  ...,
  },
  "devDependencies": {
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.10.1"
  }
}

спасибо

Answer 1

Простое исправление: необходимо включить sockHost (только без sockPort) и установить правильный клиентский URL.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    devtool: 'inline-source-map',
    entry: {
        index: './src/index.js',
        app: './src/app.js',
        print: './src/print.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    devServer: {
        contentBase: './dist',
        host: '0.0.0.0',
        port: 3802,
        sockHost: 'socket.syntapse.co.uk/wds1',
        public: 'socket.syntapse.co.uk/wds1/',
        disableHostCheck: true,
        overlay: {
            warnings: true,
            errors: true
        }        
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Development',
        }),
    ],
};