Question

我在我的 Ubuntu 14.04 VPS 上使用Cloud9 IDE作为我的开发环境，现在我正在使用 Nodejs + Express 应用程序并利用 gulp 和远程ssh终端。

但是，高端口（例如8080,8081，......）在我的工作场所被阻止，而我只有端口80！

所以，我已经设置了 Nginx ，将我的所有域及其子域映射到 VPS的localhost 上的不同端口。例如domain1.com到http://localhost:8080或sub1.domain2.de到http://localhost:9090等等，以便能够通过端口80在一个VPS上提供不同的应用。

一切正常，直到我尝试设置 BrowserSync 以在我的PC浏览器上自动重新加载。这是伪配置：

Nginx地图表：（正常工作）

ahs502.ir至http://localhost:8081
dev.ahs502.ir至http://localhost:8082
bs.ahs502.ir至http://localhost:8083
test.ahs502.ir至http://localhost:8084

BrowserSync的Gulp任务：（似乎工作正常）

var bs, browserSync = require("browser-sync");
...
gulp.task('bs', ['start-node'], () => {
    bs = browserSync.create();
    bs.init({
        proxy: "localhost:8081", // Address of my running local node server
        port: 8082, // dev. ...
        ui: {
            port: 8083, // bs. ...
            weinre: {
                port: 8084 // test. ...
            }
        }
    });
    bs.watch("app/views/*.jade").on("change", bs.reload);
});

然后，我启动了Gulp任务：（在我的VPS上的ssh上的远程终端中）

$ gulp bs

它启动没有错误，我可以很好地浏览我的PC浏览器中的dev.ahs502.ir，但是，这是我在浏览器控制台中遇到这种周期性重复错误的地方：

GET http://dev.ahs502.ir:8082/browser-sync/socket.io/?EIO=3&transport=polling&t=LEye85F          browser-sync-client.2.11.2.js:1
net::ERR_CONNECTION_TIMED_OUT

GET http://dev.ahs502.ir:8082/browser-sync/socket.io/?EIO=3&transport=polling&t=LEyeEh8          browser-sync-client.2.11.2.js:1
net::ERR_CONNECTION_TIMED_OUT

GET http://dev.ahs502.ir:8082/browser-sync/socket.io/?EIO=3&transport=polling&t=LEyeLGy          browser-sync-client.2.11.2.js:1
net::ERR_CONNECTION_TIMED_OUT

...

并且，自动重新加载不起作用。

只需在:8082 的末尾添加一个额外的http://dev.ahs502.ir（它将在我的服务器上自行翻译为http://localhost:8082）所以请求无法解决并超时。

我尽我所能，但我无法解决它！任何帮助都将被暗示!!

对不起，故事很长。谢谢。

Answer 1

最后，我找到了一个很好的答案！

我已将 Nginx 配置为：

将dev.ahs502.ir映射到localhost:8082/和

将dev.ahs502.ir/browser-sync/socket.io/映射到localhost:8083/browser-sync/socket.io/，如下所示：

server {
    listen 80;
    server_name dev.ahs502.ir;

    location / {
        proxy_pass http://localhost:8082/;
        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 /browser-sync/socket.io/ {
        proxy_pass http://localhost:8083/browser-sync/socket.io/;
        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;
    }
}

然后，在 BrowserSync 选项中设置socket属性：

var bs, browserSync = require("browser-sync");
...
gulp.task('bs', ['start-node'], () => {
    bs = browserSync.create();
    bs.init({
        proxy: "localhost:8081", // Address of my running local node server
        port: 8082, // dev. ...

        socket: {
            path: "/browser-sync/socket.io",
            clientPath: "/browser-sync",
            namespace: "/browser-sync",
            domain: "dev.ahs502.ir"
        },

        ui: {
            port: 9090, // bs. ...
            weinre: {
                port: 9091 // test. ...
            }
        }
    });
    bs.watch("app/views/*.jade").on("change", bs.reload);
});

当您使用端口8083作为 browser-sync 的端口时，下一个重要的事情是不要使用端口8082。因此，我已将端口9090用于浏览器同步的 UI ，而不是端口8083。

那就是它！

谢谢大家。

BrowserSync无法在安装了Nginx的VPS上运行

1 个答案: