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!