Unable to access deployed Angular application on Google cloud
Tags: angular, ingressnginx, kubernetes, docker
Published: 2021-12-04 12:42:49

I have developed my project on Google cloud using Nodejs,Angular, MongoDB and Express. I have successfully built the Authentication part for Express and Node.js. Now I am trying to integrate Angular. I have setup Ingress-NGINX using Google cloud and am utilizing Google cloud shell to create the code.

I followed the steps below for setup

Steps for setting up Ingress-NGINX on Google Cloud

1) Create a project blog-dev
2) Create cluster blog-dev with 3 N1-g1 small instances in us-central1-c zone
3) Navigate to https://kubernetes.github.io/ingress-nginx/deploy/#gce-gke
4) On the Google cloud account, open the cloud shell and navigate to BPB_MEAN_Framework directory in terminal
5) Execute the command `gcloud init`, reinitialize the cluster, select the account, project and the region
6) Execute the command `gcloud container clusters get-credentials blog-dev`
7) Execute the command `kubectl apply -f https://raw.githubusercontent.com/kubernetes/ingress-nginx/controller-v1.0.3/deploy/static/provider/cloud/deploy.yaml` to configure ingress-nginx
8) Go to Network Services -> Load Balancing and check that the Load Balancer has got created. Note the ip of the Load Balancer
Open the hosts.ini file and update as shown below 130.211.113.34 blog.dev 
8.1) `kubectl create secret generic jwt-secret --from-literal=JWT_KEY=asdf`
9) Run scaffold dev
10) Go to http://blog.dev in a browser and get the 'Privacy Error' page. Click 'Advanced' here
Type thisisunsafe on keyboard
The various files are listed below

Listed below is the Kubernetes deployment yaml

```
`apiVersion: apps/v1
kind: Deployment
metadata: 
  name: client-depl
spec: 
  replicas: 1
  selector: 
    matchLabels:
      app: client
  template: 
    metadata:
      labels:
        app: client 
    spec:
      containers:
        - name: client
          image: us.gcr.io/blog-dev-326403/client:project-latest
---
apiVersion: v1
kind: Service
metadata:
  name: client-srv
spec:
  selector:
    app: client
  ports: 
    - name: client
      protocol: TCP
      port: 4200
      targetPort: 4200`    

```
Listed below is the Ingress service

```
`apiVersion: extensions/v1beta1
kind: Ingress
metadata: 
  name: ingress-service
  annotations:
    kubernetes.io/ingress.class: nginx
    nginx.ingress.kubernetes.io/use-regex: 'true'
spec:
  rules:
    - host: blog.dev
      http:
        paths:
          - path: /api/users/?(.*)
            backend:
              serviceName: auth-srv
              servicePort: 3100
          - path: /?(.*)
            backend:
              serviceName: client-srv
              servicePort: 4200`

```
Listed below is the Skaffold yaml

```
`apiVersion: skaffold/v2alpha3
kind: Config
deploy:
  kubectl: 
    manifests:
      - ./infra/k8s/*
build:
  #local:
   # push: false
  googleCloudBuild:
    projectId: blog-dev-326403
  artifacts:
    - image: us.gcr.io/blog-dev-326403/auth
      context: auth
      docker:
        dockerfile: Dockerfile
      sync:
        manual:
          - src: 'src/**/.ts'
            dest: .
    - image: us.gcr.io/blog-dev-326403/client
      context: client
      docker:
        dockerfile: Dockerfile
      sync:
        manual:
          - src: 'src/**/.ts'
            dest: .`

```
The angular folder structure is shown below Angular project folder structure

I added the Google cloud Load Balancer ip followed by blog.dev in hosts.ini file.

When I run skaffold dev, there are no errors. When I try to access blog.dev, I get a 502 bad gateway.

When I navigate to client directory and type npm start and access preview in Google cloud shell, I get my website as shown Application in preview mode in Google cloud Please help...This is a showstopper for me