Live reload socket closed every ~10 seconds

[RichieSams]

Bug Report or Feature Request (mark with an x)

- [ x ] bug report
- [ ] feature request

Versions.

@angular/cli: 1.2.6
node: 8.2.0
os: linux x64

Repro steps.

I have Angular Cli running in a docker container, with the command:

ng serve --disable-host-check --live-reload-client http://localhost:8888 --host 0.0.0.0 --port 3000

Then I have another docker container running an nginx reverse-proxy listening on port 80. The conf is as follows:

#user  nobody;
worker_processes  2;

error_log stderr info;

pid        /tmp/nginx.pid;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                     '$status $body_bytes_sent "$http_referer" '
                     '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;

    keepalive_timeout  65;
    client_max_body_size 0;

    map $http_upgrade $connection_upgrade {
        default upgrade;
        '' close;
    }

    server {
        listen *:80 default_server;
        server_name "";
        proxy_send_timeout   10;
        proxy_read_timeout   10;

        location / {
            proxy_pass http://frontend-angular-cli:3000;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }

        location /api {
            proxy_pass http://backend:5000/api;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

I have docker mapping the host port 8888 to nginx container port 80.

When I run the docker containers, and browse to localhost:8888, the page loads well, and changing source files correctly causes a refresh of the page. BUT, every ~10 seconds, the Socket connection will disconnect and cause a page refresh.

The log given by the failure.

[DWS] Disconnected                                                            console.js:26
console.(anonymous function) | @ | console.js:26
-- | -- | --
  | log | @ | client?26cd:45
  | close | @ | client?26cd:126
  | sock.onclose | @ | socket.js:15
  | webpackJsonp.../../../../sockjs-client/lib/event/eventtarget.js.EventTarget.dispatchEvent | @ | eventtarget.js:51
  | (anonymous) | @ | main.js:356
  | wrapped | @ | raven.js:321
  | webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask | @ | zone.js:424
  | webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask | @ | zone.js:191
  | webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask | @ | zone.js:498
  | ZoneTask.invoke | @ | zone.js:487
  | timer | @ | zone.js:1823
  | setTimeout (async) |   |  
  | scheduleTask | @ | zone.js:1833
  | webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.scheduleTask | @ | zone.js:410
  | webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleTask | @ | zone.js:235
  | webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleMacroTask | @ | zone.js:258
  | (anonymous) | @ | zone.js:1859
  | proto.(anonymous function) | @ | zone.js:1221
  | (anonymous) | @ | raven.js:898
  | webpackJsonp.../../../../sockjs-client/lib/main.js.SockJS._close | @ | main.js:344
  | webpackJsonp.../../../../sockjs-client/lib/main.js.SockJS._transportClose | @ | main.js:303
  | g | @ | emitter.js:30
  | webpackJsonp.../../../../sockjs-client/lib/event/emitter.js.EventEmitter.emit | @ | emitter.js:50
  | WebSocketTransport.ws.onclose | @ | websocket.js:49
  | wrapFn | @ | zone.js:1069
  | wrapped | @ | raven.js:321
  | webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask | @ | zone.js:424
  | webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask | @ | zone.js:191
  | webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask | @ | zone.js:498
  | invokeTask | @ | zone.js:1364
  | globalZoneAwareCallback

Desired functionality.

I would like to have live reload working behind a reverse proxy

[filipesilva]

I don't know what's happening there. We don't do anything different in containers so I have to guess that it's related to the setup itself.

[RichieSams]

I figured it out after talking with my colleague. You were correct, it was a problem with my setup. My nginx config was set to kill a proxy connection after 10 seconds. I changed it to 7days, and everything works now.

proxy_send_timeout   7d;
proxy_read_timeout   7d;

Thanks!

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}