Question

我花了一些时间尝试通过端口80使浏览器同步工作Angular2 Quickstart。当您的应用代码被修改时，Browsersync是负责实时刷新的技术。它在启动时与浏览器创建websocket连接，检测位于app目录中的文件的更改并发送相应的更新。

假设您在http://example.net/myangular2app

上托管了Angular2快速入门应用程序

跟随tuto时的状态

基础教程应引导您出现以下情况：

http://example.net/myangular2app显示页面但刷新无效
http://example.net:3001显示Browsersync UI（您可以在哪里查看发生的事情）
http://example.net:3000显示页面并创建允许实时刷新的websocket连接

我们想要什么

我们希望使用http://example.net/myangular2app并让Browsersync向网络浏览器发送更新（而不是http://example.net:3000）。我们将Nginx作为网络服务器。

Answer 1

工作解决方案

我们的想法是将proxy_pass用于两个流：

在点击根路径/myangular2app时将端口80重定向到Browsersync端口3000
使用proxy_pass到端口3000，对路径browser-sync及其后代的Web套接字支持

这是nginx配置

server {

    listen 80 default_server;
    listen [::]:80 default_server;
    root /var/www;

    # Add index.php to the list if you are using PHP
    index index.html index.htm index.php index.nginx-debian.html;

    server_name example.net;

    location / {
        # First attempt to serve request as file, then
        # as directory, then fall back to displaying a 404.
        try_files $uri $uri/ =404;
    }

    # Here we proxy pass only the base path
    location = /myangular2app/ {
        proxy_set_header   X-Real-IP $remote_addr;
        proxy_set_header   Host      $http_host;
        proxy_pass         http://127.0.0.1:3000;
    }

        # Here we proxy pass all the browsersync stuff including
        # all the websocket traffic
        location /browser-sync {
        proxy_set_header   X-Real-IP $remote_addr;
        proxy_pass         http://127.0.0.1:3000;
        proxy_http_version 1.1;
        proxy_set_header   Upgrade $http_upgrade;
        proxy_set_header   Connection "upgrade";
        proxy_set_header   Host $host;
    }
}

配置Nginx以使Angular 2快速入门与Browsersync一起使用

跟随tuto时的状态

我们想要什么

1 个答案:

工作解决方案