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
2
Answers
I found out the answer myself. Here is my solution
Package.json
The package.json entry is given below
Angular Dockerfile
I put an nginx configuration file as below
}
The deployment file is shown below
The final artifact is ingress service
Rest of the configuration remains same. Please use this configuration and navigate to https://blog.dev and you get the output as shownBlog Website
Try to open the container port from deployment
deployment