我如何正确配置Nginx与使用热重加载一起使用Angular？

Question

我使用命令运行我的服务器应用程序：ng服务并在浏览器控制台中获取错误：

Firefox无法连接到WSS：//dev.domain.com/ws Server。

[webpack-dev-server]尝试重新连接...

或在chrome上：

WebSocket连接到'wss：//dev.domain.com/ws'失败

[webpack-dev-server]断开连接！

[webpack-dev-server]尝试重新连接...

我的config nginx是：

location ^~ / {
    proxy_pass         http://localhost:4200;
    proxy_set_header   X-Forwarded-For $remote_addr;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
   
    proxy_http_version 1.1;
    proxy_cache_bypass $http_upgrade;
}

location ^~ /sockjs-node/ {

    proxy_pass http://localhost:4200;

    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;

    proxy_http_version 1.1;
    proxy_cache_bypass $http_upgrade;
}

location ^~ /ws/ {

    proxy_pass http://localhost:4200;

    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;

    proxy_http_version 1.1;
    proxy_cache_bypass $http_upgrade;
}

这应该有效，但行不通。我的配置是错误的？

Answer 1

对于我来说，这对我有用：

 location /ng-cli-ws {
           proxy_pass http://host-gateway:4200;
           proxy_http_version 1.1;
           proxy_set_header Upgrade $http_upgrade;
           proxy_set_header Connection "Upgrade";
           proxy_set_header Host $host;
 }

如果您的应用程序使用 /WS，请尝试删除Ending Slash，else nginx以301 to /ws /...做出响应。

Answer 2

我第二个弗拉德的回答，但我想详细说明解决方案。
我希望我的Angular应用程序能够在开发时重新加载任何更改，并能够通过HTTPS显示它们。因此，以下内容对我来说很好。它包括由Certbot管理的配置；并省略一个额外的默认服务器块。

upstream frontend {
    server 0.0.0.0:4200 fail_timeout=3s max_fails=3;
    server 0.0.0.0:80 backup;
}

upstream wsfront {
    ip_hash;
    server 0.0.0.0:4200;
}
    
server {
    server_name my.domain.net; 

    location ~ ^/ng-cli-w(s|s/)$ {
        
        proxy_pass http://wsfront;
        
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
    }

    location / {
    proxy_pass http://frontend;
    }

    listen [::]:443 ssl; 
    listen 443 ssl; 
    ssl_certificate /etc/letsencrypt/live/my.domain.net/fullchain.pem; 
    ssl_certificate_key /etc/letsencrypt/live/my.domain.net/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf; 
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; 
}


server {
    if ($host = my.domain.net) {
        return 301 https://$host$request_uri;
    }

    listen 80 ;
    listen [::]:80 ;
    server_name my.domain.net;
    return 404; 
}