Como fazer o BrowserSync funcionar com um servidor proxy nginx?

(Se necessário, consulteminha ultima pergunta para obter mais informações de fundo.)

Estou desenvolvendo um aplicativo que usa um front-end e back-end dissociados:

O back-end é um aplicativo Rails (exibido emlocalhost:3000) que fornece principalmente uma API REST.O frontend é um aplicativo AngularJS, que estou construindo com o Gulp e servindo localmente (usandoBrowserSync) emlocalhost:3001.

Para que os dois lados conversem entre si, honrando opolítica de mesma origem, Configurei o nginx para atuar como um proxy entre os dois, disponível emlocalhost:3002. Aqui está o meu 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;
    }
  }
}

Basicamente, qualquer solicitação de.json arquivos, estou enviando para o servidor Rails e quaisquer outras solicitações (por exemplo, para ativos estáticos), estou enviando para o servidor BrowserSync.

A tarefa BrowserSync do meugulpfile.coffee:

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

Tudo isso basicamente funciona, mas com algumas ressalvas que estou tentando resolver:

Quando executo a tarefa gulp, com base na configuração acima, o BrowserSync carrega uma guia Chrome emhttp://localhost:3001/index.html#/foo. Porém, como estou usando o proxy nginx, preciso que a porta seja 3002. Existe uma maneira de informar ao BrowserSync "execute na porta 3001, mas inicie na porta 3002"? Eu tentei usar um caminho absoluto parastartPath, mas espera apenas um caminho relativo.Eu recebo um erro de JavaScript (aparentemente benigno) no console toda vez que o BrowserSync é iniciado: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. Não tenho certeza do que isso significa exatamente, mas suponho que o BrowserSync esteja de alguma forma confuso com o proxy nginx.

Como posso corrigir esses problemas para que isso funcione perfeitamente?

Obrigado por qualquer contribuição!

questionAnswers(4)

yourAnswerToTheQuestion