带有 Nginx 和 Docker 的 Webpack devserver：在错误地址上轮询信息

Question

我在 Docker 中有 2 个容器：

Node.js + Webpack devserver 侦听端口 3000
Nginx which listen on port 80 (mapped on host port 8080 through docker-compose 文件)

Nginx 正确地将请求代理到节点容器，我可以在 http://localhost:8080, but for some reasons there are other polling requests of the type http://localhost:3000/sockjs-node/info?t=1570780621084 that fail (net::ERR_CONNECTION_REFUSED) because on the host only Nginx on port 8080 is visible. I think that these polling requests should be directed to Nginx (http://localhost:8080/sockjs-node/info?t=1570780621084) 访问节点应用程序，但我不知道我必须在 Webpack devserver 配置上更改什么才能解决这个问题。

这是 web pack devserver 配置：

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const {
    BUILD_DIR,        
} = require("./config/config");

module.exports = {
    entry: {
        bundle: [
            "@babel/polyfill", 
            "./src/app.js",
        ]
    },

    output: {
        path: BUILD_DIR,
        filename: "[name].[hash].js"
    },

    devtool: "inline-source-map",

    devServer: {
        host: "localhost",
        port: 3000,        
        contentBase: BUILD_DIR,
        historyApiFallback: false,
        hot: true,
        inline: true,
        watchOptions: {
            poll: true
        },
        disableHostCheck: true,
    },

    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"],
            },
            {
                test: /\.scss$/,
                use: ["style-loader", "css-loader", "sass-loader"]
            }
        ],
    },

    plugins: [
        new CleanWebpackPlugin(),

        new HtmlWebpackPlugin({
            template: "src/index.html",
            filename: "index.html",
            inject: true
        }),
    ]
};

这是 Nginx 配置：

upstream reactclient {
    server react-client:3000 fail_timeout=20s max_fails=10;
}

server {
    listen 80;

    location / {
        proxy_pass http://reactclient;
    }   

    location /sockjs-node/ {
        proxy_set_header X-Real-IP  $remote_addr;
        proxy_set_header X-Forwarded-For $remote_addr;
        proxy_set_header Host $host;

        proxy_pass http://reactclient;
        proxy_redirect off;

        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";  
    }
}

到目前为止我尝试的是在 devserver 配置的条目中添加以下内容，但 id 不起作用。

entry: {
        bundle: [
            `webpack-dev-server/client?http://localhost:8080`,
            "webpack/hot/dev-server",
            "@babel/polyfill", 
            "./src/app.js",
        ]
    },

如何让 Webpack devserver 在 Docker 中与 Nginx 一起正常工作？

Answer 1

假设 dev-server 在端口 3000 上是运行，nginx 在端口 8080 上，这对我有用（参见 web-devserver public option）：

Nginx default.conf

upstream reactclient {
    server react_client:3000 fail_timeout=20s max_fails=100;
}

server {
    listen 80;

    location / {
        proxy_pass http://reactclient;
    }       

    location /sockjs-node/ {
        proxy_set_header X-Real-IP  $remote_addr;
        proxy_set_header X-Forwarded-For $remote_addr;
        proxy_set_header Host $host;

        proxy_pass http://reactclient;
        proxy_redirect off;

        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";  
    }
}

Webpack

// [...]
devServer: {
        host: '0.0.0.0',
        port: 3000,
        public: `localhost:8080`,
        historyApiFallback: false,
        hot: true,
        inline: true,
        watchOptions: {
            aggregateTimeout: 300,
            poll: 1000,
            ignored: /node_modules/,
        },
        disableHostCheck: true,
    },
// [...]

Answer 2

我遇到了与

类似的请求的类似问题

http://localhost:3000/sockjs-node/info?t=1570780621084

同样的错误

(net::ERR_CONNECTION_REFUSED)

我在前端有一个 React 应用程序，在后端有一个 nodejs 应用程序。每个都在一个单独的 docker 容器中。我使用 webpack-dev-server 来运行反应应用程序，它使用 sockjs 库生成此 sockjs-node 请求用于其开发目的。

为了让它正常工作，我在 devServer 部分编写了下一个选项

host: '0.0.0.0', // you can change this ip with your ip
port: 4001, // ssl defult port number
public: 'https://localhost:9001',
publicPath: '/',

我的 docker-compose 中有用于反应应用程序的端口（一个用于 HTTP，第二个用于 HTTPS）

ports:
  - 9000:4000
  - 9001:4001

因此 'public' 选项设置为使用主机上可访问的端口 9001。当我想在浏览器 https://localhost:9001 中加载我的应用程序时，我会使用它。此外，此 URL 用于由应用程序加载 main.js 脚本。

但是 'port' 选项我已经设置为 4001。sockjs 库使用这个端口来生成我们遇到问题的请求。

因此请确保您已经在 docker 容器中打开了一个 SSL 端口，其中包含使用 webpack-dev-server 的应用程序。并且您在 webpack 配置文件的 devServer 部分为 'public' 和 'port' 选项设置了正确的值。

带有 Nginx 和 Docker 的 Webpack devserver：在错误地址上轮询信息

Webpack devserver with Nginx and Docker: polling info on the wrong address

javascript

nginx

docker

webpack

webpack-dev-server