Setup Github Actions to deploy angular web app to GCP Kubernetes Engine (GKE)

Gitops + GCP

In this sample, I’ll deploy a angular web app to GKE using Github Actions CICD and host the angular app in NGINX. I setup that whenever I commit a new change to angular-gke-deployment branch, Github triggers build and deploys new build to GKE.

Sample source-code: https://github.com/hadoan/handson-projects/tree/angular-gke-deployment/angular-gke

1. In root angular folder, create a dockerfile for NGINX and nginx config file

Dockerfile

Nginx.config

2. Create angular app deployment and service in Kubernetes

3. Setup GKE configuration in Github Secrets

Create new repository scret in Actions secrets (github.com),

Config secrets as below

Github Actions secrets

• GET_GKE_CRED_CLUSTER_LOCATION: location of your GKE, e.g: asia-southeast1-b
• GET_GKE_CRED_CLUSTER_NAME: name of your GKE cluster
• GET_GKE_CRED_PROJECT: project name in GCP
• GET_GKE_CRED_SA_KEY_JSON: Json key of your IAM, following is the steps to download Json key

In Google Cloud Console, go to IAM & Admin \ Service Accounts, reate a new service account, then go to Keys\Add Key and roles for new service account as below

Download JSON Key and config the value in Github Actions Secret

4. Create .github folder as in this link, edit file in ./.github/workflows/gke-deployment.yml

yaml to build angular

As you can see in the script, there are some steps to build an angular app

• Config GKE environment using get-kubeconfig action.
• Config node environment, install angular cli/yarn, and build angular
• Copy Dockerfile and nginx
• Build angular image

That’s all you need, have fun with Github Actions!