Unable to access deployed Angular application on Google cloud - node.js

Question

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
Create a project blog-dev
Create cluster blog-dev with 3 N1-g1 small instances in us-central1-c zone
Navigate to https://kubernetes.github.io/ingress-nginx/deploy/#gce-gke
On the Google cloud account, open the cloud shell and navigate to BPB_MEAN_Framework directory in terminal
Execute the command
gcloud init, reinitialize the cluster, select the account, project and the region
Execute the command gcloud container clusters get-credentials blog-dev
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
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
Run scaffold dev
Go to http://blog.dev/api/users/currentuser 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

Answer 1

Try to open the container port from deployment
ports:
- containerPort: 80
deployment
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
ports:
- containerPort: 4200

Answer 2

I found out the answer myself. Here is my solution
Package.json
The package.json entry is given below
"prod": "ng build --prod",
Angular Dockerfile
FROM node:16.4.0 as build
WORKDIR /app
COPY package.json ./
RUN npm install
COPY . .
RUN npm run prod
FROM nginx:1.19
COPY ./nginx/nginx.conf /etc/nginx/nginx.conf
COPY --from=build /app/dist/Angular-Mean/ /usr/share/nginx/html
I put an nginx configuration file as below
worker_processes 1;
events {
worker_connections 1024;
}
http {
server {
listen 80;
server_name localhost;
root /usr/share/nginx/html;
index index.html index.htm;
include /etc/nginx/mime.types;
gzip on;
gzip_min_length 1000;
gzip_proxied expired no-cache no-store private auth;
gzip_types text/plain text/css application/json application/javascript
application/x-javascript text/xml application/xml application/xml+rss
text/javascript;
location / {
try_files $uri $uri/ /index.html;
}
}
}
The deployment file is shown below
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
ports:
- containerPort: 4200
---
apiVersion: v1
kind: Service
metadata:
name: client-srv
spec:
selector:
app: client
type: LoadBalancer
ports:
- name: client
protocol: TCP
port: 80
targetPort: 80
nodePort: 31000
The final artifact is 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: 80
Rest of the configuration remains same. Please use this configuration and navigate to https://blog.dev and you get the output as shownBlog Website