如何使BrowserSync與nginx代理服務器一起使用？

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

基本上，.json文件的任何要求，我發送到Rails的服務器，以及任何其他請求（例如，對於靜態資產），我發送到BrowserSync服務器。

的BrowserSync任務從我gulpfile.coffee：

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

這基本上都有效，但需要注意幾個問題，我試圖解決：

• 當我運行一飲而盡任務，根據上面的配置，BrowserSync將加載Chrome標籤http://localhost:3001/index.html#/foo。因爲我使用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

我只通過將/browser-sync/socket.io附加到proxy_pass url成功。

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

Answer 3

你也可以做到這一點從吞氣/ browsersync側非常簡單地使用其proxy option：

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

這意味着你的瀏覽器通過一飲而盡直接browsersync像通常，除了現在它代理的nginx 。只要您的前端沒有對URL中的主機/端口進行硬編碼，對Rails的請求將通過代理並具有相同的來源，因此您仍然可以進行POST等操作。對於某些人來說，這可能是需要的，因爲對開發設置的這種更改發生在代碼的開發部分（gulp + browsersync）中，而不是對生產中運行的nginx配置進行條件化/更改。

Answer 4

安裝瀏覽器同步以使用通過websocket在uwsgi上運行的python（django）應用程序。 Django應用程序前綴爲/ app以生成url，看起來像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; 
    } 

}