在nginx上启用Browsersync UI

时间:2016-05-25 09:54:03

标签: nginx vagrant browser-sync gulp-browser-sync

我使用Vagrant VM重现我的生产服务器以进行本地Web开发。

主机正在运行Windows 10,并且guest虚拟机在Ubuntu 14.04上以VirtualBox作为提供商运行Nginx 1.10。

我想使用Gulp和Browsersync在开发期间提供文件。 这是来自gulp服务任务的我的browsersync配置:

browserSync.init({
  ui: {
    port: 3001
  },
  open: false,
  port: 3000,
  server: {
    baseDir: ['.tmp', 'app'],
    routes: {
      "/bower_components": "bower_components"
    }
  }
});

我设法让它与它一起工作:

map $http_upgrade $connection_upgrade {
  default upgrade;
  '' close;
}

server {

    server_name test.local.dev;

    location / {
      proxy_pass http://localhost:3000/;
    }

    location /ui/ {
      proxy_pass http://localhost:3001/;
    }

    # BrowserSync websocket
    location /browser-sync/socket.io/ {
      proxy_pass http://localhost:3000;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "Upgrade";
    }

}

此处显示的套接字配置:How to make BrowserSync work with an nginx proxy server?

网站,重新加载和浏览器都很有效。但UI无法找到所需的文件。

GET http://test.local.dev/js/vendor/socket.js 
GET http://test.local.dev/js/app.min.js 
GET http://test.local.dev/js/pages-config.js 
GET http://test.local.dev/lib/client-js.js 
GET http://test.local.dev/js/vendor/socket.js 
GET http://test.local.dev/js/app.min.js 
GET http://test.local.dev/js/pages-config.js 
GET http://test.local.dev/lib/client-js.js 404 (Not Found)

如何在Browsersync配置中为这些请求设置路由?如果不可能有任何方法让它发挥作用?

0 个答案:

没有答案