I have a Vuejs application built with Docker in 2 stages with Nginx:

# estágio de compilação 

FROM node:10-alpine as build-stage 

WORKDIR /app 

ARG VUE_APP_BASE_URL="minha-base-url" 

ENV VUE_APP_BASE_URL=${VUE_APP_BASE_URL} 

COPY package*.json ./ 

RUN npm install 

COPY . . 

RUN npm run build 

 
 

# estágio de produção 

FROM nginx:stable-alpine as production-stage 

COPY --from=build-stage /app/dist /usr/share/nginx/html 

COPY --from=build-stage /app/nginx.conf /etc/nginx/conf.d/nginx.conf 

EXPOSE 80 

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

 

Nginx.conf:

server {

  listen 80; 

  location / {
    alias /app/dist;
    index index.html index.htm;
    try_files $uri $uri/ @rewrites;
  }
  
  location @rewrites {
   rewrite ^.$ /index.html last;
  }

  error_page   500 502 503 504  /50x.html;

  location = /50x.html {
    root   /usr/share/nginx/html;
  }
}

Everything works perfectly by triggering the docker run command. When going up to kubernetes everything works perfectly using port-forward:

kubectl port-forward deployment/app-front 8082:80 

The big problem is when I create the Service with 1- type: LoadBalancer I can't access the application via the external IP generated, 2- also when I try through NGINX INGRESS it gives error 503. Note: I have other services that work perfectly in these 2 situations mentioned above, but these other applications are not built on top of the NGINX image on the docker, so I suspect that the error may come from there due to some conflict but I cannot reach a concrete conclusion. Here are the files:

App-front-deployment:

apiVersion: apps/v1
kind: Deployment
metadata:
  annotations:
    kompose.cmd: kompose convert
    kompose.version: 1.22.0 (955b78124)
  creationTimestamp: null
  labels:
    io.kompose.service: app-front
  name: app-front
spec:
  replicas: 1
  selector:
    matchLabels:
      io.kompose.service: app-front
      app: app-front
  strategy: {}
  template:
    metadata:
      annotations:
        kompose.cmd: kompose convert
        kompose.version: 1.22.0 (955b78124)
      creationTimestamp: null
      labels:
        io.kompose.service: app-front
        app: app-front
    spec:
      containers:
        - image: fabiomdsdj/agendime-front:0.0.3
          name: app-front
          ports:
            - containerPort: 8082
              name: http
          env:
          - name: VUE_APP_BASE_URL
            value: "app"
          resources: {}
      restartPolicy: Always
status: {}

App-front-service.yaml:

apiVersion: v1
kind: Service
metadata:
  annotations:
    kompose.cmd: kompose convert
    kompose.version: 1.22.0 (955b78124)
  creationTimestamp: null
  labels:
    io.kompose.service: app-front
  name: app-front
spec:
  type: ClusterIP
  ports:
    - name: "8082"
      port: 8082
      targetPort: 8082
  selector:
    io.kompose.service: app-front
    app: app-front
    tier: app-front
 

App-front-ingress.yaml:

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: app-ingress
  annotations:
    kubernetes.io/ingress.class: nginx
    nginx.ingress.kubernetes.io/rewrite-target: /
spec:
  rules:
  - host: "app.agendi.me"
    http:
      paths:
      - pathType: Prefix
        path: "/"
        backend:
          service:
            name: app-front
            port:
              number: 8082

I've been breaking my head for several days and I can't find the solution, could someone help me?

Note: With these same configurations I can expose other services that I have.