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

Question

(如果需要,请参阅我的上一个问题以获取更多背景信息.)

我正在开发一个使用分离的前端和后端的应用程序:

• 后端是一个Rails应用程序(提供服务localhost:3000),主要提供REST API.
• 前端是一个AngularJS应用程序,我正在使用Gulp构建并在本地服务(使用BrowserSync)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服务器.

我的BrowserSync任务gulpfile.coffee:

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

这一切基本上都有效,但我想解决一些警告:

• 当我运行gulp任务时,基于上面的配置,BrowserSync会在其中加载Chrome选项卡http://localhost:3001/index.html#/foo.既然我正在使用nginx代理,我需要端口为3002.有没有办法告诉BrowserSync,"在端口3001上运行,但从端口3002开始"？我尝试使用绝对路径startPath,但它只需要一个相对路径.
• 每次BrowserSync启动时,我都会在控制台中看到一个(看似良性的)JavaScript错误:WebSocket connection to 'ws://localhost:3002/browser-sync/socket.io/?EIO=3&transport=websocket&sid=m-JFr6algNjpVre3AACY' failed: Error during WebSocket handshake: Unexpected response code: 400.不确定这究竟是什么意思,但我的假设是BrowserSync在某种程度上被nginx代理混淆了.

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

感谢您的任何意见!

Answer 1

要更好地控制打开页面的方式,请使用opn而不是浏览器同步机制.这样的事情(在JS中 - 对不起,我的咖啡脚本有点生疏):

browserSync({
    server: {
        // ...
    },
    open: false,
    port: 3001
}, function (err, bs) {
    // bs.options.url contains the original url, so
    // replace the port with the correct one:
    var url = bs.options.urls.local.replace(':3001', ':3002');
    require('opn')(url);
    console.log('Started browserSync on ' + url);
});

我对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";
    }
}