Làm cách nào để làm cho BrowserSync hoạt động với máy chủ proxy nginx?

Question

(. Nếu cần, vui lòng xem my last question cho một số thông tin nền hơn)

Tôi đang phát triển một ứng dụng mà sử dụng một tách riêng phía trước và backend:

• Backend là một ứng dụng Rails (phục vụ trên localhost:3000) chủ yếu cung cấp API REST.
• Giao diện người dùng là ứng dụng AngularJS, tôi đang xây dựng với Gulp và phục vụ tại địa phương (sử dụng BrowserSync) trên localhost:3001.

Để có được hai đầu để nói chuyện với nhau, trong khi tôn vinh các same-origin policy, tôi cấu hình nginx để hoạt động như một proxy giữa hai, có sẵn trên localhost:3002. Dưới đây là nginx.conf tôi:

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

Về cơ bản, bất kỳ yêu cầu .json file, tôi gửi đến máy chủ Rails, và bất kỳ yêu cầu khác (ví dụ, đối với tài sản tĩnh), tôi gửi đến máy chủ BrowserSync .

Nhiệm vụ BrowserSync từ gulpfile.coffee tôi:

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

này tất cả về cơ bản hoạt động, nhưng với một số khó khăn mà tôi đang cố gắng để giải quyết:

• Khi tôi chạy nhiệm vụ ngụm, dựa trên cấu hình ở trên, BrowserSync tải một tab Chrome tại http://localhost:3001/index.html#/foo. Vì tôi đang sử dụng proxy nginx, tuy nhiên, tôi cần cổng là 3002. Có cách nào để nói với BrowserSync không, "chạy trên cổng 3001, nhưng bắt đầu trên cổng 3002"? Tôi đã thử sử dụng đường dẫn tuyệt đối cho startPath, nhưng nó chỉ mong đợi một đường dẫn tương đối.
• Tôi nhận được lỗi JavaScript (dường như lành tính) trong bảng điều khiển mỗi lần BrowserSync bắt đầu: 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. Bạn không chắc chắn điều này có nghĩa là chính xác, nhưng giả định của tôi là BrowserSync bị nhầm lẫn bởi proxy nginx.

Làm cách nào để khắc phục những sự cố này để chạy liên tục?

Cảm ơn mọi đầu vào!

Answer 1

Để kiểm soát nhiều hơn cách mở trang, hãy sử dụng opn thay vì cơ chế đồng bộ hóa của trình duyệt. Một cái gì đó như thế này (trong JS - xin lỗi, Cà phê Script của tôi là một chút gỉ):

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

tôi không quen với Nginx, nhưng theo this page, giải pháp cho vấn đề thứ hai có thể trông như thế này:

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

Tôi chỉ thành công bằng cách thêm /browser-sync/socket.io vào url proxy_pass.

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

Bạn cũng có thể làm điều này từ ngụm/bên browsersync rất đơn giản bằng cách sử dụng proxy option của nó:

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

Điều này có nghĩa trình duyệt của bạn sẽ kết nối với browsersync trực tiếp như bình thường thông qua ngụm, ngoại trừ bây giờ nó ủy nhiệm nginx . Miễn là front-end của bạn không phải là máy chủ/cổng mã hóa cứng trong các URL, các yêu cầu tới Rails sẽ đi qua proxy và có cùng nguồn gốc để bạn vẫn có thể POST và như vậy. Điều này có thể được mong muốn đối với một số khi thay đổi này cho một thiết lập phát triển đi vào phần phát triển của mã của bạn (gulp + browsersync) so với điều kiện/thay đổi cấu hình nginx của bạn cũng chạy trong sản xuất.

Answer 4

Thiết lập để đồng bộ hóa trình duyệt hoạt động với ứng dụng python (django) chạy trên uwsgi qua websocket. Ứng dụng Django được bắt đầu bằng/ứng dụng để tạo url trông giống như 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; 
    } 

}