Next.js deployed locally with Kind - Error 502 Bad Gateway NGINX

Question

I am locally testing a deployment to a kind cluster of my Next.js app and there seems to be a problem with Ingress that I just can't find the reason why I am getting error 502 Bad Gateway NGINX.

Here are my files:

Dockerfile

FROM node:21-alpine as base

# Install dependencies
FROM base AS deps

RUN apk add --no-cache libc6-compat
WORKDIR /app

COPY package.json package-lock.json* ./
RUN npm ci

# Build
FROM base as builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .

RUN npm run build

# Runner
FROM base AS runner
WORKDIR /app

ENV NODE_ENV production
ENV NEXT_TELEMETRY_DISABLED 1

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

USER nextjs

COPY --from=builder /app/public ./public

COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

EXPOSE 3000

ENV PORT 3000

CMD ["node", "server.js"]

Deployment:

apiVersion: apps/v1
kind: Deployment
metadata:
  name: nextjs-app
  labels:
    app: nextjs-app
spec:
  selector:
    matchLabels:
      app: nextjs-app
  replicas: 2
  template:
    metadata:
      labels:
        app: nextjs-app
    spec:
      containers:
        - name: nextjs-app
          image: myImage
          imagePullPolicy: Always
          ports:
            - containerPort: 3000
          resources:
            limits:
              memory: "100Mi"
              cpu: "100m"

ClusterIP Service:

apiVersion: v1
kind: Service
metadata:
  name: nextjs-app-service
spec:
  type: ClusterIP
  selector:
    app: nextjs-app
  ports:
    - name: nextjs-app-service
      port: 80
      targetPort: 3000
      protocol: TCP

Ingress:

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: my-ingress
spec:
  rules:
    - http:
        paths:
          - pathType: Exact
            path: /
            backend:
              service:
                name: nextjs-app-service
                port:
                  number: 80
          - path: /api
            pathType: Prefix
            backend:
              service:
                name: python-django-service
                port:
                  number: 80

I have checked all of the pods and services and they seem to be fine and I have tested with kubectl port-forward and the app runs with the ClusterIP service. So the problem seems to be in the Ingress step.

The logs for the pods are also okay, they just don't have any logs that might indicate that there was traffic redirected to them.

Also, I have a Django app running in a different path that is working with Ingress at localhost. I have also tested with a very simple FastAPI service and this Ingress route setup works (meaning I can deliver different services at different paths like I want).

So the problem to me seems to be with the Next.js app connection to Ingress.

This is the error that appears in the ingress-nginx pod logs:

2024/03/13 12:14:34 [error] 308#308: *730 connect() failed (111: Connection refused) while connecting to upstream, client: 172.27.0.1, server: _, request: "GET / HTTP/1.1", upstream: "http://10.244.3.2:3000/", host: "localhost"

Answer 1

Not really a solution, but this struture worked for a fresh app. All of the kubernetes files and dockerfile worked just fine, maybe there was some configuration that was off.

I just built a new create-next-app@latest and transfered all my files from the old version to the new one and it worked. If the application is not too complex this might be a viable solution.

PS: It probably wasn't the Next.js version since my old app was up to date.