多个Vue.js站点/NGINX反向代理/热重装不工作

Question

我目前正在开发多个Vue。js SPA是本地的，在尝试使用NGINX反向代理为这些应用提供服务时遇到了各种问题。具体来说，我遇到了许多与websockets或sockjs节点相关的错误，这会破坏vue应用程序的热重新加载功能。（404未找到）的。

这些SPA中的每一个都运行在它们自己的ode.js服务器上，这些服务器在它们的服务器根目录上发送静态文件。应该通过NGINX反向代理访问它们：

http://localhost:6200/ -> http://localhost/my-app1/
http://localhost:6205/ -> http://localhost/my-app2/
http://localhost:6210/ -> http://localhost/my-app3/

对于开发，我使用npm run service运行所有vue.js应用程序，然后通过NGINX代理访问这些网站：http://localhost/my-appX/。网站加载没有任何功能问题，但热重载不工作。

在浏览器中查看开发人员控制台后，有许多GET请求，例如：http://localhost/sockjs-node/info?t=1605955915882。这个URL显然是错误的，因为我们目前正在通过代理访问该站点-我本来希望看到http://localhost/my-appX/sockjs-node/info?t=1605955915882。以下是我在尝试使用各种设备之前的当前配置：

我的NGINX配置：

upstream nodefrontend_myapp1 {
    server localhost:6200;
}
upstream nodefrontend_myapp2 {
    server localhost:6205;
}
upstream nodefrontend_myapp3 {
    server localhost:6210;
}

# Redirect HTTP to HTTPS
server {
    listen 80 default_server;
    listen [::]:80 default_server;
    server_name _;
    
    # 307 temporary redirect
    return 307 https://$host$request_uri; 
}

# HTTPS Proxy
server {
    listen 443 ssl http2;
    server_name localhost;
  
    # Proxy "my-app" URI traffic to correct server
    location /my-app1/ {
        proxy_buffering off;
        proxy_set_header Host $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;

        # For websockets
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";

        # Proxy to my-app's root
        proxy_pass http://nodefrontend_myapp1/;
    }

    # Note: several other sites are running via the below routes
    location /my-app2/ {
      proxy_pass http://nodefrontend_myapp2/;
      # ...
    }

    location /my-app3/ {
      proxy_pass http://nodefrontend_myapp3/;
      # ...
    }
}

vue。配置。js配置：

module.exports = {
    // options...

    // I want the site to be accessible *RELATIVE* to the current URL.
    // This will make vue.js resources have no leading slash, eg: <link> href="css/file123.css" </link>
    // And should allow me to fetch resources on the current VHOST: eg: http://localhost/my-app/css/file123.css
    publicPath: "",
    
    devServer: {
        //disableHostCheck: true,
        https: false,
        public: "0.0.0.0",
        host: "localhost" ,
        port: 6200,
        sockPath: "", /////////// This has been causing me issues

    },

}

所以在看了webpack文档后，我似乎应该更新每个应用程序vue.config.js中的ockPath，所以我这样做了：

sockPath: "/my-appX/sockjs-node",

这停止了sockjs节点的404 GET错误，但随后出现了关于websocket的不同错误，这些websocket现在无法在以下位置找到其资源：ws://localhost/my-appX/sockjs-node/147/0dj5ee1p/websocket。

为了检查问题是Web服务器还是NGINX，我运行了wscat-csws://localhost:6200/my-appX/sockjs-node/147/0dj5ee1p/websocket，这确实有效。这表明NGINX以某种方式杀死了websocket。为了再次检查，我通过NGINX:wscat-csws://localhost/my-appX/sockjs-node/147/0dj5ee1p/websocket测试了websocket，但它不起作用。

在玩了几个小时的配置和NGINX之后，我在网上发现了一篇文章，上面说我应该更改我的NGINX proxy_pass URL以删除尾部的斜杠。我把它改成：

proxy_pass http://nodefrontend_myappX/;

为此：

proxy_pass http://nodefrontend_myappX;

并通过wscat-csws://localhost/my-appX/sockjs-node/147/0dj5ee1p/websocket重新测试了websocket，测试成功了！。然而删除前导斜杠后，现在网站不会加载。我的怀疑是vue。配置。js publicPath，但我不知所措。

是否有人能够运行多个Vue。NGINX反向代理背后的js站点（作为vhost），并且热重新加载功能是否正常工作？？？

======我确实找到了解决方案，但我不喜欢：

• 将SPA静态托管在子路由下的服务器上：http://localhost:6200/my-app
• 使NGINX反向proxy_passgoto：proxy_passhttp://localhost:6200/my-app/
• 将vue.config.js文件的公共路径设置为：公共路径：/my-app
• 不要设置vue.config.js的solkPath属性（删除它）。

这种配置的关键是vue.js前端浏览器知道自己位于 /my-app，可以向 /my-app托管的服务器发送请求，NGINX不会真正修改任何URI。

虽然这种配置可以工作，但我不喜欢Web服务器必须在子路由上承载静态文件，并且浏览器必须知道其vhost（publicPath）-除非这是标准做法？？我认为浏览器知道它的公共路径（/my appX/）是可以接受的，因为它在历史模式下需要它。

PS.在生产中，我的带有相对公共路径的原始配置工作正常。它只是人力资源管理在发展中中断。

有人能解释一下这个问题吗？干杯

======更新1）找到修复程序，不确定这是否是唯一的修复程序。

我找到了我的vue。配置。js，devserver“public”属性设置不正确。根据webpack devserver文档，在浏览器中运行的devserver客户端（/sockjs node）代码将通过查看其窗口猜测服务器的位置。位置变量。但是，由于我是通过代理访问服务器的，所以在默认情况下它似乎无法处理这个问题。因此，他们的解决方案是设置“public”属性，使客户端直接与服务器对话（跨源请求）。。。如果你问我的话，我觉得有点不对劲。

因此，客户端sockjs节点现在直接从以下位置进行对话：http://localhost/my-appX/ 到http://lcoalhost:62xx/.

这就是（例如）my-app1的vue。配置。js现在看起来像：

module.exports = {
    // options...

    publicPath: "",
    
    devServer: {
        //disableHostCheck: true,
        https: false,
        public: "localhost:6200",  //// This line makes the client browser talk DIRECTLY to this address / server for hot reloading.
        host: "0.0.0.0" ,
        port: 6200,

    },

}

话虽如此，现在通过http，一切都能正常工作。但是更新NGINX以将请求升级为https，会导致webpack devserver sockjs节点抛出CORS错误。这是因为客户端/浏览器已升级为HTTPS，但webpack devserver仅为http。然而，为了解决这个问题，我只是制作了vue。配置。js devserver https，CORS错误消失。

这似乎更像是webpack devserver sockjs节点的问题/限制，而不是stackoverflow问题。我会把问题留在这里。




Answer 1

如果您想保持热重新加载（不确定这是否是您想要的），您必须添加这样一个位置

location /sockjs-node {
    proxy_pass http://nodefrontend_myapp;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;
}