我花了一些时间尝试通过端口80使用浏览器工作使Angular2 Quickstart可以访问.当您的应用代码被修改时,Browsersync是负责实时刷新的技术.它在启动时与浏览器创建websocket连接,检测位于app目录中的文件的更改并发送相应的更新.
假设您在http://example.net/myangular2app上托管了Angular2 Quickstart应用程序
跟随tuto时的状态
基础教程应该会引导您出现以下情况：
> http://example.net/myangular2app显示页面但刷新不起作用
> http://example.net:3001显示Browsersync UI(您可以在其中查看发生的事情)
> http://example.net:3000显示页面并创建websocket连接,允许实时刷新
我们想要什么
我们想使用http://example.net/myangular2app并让Browsersync将更新发送到Web浏览器(而不是http://example.net:3000).我们将Nginx作为网络服务器.
最佳答案
工作方案
我们的想法是将proxy_pass用于两个流：
>在命中根路径/ myangular2app时将端口80重定向到Browsersync端口3000
>使用proxy_pass到端口3000,支持路径浏览器同步及其后代的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;
}
}
