如何使 BrowserSync 与 nginx 代理服务器一起工作? [英] How to make BrowserSync work with an nginx proxy server?

问题描述

(如果需要，请参阅 我的最后一个问题 了解更多背景信息.)

(If needed, please see my last question for some more background info.)

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

I'm developing an app that uses a decoupled front- and backend:

• 后端是一个 Rails 应用(在 localhost:3000 上提供服务)，主要提供 REST API.
• 前端是一个 AngularJS 应用程序，我使用 Gulp 构建并在本地提供服务(使用 BrowserSync) 在 localhost:3001 上.

• The backend is a Rails app (served on localhost:3000) that primarily provides a REST API.
• The frontend is an AngularJS app, which I'm building with Gulp and serving locally (using BrowserSync) on localhost:3001.

为了让两端互相交谈，同时遵守同源政策，我配置了 nginx 作为两者之间的代理，在 localhost:3002 上可用.这是我的 nginx.conf:

To get the two ends to talk to each other, while honoring the same-origin policy, I configured nginx to act as a proxy between the two, available on localhost:3002. Here's my 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 服务器.

Basically, any requests for .json files, I'm sending to the Rails server, and any other requests (e.g., for static assets), I'm sending to the BrowserSync server.

来自我的 gulpfile.coffee 的 BrowserSync 任务:

The BrowserSync task from my gulpfile.coffee:

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

这一切基本上都有效，但有几个我正在尝试解决的警告:

This all basically works, but with a couple of caveats that I'm trying to solve:

• 当我运行 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' 失败:WebSocket 握手期间出错:意外响应代码:400.不确定这究竟意味着什么，但我的假设是 BrowserSync 不知何故被 nginx 代理混淆了.

• When I run the gulp task, based on the configuration above, BrowserSync loads a Chrome tab at http://localhost:3001/index.html#/foo. Since I'm using the nginx proxy, though, I need the port to be 3002. Is there a way to tell BrowserSync, "run on port 3001, but start on port 3002"? I tried using an absolute path for startPath, but it only expects a relative path.
• I get a (seemingly benign) JavaScript error in the console every time BrowserSync starts: 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. Not sure what this means exactly, but my assumption is that BrowserSync is somehow confused by the nginx proxy.

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

How can I fix these issues to get this running seamlessly?

感谢您的任何意见！

推荐答案

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

To get more control over how opening the page is done, use opn instead of browser sync's mechanism. Something like this (in JS - sorry, my Coffee Script is a bit rusty):

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，但根据这个页面，第二个问题的解决方案可能看起来有些东西像这样:

I'm unfamiliar with Nginx, but according to this page, the solution to the second problem might look something like this:

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

这篇关于如何使 BrowserSync 与 nginx 代理服务器一起工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！