Nginx 502 bad gateway error after deploying the angular application to Kubernetes cluster

Question

I am deploying angular application on kubernetes, After deployment pod is up and running, but when I am trying to access the application through ingress it is giving 502 bad gateway error. Have been stuck with this issue for the past 2 days, but couldn't figure it out what is the issue.

Note:

1. I'm able to launch successful same app on local docker container instance.
2. The URL I'm trying is http://custom-yyyyyy.dev.xxxx.aws/appname, and that returns 502 bad gateway
3. There are few other applications which also shares the same host, works fine.

Here are my files

1.Docker file

FROM node:latest as builder

# copy the package.json to install dependencies
COPY package.json package-lock.json ./

# Install the dependencies and make the folder
RUN npm install && mkdir /my-app && mv ./node_modules ./my-app

WORKDIR /my-app

COPY . .

# Build the project and copy the files
RUN npm run ng build  --prod


FROM nginx:alpine

#!/bin/sh

COPY ./.nginx/nginx.conf /etc/nginx/nginx.conf

## Remove default nginx index page
RUN rm -rf /usr/share/nginx/html/*

# Copy from the stahg 1
COPY --from=builder /my-app/dist/my-app /usr/share/nginx/html

EXPOSE 8080

ENTRYPOINT ["nginx", "-g", "daemon off;"] 

2. nginx.conf (custom nginx)

 worker_processes 4;

events { worker_connections 1024; }

http {
    server {
        listen 80;
        include /etc/nginx/mime.types;

  location / {
    root /usr/share/nginx/html;
    index index.html index.htm;
    try_files $uri $uri/ /index.html =404;
  }
}
}

3.Deployment.yaml

apiVersion: apps/v1
kind: Deployment
metadata:
  annotations:
    com.xxx.path: /platform/custom
  name: appname 
  namespace: yyyyyy
  
spec:
  selector:
    matchLabels:
      io.kompose.service: appname 
  replicas: 1
  template:
    metadata:
      labels:
        clusterName: custom2
        department: customplatform
        io.kompose.service: appname 
        com.xxxx.monitor: application
        com.xxxx.platform: custom
        com.xxxx.service: appname
    spec:
      containers:
      - env:
        - name: ENVIRONMENT
          value: yyyyyy
        resources:
           requests:
             memory: "2048Mi"     
           limits:
             memory: "4096Mi"
        image: cccc.rrr.xxxx.aws/imgrepo/imagename:latest 
        imagePullPolicy: Always
        securityContext:
        name: image
        ports:
        - containerPort: 80
      restartPolicy: Always

4. Service.yaml

kind: Service
metadata:
  annotations:
    com.xxxx.path: /platform/custom
  labels:
    clusterName: custom2
    department: customplatform
    io.kompose.service: appname
    com.xxxx.monitor: application
    com.xxxx.platform: custom
    com.xxxx.service: appname
  name: appname
  namespace: yyyyyy
spec:
  ports:
  - name: "appname"
    port: 8080
    targetPort: 8080  
  selector:
    io.kompose.service: appname

5.Ingress

apiVersion: extensions/v1beta1
kind: Ingress
metadata:
 name: custom-ingress
 namespace: yyyyyy
 annotations:
    kubernetes.io/ingress.class: "nginx"
    nginx.ingress.kubernetes.io/proxy-redirect-from: "http://custom-yyyyyy.dev.xxxx.aws:8080/" 
    nginx.ingress.kubernetes.io/proxy-redirect-to: "$scheme://$http_host/"
spec:
  rules:
  - host: custom-yyyyyy.dev.xxxx.aws
    http:
      paths:
      - backend:
          serviceName: appname
          servicePort: 8080
        path: /appname

Answer 1

on nginx.conf the server should listen on port 8080

Answer 2

Perhaps your nginx.conf needs to listen on port 8080 and your deployment.yaml containerPort should be 8080 as well.

Here:

        name: image
        ports:
        - containerPort: 8080
      restartPolicy: Always