Report this

What is the reason for this report?

Migrating Heroku Angular app to DO Kubernetes

Posted on April 6, 2021

At present I am running an Angular client app and a Nodejs/Express API on Heroku, and a MongoDB on MongoDB Inc. I have decided to migrate my project to Kubernetes, and selected DigitalOcean (mainly because they’re neither Google nor Amazon).

I have successfully migrated the API to a kubernetes deployment. Following an excellent DO tutorial, I was able to connect the deployment to my domain name through Nginx Ingress and secure it with Cert-Manager. This was the tutorial I followed: https://www.digitalocean.com/community/tutorials/how-to-set-up-an-nginx-ingress-on-digitalocean-kubernetes-using-helm

I am now working to migrate the Angular client to a k8s deployment and could use advice on troubleshooting. I experienced problems containerizing the app with docker and resolved those by switching the package manager from npm to yarn. The container now successfully runs in a pod (status is ‘running’), and I’ve connected it to my ingress controller. When I try to connect, however, I get the 502 Bad Gateway error. I suspect I’m routing the port incorrectly. Angular apps default to port 4200, and I redirect those to port 80, just as with the tutorial, above.

Here are my yaml files for the deployment and for Ingress. There are four DNS routes. hw1 and hw2 are from the tutorial and are working fine. api is my API and is working fine. I have not included those yaml files. The DNS route for pvg does not work. It points to the “markwilx” deployment. I welcome any suggestion for proceeding with troubleshooting.

Thanks in advance, Mark

Deployment:

---
apiVersion: v1
kind: Service
metadata:
  name: markwilx
spec:
  type: ClusterIP
  ports:
    - port: 80
      targetPort: 4200
  selector:
    app: markwilx
---
apiVersion: apps/v1
kind: Deployment
metadata:
  name: markwilx
spec:
  replicas: 1
  selector:
    matchLabels:
      app: markwilx
  template:
    metadata:
      labels:
        app: markwilx
    spec:
      containers:
      - name: nginx
        image: registry.digitalocean.com/XXXXXXXX/markwilx:0.3.1
        ports:
        - containerPort: 4200
          protocol: TCP

Ingress:

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: hello-kubernetes-ingress
  annotations:
    kubernetes.io/ingress.class: nginx
    cert-manager.io/cluster-issuer: letsencrypt-prod
spec:
  tls:
  - hosts:
    - hw1.XXXXXXXXX.org    # This is working
    - hw2.XXXXXXXXX.org    # This is working
    - api.XXXXXXXXX.org    # This is working
    - pvg.XXXXXXXXX.org    # This is NOT working
    secretName: hello-kubernetes-tls
  rules:
  - host: "hw1.XXXXXXXXX.org"
    http:
      paths:
      - pathType: Prefix
        path: "/"
        backend:
          service:
            name: hello-kubernetes-first
            port:
              number: 80
  - host: "hw2.XXXXXXXXX.org"
    http:
      paths:
      - pathType: Prefix
        path: "/"
        backend:
          service:
            name: hello-kubernetes-second
            port:
              number: 80
  - host: "api.XXXXXXXXX.org"
    http:
      paths:
      - pathType: Prefix
        path: "/"
        backend:
          service:
            name: mwx-api
            port:
              number: 80
  - host: "pvg.XXXXXXXXX.org"
    http:
      paths:
      - pathType: Prefix
        path: "/"
        backend:
          service:
            name: markwilx
            port:
              number: 80


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

Hi there,

Based on the description of the issues you’re experiencing while migrating your Angular application to DOKS, here are some specific suggestions and troubleshooting steps that might help you resolve the 502 Bad Gateway error:

  1. Verifying Service-to-Pod Communication:

    • Check Pod Selector and Labels: Ensure that the labels in your deployment match the selector in your service definition. This is crucial for the service to correctly identify and send traffic to the pods.

      kubectl get pods -l app=markwilx -o wide
      kubectl describe service markwilx
      

      These commands will list the pods selected by the markwilx service and show detailed information about the service, respectively.

    • Pod Port Listening: Confirm that your Angular application inside the pod is listening on the correct port (4200). You can do this by accessing the pod directly:

      kubectl exec -it [pod-name] -- netstat -tuln
      

      Replace [pod-name] with the name of your pod. This command checks the open ports within the pod.

  2. Ingress Configuration and Connectivity:

    • Ingress Resource Check: Review the Ingress resource to ensure it is correctly configured to route traffic to the markwilx service.

      kubectl describe ingress hello-kubernetes-ingress
      

      This command provides details on how the Ingress is set up, including the backends it’s routing traffic to.

    • Nginx Configuration Within the Pod: For the Nginx server running inside your pod, verify that it is configured to serve the Angular application on port 4200. You might need to check the Nginx configuration file within the pod or the Dockerfile used to build the image.

  3. Checking Endpoints and Selector Labels:

    • Endpoint Verification: A lack of endpoints for your service means the service can’t send traffic to any pod. Check this with:
      kubectl get endpoints markwilx
      
      This command should show the IP addresses of the pods that the service is directing traffic to. If no endpoints are listed, there’s a mismatch in labels or no running pods that match the service’s selector.
  4. DigitalOcean Load Balancers Configuration:

    • Load Balancer Check: In DOKS, the Ingress might be using a DigitalOcean Load Balancer. Ensure that the Load Balancer is correctly configured and operational. You can check the status of your Load Balancers in the DigitalOcean Control Panel under the “Networking” section.

This should help you narrow down the cause of the 502 Bad Gateway error.

Best,

Bobby

The developer cloud

Scale up as you grow — whether you're running one virtual machine or ten thousand.

Get started for free

Sign up and get $200 in credit for your first 60 days with DigitalOcean.*

*This promotional offer applies to new accounts only.