如何使BrowserSync与nginx代理服务器一起工作？

（如果需要，请参阅了解更多背景信息。）

我正在开发一个应用程序，它使用一个解耦的前端和后端：

• 后端是一个Rails应用程序（服务于

  localhost:3000

  ），主要提供RESTAPI
• 前端是一个AngularJS应用程序，我正在用Gulp构建它，并在

  localhost:3001

  上本地（使用）提供服务

为了让这两个端彼此对话，在尊重的同时，我将nginx配置为两者之间的代理，可在

localhost:3002

上获得。这是我的nginx.conf：

worker_processes 1;

events {
  worker_connections 1024;
}

http {
  include mime.types;
  default_type application/octet-stream;
  sendfile on;
  keepalive_timeout 65;

  server {
    listen 3002;
    root /;

    # Rails
    location ~ \.(json)$ {
      proxy_pass http://localhost:3000;
    }

    # AngularJS
    location / {
      proxy_pass http://localhost:3001;
    }
  }
}

基本上，任何对

.json

文件的请求，我都会发送到Rails服务器，任何其他请求（例如，对于静态资产），我都会发送到BrowserSync服务器

我的

gulpfile.coffee中的BrowserSync任务：

gulp.task 'browser-sync', ->
  browserSync
    server:
      baseDir: './dist'
      directory: true
    port: 3001
    browser: 'google chrome'
    startPath: './index.html#/foo'

这一切基本上都是可行的，但我正试图解决几个问题：


当我运行gulp任务时，根据上面的配置，BrowserSync在
http://localhost:3001/index.html#/foo
。因为我使用的是nginx代理，所以我需要的端口是3002。有没有办法告诉BrowserSync“在端口3001上运行，但在端口3002上启动”？我尝试为
startPath
使用绝对路径，但它只需要相对路径
每次BrowserSync启动时，控制台中都会出现一个（看似良性的）JavaScript错误：
WebSocket连接到'ws://localhost:3002/browser sync/socket.io/？EIO=3&transport=WebSocket&sid=m-jfr6algnjpvre3acy'失败：WebSocket握手期间出错：意外响应代码：400
。不确定这到底意味着什么，但我的假设是BrowserSync不知何故被nginx代理搞糊涂了

如何解决这些问题以使其无缝运行

谢谢你的意见
 要更好地控制如何打开页面，请使用浏览器同步机制，而不是浏览器同步机制。类似这样的内容（在JS中-对不起，我的咖啡脚本有点生疏）：

我不熟悉Nginx，但据我所知，第二个问题的解决方案可能如下所示：

map $http_upgrade $connection_upgrade {
    default upgrade;
    '' close;
}

server {
    # ...

    # BrowserSync websocket
    location /browser-sync/socket.io/ {
        proxy_pass http://localhost:3001;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
    }
}

只有将
/browser sync/socket.io
附加到代理传递url，我才能成功

map $http_upgrade $connection_upgrade {
    default upgrade;
    '' close;
}

server {
    # ...

    # BrowserSync websocket
    location /browser-sync/socket.io/ {
        proxy_pass http://localhost:3001/browser-sync/socket.io/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
    }
}

您也可以通过使用以下功能从gulp/browsersync端执行此操作：

这意味着您的浏览器可以像通常一样通过gulp直接连接到browsersync，但现在它代理了nginx。只要前端没有在URL中硬编码主机/端口，对Rails的请求就会通过代理并具有相同的来源，因此您仍然可以发布等等。对于某些人来说，这可能是可取的，因为这种对开发设置的更改是在代码的开发部分进行的（gulp+browsersync），而不是对同样在生产中运行的nginx配置进行条件化/更改。
设置浏览器同步，以便通过websocket与在uwsgi上运行的python（django）应用程序配合使用。Django app以/app作为前缀，以生成如下url

非常感谢！这很有效。我不得不做了一些小的调整—（a）在gulpfile中，通过属性
bs.options.url.local
而不是
bs.options.url
（看起来API可能有点变化？）访问url，以及（b）在nginx.conf中，将BrowserSync proxy_pass设置为
http://localhost:3001
而不是
http://localhost:3002
（我假设这是为了指定BrowserSync服务器，而不是nginx代理）。再次感谢您的时间和帮助-非常感谢！刚刚发现
proxy\u passhttp://localhost:3001/
不同于
代理通行证http://localhost:3001
。使用
proxy\u passhttp://localhost:3001
，位置部分将自动追加。确实如此。这就足够了！
map $http_upgrade $connection_upgrade {
    default upgrade;
    '' close;
}

server {
    # ...

    # BrowserSync websocket
    location /browser-sync/socket.io/ {
        proxy_pass http://localhost:3001/browser-sync/socket.io/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
    }
}

gulp.task('browser-sync', function() {
    browserSync({
        ...
        proxy: 'localhost:3002'
    });
});

server {
  listen 80;
  server_name example.com;

  charset utf-8;

  root /var/www/example/htdocs/static;
  index index.html index.htm;

  try_files $uri $uri/ /index.html?$args;

  location /app {
    ## uWSGI setup
    include     /etc/nginx/uwsgi_params;
    uwsgi_pass  unix:///var/run/example/uwsgi.sock;
    uwsgi_param SCRIPT_NAME /app;
    uwsgi_modifier1 30;
  }

  location /media  {
    alias /var/www/example/htdocs/storage;
  }

  location /static {
    alias /var/www/example/htdocs/static;
  }

}