Setup Github Action to deploy angular web app to Azure Kubernetes (AKS)

Ha Doan
2 min readSep 19, 2021

--

Follow this article https://hadoan.medium.com/setup-github-actions-to-deploy-angular-web-app-to-gcp-kubernetes-engine-gke-8e8ad15d6f3d

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

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

  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 AKSconfiguration in Github Secrets

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

Config secrets as below

  • AZURE_CREDENTIALS

Get this AKS Credential value by run this command

az ad sp create-for-rbac — name “project-name” — role contributor — scopes /subscriptions/your-azure-subscription-id/resourceGroups/your-resource-group — sdk-auth

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

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

  • Config GKE environment.
  • Config node environment, install angular cli/yarn, and build angular
  • Copy Dockerfile and nginx from source code to built folder.
  • Build angular image
  • Push angular image to container registry and restart k8s.

That’s all you need, please comment if you have any questions!

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

--

--

No responses yet

Write a response