title: 502 Bad Gateway on Angular App deployed on K8 cluster
body: <p>I have deployed 3 services on a k8 cluster which uses a Traffic ingress controller. I get a 502 Bad Gateway error for accessing my Angular built front end but by backend node server and mongo db work fine.</p>
  
  <p>I have tried an Nginx ingress controller set up with the same issue. I am aware a production build of the app would be better for the final build but as far as I'm aware dev access should still be possible. The Traefik ingress routes correctly as per IP and port, but somewhere along the way fails. I have exec'd into the 'frontend' pod and curl confirms that the page is being hosted on localhost:4200 as expected.</p>
  
  <p>My docker-compose file is as follows:</p>
  
  <pre><code>version: '3.7'
  
  services:
      frontend:
          image: [image location]
          ports:
              - "4200"
          volumes:
              - ./frontend:/app
  
      s3-server:
          image: [image location]
          ports:
              - "3000"
          links:
              - database
  
      database:
          image: mongo
          ports:
              - "27017"
  </code></pre>
  
  <p>My traefik yaml is as follows:</p>
  
  <pre><code>apiVersion: extensions/v1beta1
  kind: Ingress
  metadata:
    name: frontend
    annotations:
      kubernetes.io/ingress.class: traefik
  spec:
    rules:
    - host: [domainname] 
      http:
        paths:
        - path: /
          backend:
            serviceName: frontend
            servicePort: 4200
        - path: /api
          backend:
            serviceName: s3-server
            servicePort: 3000
        - path: /db
          backend:
            serviceName: database
            servicePort: 27017
  </code></pre>
  
  <p>frontend service (created with compose) yaml:</p>
  
  <pre><code>apiVersion: v1
  kind: Service
  metadata:
    annotations:
      kompose.cmd: kompose convert
      kompose.version: 1.21.0 ()
    creationTimestamp: null
    labels:
      io.kompose.service: frontend
    name: frontend
  spec:
    ports:
    - name: "4200"
      port: 4200
      targetPort: 4200
    selector:
      io.kompose.service: frontend
  status:
    loadBalancer: {}
  
  </code></pre>
  
  <p>Ingress shows:</p>
  
  <pre><code>Host              Path  Backends
    ----              ----  --------
    api.cailean.tech  
                      /      frontend:4200 (192.168.1.27:4200)
                      /api   s3-server:3000 (192.168.2.20:3000)
                      /db    database:27017 (192.168.2.14:27017)
  </code></pre>
  
  <p>Pods show:</p>
  
  <pre><code>pod/database-798b8df4bd-zzxpx    1/1     Running   0          17h   192.168.2.14   kube-node-ea4d   &lt;none&gt;           &lt;none&gt;
  pod/s3-server-76dd6b6b57-pq9lp   1/1     Running   0          15h   192.168.2.20   kube-node-ea4d   &lt;none&gt;           &lt;none&gt;
  pod/nginx-86c57db685-qbcd4       1/1     Running   0          47m   192.168.1.26   kube-node-f94c   &lt;none&gt;           &lt;none&gt;
  pod/frontend-5b8c7979d8-fggr6    1/1     Running   0          18m   192.168.1.27   kube-node-f94c   &lt;none&gt;           &lt;none&gt;
  </code></pre>
  
  <p>k describe svc frontend:</p>
  
  <pre><code>Name:              frontend
  Namespace:         default
  Labels:            io.kompose.service=frontend
  Annotations:       kompose.cmd: kompose convert
                     kompose.version: 1.21.0 ()
                     kubectl.kubernetes.io/last-applied-configuration:
                       {"apiVersion":"v1","kind":"Service","metadata":{"annotations":{"kompose.cmd":"kompose convert","kompose.version":"1.21.0 ()"},"creationTim...
  Selector:          io.kompose.service=frontend
  Type:              ClusterIP
  IP:                192.168.141.36
  Port:              4200  4200/TCP
  TargetPort:        4200/TCP
  Endpoints:         192.168.1.27:4200
  Session Affinity:  None
  Events:            &lt;none&gt;
  </code></pre>
  
  <p>When connected to a Nginx server pod (set up for testing), if I curl the IP address of the frontend I get connection refused.</p>
  
  <pre><code>* Expire in 0 ms for 6 (transfer 0x559ae5cb5f50)
  *   Trying 192.168.1.27...
  * TCP_NODELAY set
  * Expire in 200 ms for 4 (transfer 0x559ae5cb5f50)
  * connect to 192.168.1.27 port 4200 failed: Connection refused
  * Failed to connect to 192.168.1.27 port 4200: Connection refused
  * Closing connection 0
  curl: (7) Failed to connect to 192.168.1.27 port 4200: Connection refused
  </code></pre>
  
  <p>Curl from inside frontend pod gives me:</p>
  
  <pre><code>Rebuilt URL to: localhost:4200/
  *   Trying ::1...
  * TCP_NODELAY set
  * connect to ::1 port 4200 failed: Connection refused
  *   Trying 127.0.0.1...
  * TCP_NODELAY set
  * Connected to localhost (127.0.0.1) port 4200 (#0)
  &gt; GET / HTTP/1.1
  &gt; Host: localhost:4200
  &gt; User-Agent: curl/7.52.1
  &gt; Accept: */*
  &gt; 
  &lt; HTTP/1.1 200 OK
  &lt; X-Powered-By: Express
  &lt; Access-Control-Allow-Origin: *
  &lt; Accept-Ranges: bytes
  &lt; Content-Type: text/html; charset=UTF-8
  &lt; Content-Length: 761
  &lt; ETag: W/"2f9-Ft4snhWFNqmPXU8vVB/M50CiWRU"
  &lt; Date: Tue, 14 Apr 2020 12:54:50 GMT
  &lt; Connection: keep-alive
  &lt; 
  &lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;S3 Manoeuvre Selector&lt;/title&gt;
    &lt;base href="/"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="icon" type="image/x-icon" href="favicon.ico"&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&amp;display=swap" rel="stylesheet"&gt;
    &lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;
  &lt;/head&gt;
  &lt;body class="mat-typography"&gt;
    &lt;app-root&gt;&lt;/app-root&gt;
  &lt;script src="runtime.js" type="module"&gt;&lt;/script&gt;&lt;script src="polyfills.js" type="module"&gt;&lt;/script&gt;&lt;script src="styles.js" type="module"&gt;&lt;/script&gt;&lt;script src="vendor.js" type="module"&gt;&lt;/script&gt;&lt;script src="main.js" type="module"&gt;&lt;/script&gt;&lt;/body&gt;
  &lt;/html&gt;
  * Curl_http_done: called premature == 0
  * Connection #0 to host localhost left intact
  </code></pre>
  
  <p>As you can see it initially fails but resolves correctly. Any solution to this?</p>
  
  <p>Any ideas why Bad Gateway for the angular frontend but not the mongo db or express api?</p>
  
  <p>Update:
  Making any arbitrary change 4-6 times to service yaml and using 'kubectl apply -f' will result in no bad gateway error and working as expected, even if the service yaml is exactly the same as the one initially used to start the service. Cannot discover any reason why this might be...</p>