title: Frontend is not communicating with backend in kubernetes
body: <p>I am currently developing some application that is divided to backend (java+spring) and frontend (angular). For now I wanted to put it to kubernetes but I have issues while communicating frontend with backend within kubernetes cluster.
  I have frontend exposed as <code>LoadBalancer</code>, I am able to open it in the browser, however any API call to backend part is not resolving completely even without any status code - 400, 200, nothing.</p>
  <p>I was trying to do it with nginx with reverse proxy, however no luck so far. Once I enter into the frontend pod and curl some healthcheck endpoint of my backend gateway - it's responding correctly so I assume there must be something wrong with nginx or frontend itself.</p>
  <p>I've seen these questions already but couldn't make it work even with theirs ideas:</p>
  <p><a href="https://stackoverflow.com/questions/65141863/connection-refused-from-frontend-to-backend-in-k8s-cluster">connection refused from frontend to backend in k8s cluster</a></p>
  <p><a href="https://stackoverflow.com/questions/56989555/angular-on-kubernetes-ingress-routing">Angular on Kubernetes (ingress routing)</a></p>
  <p>Any ideas appreciated as I don't know for now what am I missing.</p>
  <p>Here is my nginx config file:</p>
  <pre><code>upstream backend-service {
     server sm-gateway-service:8090;
  }
  
  server {
     listen   80;
     server_name  localhost;
  
     location / {
         root /usr/share/nginx/html;
         index index.html;
     }
  
     location /api {
         proxy_pass http://backend-service;
         proxy_buffer_size          128k;
         proxy_buffers              4 256k;
         proxy_busy_buffers_size    256k;
     }
  }
  </code></pre>
  <p>Frontend Dockerfile:</p>
  <pre><code># Use official node image as the base image
  FROM node:lts-alpine3.14 as build
  
  # Set the working directory
  WORKDIR /usr/local/app
  
  # Add the source code to app
  COPY ./ /usr/local/app/
  
  # Install all the dependencies
  RUN npm install
  
  # Generate the build of the application
  RUN npm run build-dev
  
  # Stage 2: Serve app with nginx server
  
  # Use official nginx image as the base image
  FROM nginx:latest
  
  ## Remove default nginx website
  RUN rm -rf /usr/share/nginx/html/*
  RUN rm /etc/nginx/conf.d/*
  
  # Copy the build output to replace the default nginx contents.
  COPY --from=build /usr/local/app/dist/client /usr/share/nginx/html
  COPY ./nginx-custom.conf /etc/nginx/conf.d/default.conf
  
  # Expose port 80
  EXPOSE 80
  
  ENTRYPOINT [&quot;nginx&quot;,&quot;-g&quot;,&quot;daemon off;&quot;]
  </code></pre>
  <p><code>npm run build-dev</code> is just running the build with custom configuration for replacing environment url in Angular.
  Environment url that is provided - <code>http://sm-gateway-service:8090/api</code> and it's base URL for all backend calls.</p>
  <p>My frontend kubernetes yaml:</p>
  <pre><code>apiVersion: networking.k8s.io/v1
  kind: Ingress
  metadata:
    name: frontend-ingress
    namespace: sm
  spec:
    ingressClassName: &quot;nginx&quot;
    rules:
      - host: sm-ui-frontend:6969
        http:
          paths:
            - path: /api
              pathType: Prefix
              backend:
                service:
                  name: sm-gateway-service
                  port:
                    number: 8090
            - path: /
              pathType: Prefix
              backend:
                service:
                  name: sm-ui-frontend
                  port:
                    number: 6969
  ---
  apiVersion: v1
  kind: Service
  metadata:
    labels:
      app: sm-ui-frontend
    name: sm-ui-frontend
    namespace: sm
  spec:
    ports:
      - port: 6969
        protocol: TCP
        targetPort: 80
    selector:
      app: sm-ui-frontend
    type: LoadBalancer
  
  ---
  apiVersion: apps/v1
  kind: Deployment
  metadata:
    labels:
      app: sm-ui-frontend
    name: sm-ui-frontend
    namespace: sm
  spec:
    replicas: 1
    selector:
      matchLabels:
        app: sm-ui-frontend
    strategy: {}
    template:
      metadata:
        labels:
          app: sm-ui-frontend
      spec:
        containers:
          - name: sm-ui-frontend
            env:
              - name: ENVIRONMENT
                value: dev
            image: &lt;image&gt;
            ports:
              - containerPort: 80
            imagePullPolicy: Always
            resources: {}
  </code></pre>
  <p>And finally my gateway service yaml that I would like to connect to from UI:</p>
  <pre><code>apiVersion: v1
  kind: Service
  metadata:
    labels:
      app: sm-gateway-service
    name: sm-gateway-service
    namespace: sm
  spec:
    ports:
      - port: 8090
        protocol: TCP
        targetPort: 8090
    selector:
      app: sm-gateway-service
    type: ClusterIP
  
  ---
  apiVersion: apps/v1
  kind: Deployment
  metadata:
    labels:
      app: sm-gateway-service
    name: sm-gateway-service
    namespace: sm
  spec:
    replicas: 1
    selector:
      matchLabels:
        app: sm-gateway-service
    strategy: {}
    template:
      metadata:
        labels:
          app: sm-gateway-service
      spec:
        containers:
          - name: sm-gateway-service
            env:
              - name: JAVA_PARAMETERS
                value: -Xms200m -Xmx200m
            image: &lt;image&gt;
            ports:
              - containerPort: 8090
            imagePullPolicy: Always
            resources: {}
  </code></pre>