Browser-sync: can not proxy from nginx

[realmx]

Issue details

I want to proxy localhost:3001 from nginx, but it doesn't work.

(sorry, I'm not good for English, I'm Chinese)

Please specify which version of Browsersync, node and npm you're running

• Browsersync [ 2.12.8 ]
• Node [ 5.10.1 ]

• Npm [ 3.8.3 ]

  Affected platforms

• [ ] linux

• [ ] windows

• [x] OS X

  Browsersync use-case

• [ ] API

• [x] Gulp
• [ ] Grunt

• [x] Nginx

  for all other use-cases, (gulp, grunt etc), please show us exactly how you're using Browsersync

• my plan for the development environment

  firefox <------> nginx (rewrite path, proxy to api) <---(proxy)---> browser-sync (gulp auto build website files)

• browser-sync

browserSync.init({
    socket: {
        path: '/browser-sync/socket.io',
        clientPath: '/browser-sync',
        namespace: '/browser-sync',
        domain: 'testbs.org'
    },
    server: 'public',
    open: true
});

• nginx

server {

    listen 80;
    server_name testbs.org;

    ......

    # BrowserSync
    location / {
        proxy_pass http://localhost:3000/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
    }

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

    ......

}

• Browser Console

GET http://testbs.org/browser-sync/socket.io/?EIO=3&transport=polling&t=LJ9VN7W
    504 Gateway Time-out 1m browser...12.8.js (line 1)

GET http://testbs.org/browser-sync/socket.io/?EIO=3&transport=polling&t=LJ9VSOA
    504 Gateway Time-out 1m browser...12.8.js (line 1)

GET http://testbs.org/browser-sync/socket.io/?EIO=3&transport=polling&t=LJ9VY2g
    504 Gateway Time-out 1m browser...12.8.js (line 1)

[adambuczek]

I had a similar problem and got it to work with this configuration:

Browser-Sync:

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

Nginx:

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

}

Socket configuration as seen here: How to make BrowserSync work with an nginx proxy server?

[realmx]

@adambuczek my issue has been resolved by myself😀
let me show you about my configuration:

• nginx

server_name                         test.local.dev
location / {
    # BrowserSync
    proxy_pass                      http://localhost:3010;
    proxy_set_header                Upgrade $http_upgrade;
    proxy_set_header                Connection "Upgrade";
}

• gulp

browserSync.init({
    server: 'public',
    port: 3010,
    ui: {
        port: 3011,
        weinre: {
            port: 3012
        }
    },
    open: false
});

and now, i can do refresh by the test.local.dev, didn't use the localhost😃

[AdsonCicilioti]

Thx @realmx !! Your Solution Work for me!!!

[iDVB]

Is anyone else seeing about 3-5x delay in time to see the changes when saving and using Nginx with browsersync?

[realmx]

@iDVB when the code saved after changes,the gulp need run a few seconds, then browsersync start running, and browser refresh immediately

[iDVB]

@realmx yes that describes how BrowserSync works.

However, it does not explain why when I run it without nginx it is about 5x faster then if Nginx is implemented. I would expect it to be negligibly slower with nginx, but not 5x slower. It's IMHO, it's unusable due to this length of delay.

[realmx]

@iDVB can u show me gulp code and nginx configuration?

[birish2]

@iDVB Are you running this in docker? I have the same issue right now. Tried the configs listed above. I also ran into the same 5 second delay with another regular websocket that was running outside of docker containers, but had several apps running in docker at the same time. Installed the same app on a fresh machine without docker and 5 second websocket delay was gone...

[alexkuc]

In my case, all I had to do was add additional listen 3000 to my website's configuration in nginx config:

server {
    server_name app.test;
    listen      8080;
    listen      3000;

    location / {
        root <absolute_path>;
        index index.html;
    }
}

In my browser-sync config, I did the following:

module.exports = {
…
  'proxy': 'http://app.test:8080',
  'host': 'app.test',
…

Ps. I run nginx on non-standard (8080) port to avoid using privileges
Pps. I am using dnsmasq for local dns and it seems that occasionally the setup would stop working so I would restart both, dnsmasq and nginx