使用Nginx和Docker的Webpack开发服务器:在错误的地址上轮询信息 [英] Webpack devserver with Nginx and Docker: polling info on the wrong address

问题描述

我在 Docker 中有2个容器:

• Node.js + Nginx 侦听端口80(通过 docker-compose 文件)

• Node.js + Webpack devserver which listen on port 3000
• Nginx which listen on port 80 (mapped on host port 8080 through docker-compose file)

Nginx正确地代理了对节点容器的请求，我可以通过 http://localhost:8080 访问节点应用，但由于某些原因，还有其他类型为 http://localhost:3000的轮询请求/sockjs-node/info?t = 1570780621084 失败(net :: ERR_CONNECTION_REFUSED)，因为在主机上仅可见端口8080上的Nginx.我认为这些轮询请求应定向到Nginx( http://localhost:8080/sockjs-node/info?t = 1570780621084 )，但我不知道我必须在Webpack devserver配置上进行哪些更改以解决此问题.

Nginx correctly proxy requests to the node container and I can access the node app at 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) but I don't know what I have to change on the Webpack devserver configuration to fix that.

这是Web pack devserver的配置:

This is the web pack devserver configuration:

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的配置:

This is the Nginx configuration:

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无效.

What I've tried so far was to add the following in the entry of the devserver config, but id didn't work.

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

如何使Webpack devserver在Docker中与Nginx一起正常工作?

How can I make Webpack devserver working correctly with Nginx in Docker?

推荐答案

假设 dev-server 在端口3000上运行，而nginx在端口8080上运行，这对我有用(请参阅网络开发服务器公共选项):

Assuming dev-server is running on port 3000 and nginx on port 8080, this is what has worked for me (see web-devserver public option):

Nginx default.conf

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,
    },
// [...]

这篇关于使用Nginx和Docker的Webpack开发服务器:在错误的地址上轮询信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！