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

问题描述

（如果需要，请参阅

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

• 后端是一个Rails应用程序（服务于 localhost：3000 ），主要提供了一个REST API。
  
• 前端是一个AngularJS应用程序，我使用Gulp构建并在本地服务（使用 BrowserSync ） localhost：3001 。

为了让两端互相交流，同时遵守同源策略，我配置nginx作为两者之间的代理，可用于 localhost：3002 。这是我的nginx.conf：

  worker_processes 1; 
 
事件{
 worker_connections 1024; 
} 
 
 http {
包含mime.types; 
 default_type application / octet-stream; 
 sendfile on; 
 keepalive_timeout 65; 
 
服务器{
监听3002; 
 root /; 
 
＃Rails 
 location〜\。（json）$ {
 proxy_pass http：// localhost：3000; 
} 
 
＃AngularJS 
 location / {
 proxy_pass http：// localhost：3001; 
 
 
 
  

基本上， code> .json 文件，我发送到Rails服务器和任何其他请求（例如，静态资源），我发送到BrowserSync服务器。

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

  gulp.task'browser-sync'， - > 
 browserSync 
服务器：
 baseDir：'./dist'
目录：true 
端口：3001 
浏览器：'google chrome'
 startPath：'./index.html#/foo'
  

这一切基本上都有效，但是有一对夫妇我试图解决的警告：

• 当我运行gulp任务时，根据上面的配置，BrowserSync加载一个Chrome选项卡在 http：// localhost：3001 / index.html＃/ foo 。因为我使用nginx代理，但是，我需要的端口是3002.有没有办法告诉BrowserSync，在端口3001上运行，但在端口3002上启动？我尝试使用 startPath 的绝对路径，但它只预期相对路径。我得到一个（看似良性的）JavaScript错误每次BrowserSync启动时在控制台中： WebSocket连接到'ws：// localhost：3002 / browser-sync / socket.io /？EIO = 3& transport = websocket& sid = m-JFr6algNjpVre3AACY'失败：在WebSocket握手期间出错：意外的响应代码：400 。不知道这意味着什么，但我的假设是BrowserSync在某种程度上被nginx代理困惑。
如何让这款软件无缝运行？




感谢您的任何意见！

>要更好地控制打开页面的方式，请使用 opn 代替浏览器同步的机制。像这样的东西（在JS中 - 对不起，我的咖啡脚本有点生疏）：



  browserSync（{
 server ：{
 // ... 
}，
 open：false，
 port：3001 
}，function（err，bs）{
 / / bs.options.url包含原始网址，因此
 //将端口替换为正确的端口：
 var url = bs.options.urls.local.replace（'：3001'，'： 
 require（'opn'）（url）; 
 console.log（''browserSync on'+ url）; 
}）; 
  

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



  map $ http_upgrade $ connection_upgrade {
默认升级; 
''close; 
} 
 
服务器{
＃... 
 
＃BrowserSync websocket 
位置/browser-sync/socket.io/ {
 proxy_pass http：// localhost：3001; 
 proxy_http_version 1.1; 
 proxy_set_header升级$ http_upgrade; 
 proxy_set_header连接升级; 
} 
} 
  




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

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

• 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.

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

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.

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:

• 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?

Thanks for any input!

解决方案

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

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屋！