0
votes

I'm trying to access my Angular front-end deployed to an AKS cluster at Path / with service lawyerlyui-service. The cluster is using nginx deployed via HELM with the official chart (https://kubernetes.github.io/ingress-nginx) I have other backend .net core services deployed and I can access these via the ingress.

However when i try access the Angular application at https://uat.redactedapp.co.za i get the following error (taken from nginx pod logs)

Below are the configurations and log for nginx, Dockerfile, deployment.yml and ingress.yml

NGINX Log

2021/01/29 20:31:59 [error] 1304#1304: *7634340 connect() failed (111: Connection refused) while connecting to upstream, client: 10.244.0.1,
server: uat.redactedapp.co.za, request: "GET / HTTP/2.0", upstream: "http://10.244.0.88:80/", host: "uat.redactedapp.co.za"

Dockerfile


FROM node:8.12.0-alpine
EXPOSE 80
RUN npm -v

RUN mkdir -p /usr/src

WORKDIR /usr/src

# To handle 'not get uid/gid'
RUN npm config set unsafe-perm true
RUN npm install -g \
    [email protected] \
    @angular/compiler-cli \
    @angular-devkit/core

RUN npm install -g @angular/[email protected]

RUN ln -s /usr/src/node_modules/@angular/cli/bin/ng /bin/ng

COPY package.json /usr/src/

RUN npm install

COPY . /usr/src

CMD ["ng", "build", "--configuration", "uat"]

Ingress

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: redacted-ingress
  namespace: default
  annotations:
    kubernetes.io/ingress.class: nginx
    nginx.ingress.kubernetes.io/enable-cors: "true"
    nginx.ingress.kubernetes.io/cors-allow-methods: "GET, PUT, POST, DELETE, PATCH, OPTIONS"
    nginx.ingress.kubernetes.io/cors-allow-credentials: "true"
    nginx.ingress.kubernetes.io/proxy-body-size: 50m
    nginx.ingress.kubernetes.io/rewrite-target: /$2
spec:
  tls:
    - hosts:
        - uat.redactedapp.co.za
      secretName: secret-tls
  rules:
    - host: uat.redactedapp.co.za
      http:
        paths:
          - path: /otp-api(/|$)(.*)
            pathType: Prefix
            backend:
              service:
                name: otpapi-service
                port:
                  number: 80
          - path: /search-api(/|$)(.*)
            pathType: Prefix
            backend:
              service:
                name: searchapi-service
                port:
                  number: 80
          - path: /notifications-api(/|$)(.*)
            pathType: Prefix
            backend:
              service:
                name: notificationsapi-service
                port:
                  number: 80
          - path: /user-api(/|$)(.*)
            pathType: Prefix
            backend:
              service:
                name: userapi-service
                port:
                  number: 80
          - path: /insurance-api(/|$)(.*)
            pathType: Prefix
            backend:
              service:
                name: insuranceapi-service
                port:
                  number: 80
          - path: /client-api(/|$)(.*)
            pathType: Prefix
            backend:
              service:
                name: clientsapi-service
                port:
                  number: 80
          - path: /
            pathType: Prefix
            backend:
              service:
                name: lawyerlyui-service
                port:
                  number: 80

Deployment.yml

apiVersion: apps/v1
kind: Deployment
metadata:
  name: lawyerlyui
spec:
  selector:
    matchLabels:
      app: lawyerlyui
  replicas: 1
  template:
    metadata:
      labels:
        app: lawyerlyui
    spec:
      containers:
        - name: lawyerlyui
          image: redacted.azurecr.io/lawyerly:latest
          ports:
            - containerPort: 80
      imagePullSecrets:
        - name: uat-acr-auth
---
apiVersion: v1
kind: Service
metadata:
  name: lawyerlyui-service
spec:
  type: ClusterIP
  selector:
    app: lawyerlyui
  ports:
    - name: http
      protocol: TCP
      # Port accessible inside cluster
      port: 80
      # Port to forward to inside the pod
      targetPort: 80
1
You have ng build but does that start a server listening on port 80? Have you checked kubectl logs -l app=lawyerlyui to see if it is doing what you expect? - mdaniel
separately, using :latest without imagePullPolicy: Always is a recipe for things not being what you expect them to be - mdaniel
@mdaniel i've in tried kubectl logs -l app=lawyerlyui but get no output from the containers logs. I'm not very familiar with Angular, I know that there is a separate dockerfile in this project that has this cmd at the end. CMD ["ng", "serve", "--host", "0.0.0.0"] Does docker combine the base dockerfile and then environment specific ones like Dockerfile.uat ? I tried to see if i could add another CMD into the uat dockerfile but only one can be specified. - Darren
then that's the one you'll want; alternatively, unless there's some underlying nuance, I believe you can test that theory by just setting command: [ng, serve, --host, 0.0.0.0] in the Deployment and see if it starts to work. If the Deployment had a correct livenessProbe: on :80 it would have correctly bombed the rollout when nothing was listening on :80 - mdaniel

1 Answers

1
votes

So after doing so more reading an looking at @mdaniels comments I've created a new Dockerfile.uat. The previous file was only building the src code but never serving it.

As I understand, you need to serve the built Angular code, this is no longer giving me a 502 Bad Gateway.

# Stage 0, "build-stage", based on Node.js, to build and compile the frontend
FROM node:10.8.0 as build-stage
WORKDIR /app
COPY package*.json /app/
RUN npm install
COPY ./ /app/
ARG configuration=uat
EXPOSE 80
RUN npm run build --configuration $configuration

# Stage 1, based on Nginx, to have only the compiled app, ready for production with Nginx
FROM nginx:1.15
#Copy ci-dashboard-dist
COPY --from=build-stage /app/dist/lfa/ /usr/share/nginx/html
#Copy default nginx configuration
COPY ./nginx/nginx-custom.conf /etc/nginx/conf.d/default.conf