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

Question

(如果需要，请参阅 my last question 了解更多背景信息。)

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

后端是一个主要提供 REST API 的 Rails 应用程序(在 localhost:3000 上提供服务)。

前端是一个 AngularJS 应用程序，我正在使用 Gulp 构建它并在 localhost:3001 上本地提供服务(使用 BrowserSync ) .

让两端互相交谈，同时尊重 same-origin policy ，我将 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 服务器，任何其他请求(例如，静态 Assets )，我发送到 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 加载一个 Chrome 选项卡。 .但是，由于我使用的是 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 中 - 抱歉，我的 Coffee Script 有点生疏):

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不熟悉，但是根据 this page ，第二个问题的解决方案可能如下所示:

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