Question 97683 in Nginx Question posted in
The official documentation can be found here.

How can I properly configure nginx to work with Angular with using hot reload?

I run my server app with command: ng serve and get error in browser console:

Firefox cannot connect to the wss://dev.domain.com/ws server.

[webpack-dev-server] Trying to reconnect…

or on chrome:

WebSocket connection to ‘wss://dev.domain.com/ws’ failed

[webpack-dev-server] Disconnected!

[webpack-dev-server] Trying to reconnect…

My config nginx is:

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

This should work, but it doesn’t. my configuration is wrong?

Tags:

2

Answers


  1. 0

    That works for me for Angular 14 :

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

    If your app is using /ws, try to remove ending slash, else nginx responds with 301 to /ws/…

    Login or Signup to reply.
  2. 0

    I second Vlad’s answer, but I would like to elaborate on the solution.
    I wanted my Angular application to be able to reload any changes at development time and be able to display them through HTTPS. So the following is what is working fine for me. It includes configuration managed by Certbot; and omits an additional default server block.

    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; 
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search