Angular and dotnetcore connection in Kubernetes throw 404

1/4/2021

I struggle several days with that, and I can't find any solution.

These are my files: Deployments:

  • database:
apiVersion: apps/v1
kind: Deployment
metadata:
  name: dbdeployment
  labels:
    app: dbdemployment
spec:
  selector:
    matchLabels:
      app: dbdeployment
  replicas: 1
  template:
    metadata:
      name: dbdeployment
      labels:
        app: dbdeployment
    spec:
      containers:
      - name: dbcontainer
        image: docker.io/library/sc_db:cluster
        imagePullPolicy: Never
        ports:
        - containerPort: 5432
  • backend:
apiVersion: apps/v1
kind: Deployment
metadata:
  name: apideployment
  labels:
    app: apideployment
spec:
  selector:
    matchLabels:
      app: apideployment
  replicas: 1
  template:
    metadata:
      name: apideployment
      labels:
        app: apideployment
    spec:
      containers:
      - name: apicontainer
        image: docker.io/library/sc_api:cluster
        imagePullPolicy: Never
        ports:
        - containerPort: 5000
  • frontend:
apiVersion: apps/v1
kind: Deployment
metadata:
  name: webdeployment
  labels:
    app: webdeployment
spec:
  selector:
    matchLabels:
      app: webdeployment
  replicas: 1
  template:
    metadata:
      name: webdeployment
      labels:
        app: webdeployment
    spec:
      containers:
      - name: webcontainer
        image: docker.io/library/sc_web:cluster
        imagePullPolicy: Never
        ports:
          - containerPort: 80
        lifecycle:
          preStop:
            exec:
              command: ["/usr/sbin/nginx","-s","quit"]

Services:

  • database:
apiVersion: v1
kind: Service
metadata:
  name: dbservice
  labels:
    app: dbservice
spec:
  selector:
    app: dbdeployment
  ports:
  - protocol: TCP
    port: 5432
    targetPort: 5432
  • backend:
apiVersion: v1
kind: Service
metadata:
  name: apiservice
  labels:
    app: apiservice
spec:
  selector:
    app: apideployment
  ports:
  - protocol: TCP
    port: 5000
    targetPort: 5000
  • frontend (service is exposed as NodePort - 30002):
Version: v1
kind: Service
metadata:
  name: webservice
  labels:
    app: webservice
spec:
  selector:
    app: webdeployment
  ports:
  - name: http
    protocol: TCP
    port: 80
    targetPort: 80
    nodePort: 30002
  type: NodePort

Deployments are working:

NAME             READY   STATUS    RESTARTS   AGE
apideployment-9...   1/1     Running   0       7m50s   
dbdeployment-5...    1/1     Running   0       7m49s   
webdeployment-54...   1/1     Running   0      7m48s  

Services also:

NAME         TYPE        CLUSTER-IP       EXTERNAL-IP   PORT(S)        AGE
apiservice   ClusterIP   10.105.32.96     <none>        5000/TCP       11m
dbservice    ClusterIP   10.105.121.156   <none>        5432/TCP       11m
kubernetes   ClusterIP   10.96.0.1        <none>        443/TCP        13d
webservice   NodePort    10.99.221.170    <none>        80:30002/TCP   11m

Services are linked:

  • ConnectionString in appsettings.json contains:
...;Server=dbservice;Port=5432;...
  • nginx default contains name of apiservice in proxy pass:
server {
        listen 80;
        server_name scserver;
        location / {
                root /usr/share/nginx/html;
                try_files $uri /index.html;
        }
        location /api {
                proxy_pass http://apiservice:5000;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection keep-alive;
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;
        }
}

As https://stackoverflow.com/questions/60199482/connecting-to-api-with-angular-webapp-using-minikube-and-kubernetes suggests I run:

kubectl -exec -ti webdeployment-5... -- bash

and then curl to service:

curl -v apiservice

command returned ip of apiservice:

 Expire in 3 ms for 1 (transfer 0x55922301af50)
*   Trying 10.105.32.96...
* TCP_NODELAY set

I checked my node IP:

kubectl get node -o wide

And when I hit NodeIP:NodePort I got login page (frontend files are loaded) enter image description here

Everything looks good, but when i try login i got 404: enter image description here

I also checked logs:

kubectl logs webdeployment-5...

And I got this: (error is marked yellow color) enter image description here

[error] 29#29: *1 open() "/usr/share/nginx/html/api/Account/Login"

Does it mean that proxy doesn't work properly?

According to: https://appdevmusings.com/azure-kubernetes-service-aks-deploying-angular-asp-net-core-and-sql-server-on-linux I added to Angular environment:

ApplicationConfig: {
    'API_URL': 'http://apiservice:5000/api'
    }

but it's propably not the issue.

Maybe someone know what isn't correct.

-- greygreg87
.net-core
angular
kubernetes
nginx

1 Answer

2/18/2021

Sometimes answear is closer than we think. After hours spent on solving this issue (I tried nginx Ingress - it also works, but for now I prefer different solution) I went back to simpliest exampe: connect frontend to backend But this time I did literally the same steps as in example, and it works.

This is my dockerfile:

FROM nginx
COPY WEB/dist /usr/share/nginx/html
RUN rm /etc/nginx/conf.d/default.conf
COPY WEB/proxy.conf /etc/nginx/conf.d
COPY WEB/cert /etc/nginx/cert
EXPOSE 80

As the example suggests I removed etc/nginx/conf.d/default.conf and replaced it by my own file (instead keep my configuration in sites-enabled folder):

upstream Backend {
    server apiservice;
}

server {
    listen 80;

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

    location /api {
        proxy_pass http://Backend;
    }
}
-- greygreg87
Source: StackOverflow