Question

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

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

后端是一个Rails应用程序（在localhost:3000上提供），主要提供REST API。
前端是一个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;
    }
  }
}

基本上，我发送到Rails服务器的任何.json文件请求，以及任何其他请求（例如，静态资产），我都要发送到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中 - 对不起，我的咖啡脚本有点生锈）：

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

Answer 2

我只有将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"; } }附加到proxy_pass网址才能成功。

Quarter Text

Answer 3

您也可以通过使用proxy option非常简单地从gulp / browsersync方面执行此操作：

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

这意味着您的浏览器会像通常gulp一样直接连接到browsersync，除非它代理nginx。只要您的前端不是URL中的硬编码主机/端口，对Rails的请求将通过代理并具有相同的来源，因此您仍然可以POST等。对于某些人来说这可能是合乎需要的，因为开发设置的这种更改会在代码的开发部分（gulp + browsersync）中进行，而不是条件化/更改也在生产中运行的nginx配置。

Answer 4

设置浏览器同步以使用通过websocket在uwsgi上运行的python（django）应用程序。 Django应用程序以/ app为前缀，生成类似http://example.com/app/admin/

的网址

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

}

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

4 个答案: