DEV Community

pinakinc
pinakinc

Posted on

Unable to access deployed Angular application on Google cloud

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` 
Enter fullscreen mode Exit fullscreen mode

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` 
Enter fullscreen mode Exit fullscreen mode

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: .` 
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)