Deploying Docker Image of Angular in Azure Kubernetes Service (AKS)

In this project, We'll explore how can we deploy an ANGULAR Docker Image in Azure Kubernetes Service using the Azure CI/CD Pipeline.

Kubernetes is an open-source container orchestration platform. Orchestration is all about automating deployments, scaling, and managing containers.

Pre-requisities

• An Azure account.

• An Angular application ready for deployment.

• Basic knowledge of Azure DevOps and Azure Portal

• Basic knowledge of GitHub and git commands

I have already build and push docker image to dockerhub using Azure pipeline

trigger:
- main

resources:
- repo: self

variables:
  tag: '$(Build.BuildId)'

stages:
- stage: Build
  displayName: Build image
  jobs:
  - job: Build
    displayName: Build
    pool:
      vmImage: ubuntu-latest
    steps:
    - task: Docker@2
      displayName: Build an image
      inputs:
        containerRegistry: 'Docker'
        repository: 'thesamiksha/angular-app'
        command: 'buildAndPush'
        Dockerfile: '**/Dockerfile'
        tags: |
          $(tag)

Set Up the Kubernetes Cluster

we have created a Docker image of the Angular application and pushed it to the Docker Hub. The image can be accessed from anywhere.

How let's see how you can take this application and run it in a Kubernetes Cluster.

Installation

Let's install the Kubernetes command line utility, kubectl.

curl -LO "https://dl.k8s.io/release/$(curl -L -s https://dl.k8s.io/release/stable.txt)/bin/linux/amd64/kubectl"
chmod +x kubectl
sudo mv kubectl /usr/local/bin
kubectl version --client // check Kubernetes Client version

Set Up the Kubernetes Cluster

To deploy our application, we need to set up a Kubernetes Cluster that will run our pods and services. There are lot of clusters provided by multiple cloud providers like Google, Amazon and Microsoft. For this application, we will use kubeconfig file.

Create the Docker-Secret

kubectl --kubeconfig=./dev.yaml(kubeconfig file name) create secret docker-registry docker-secret \
  --docker-server=docker.io \
  --docker-username=your-username \
  --docker-password=your-password \
  --docker-email=your-email \
  --namespace=metans

Write the YAML Configurations

Now, let's write our namespace, deployment and service configurations in YAML files.

First, let's see how to create namespace

Namespace: A logical partition within a Kubernetes cluster to create multiple virtual clusters within the same physical cluster.

// nano namespc.yaml
kind: Namespace
apiVersion: v1
metadata:
  name: metans
  labels:
    name: testns

Now, let's see how to create the deployment yaml file

// nano angular-deployment.yaml
kind: Deployment
apiVersion: apps/v1
metadata:
  name: ang-dep
  namespace: metans
spec:
  replicas: 1
  selector:
    matchLabels:
      name: angular-test
  template:
    metadata:
      labels:
        name: angular-test
    spec:
      containers:
        - name: angular-con
          image: thesamiksha/angular-app:13533
          ports:
            - containerPort: 80
      imagePullSecrets:
        - name: docker-secret

Now, let's write our service.yaml

// nano servicetest.yaml
kind: Service
apiVersion: v1
metadata:
  name: servicetest
  namespace: metans
spec:
  ports:
    - port: 80
      targetPort: 80
  selector:
    name: angular-test
  type: ClusterIP

Create the Pod, Deployment, and Service

Use kubectl apply to apply the above configurations and create the namespace, pods, deployment, and service.

Since we are using kubeconfig file we need to use that file while creating pods

kubectl --kubeconfig=./dev.yaml(kubeconfig file name) apply -f namespc.yaml

kubectl --kubeconfig=./dev.yaml(kubeconfig file name) apply -f angular-deployment.yaml

kubectl --kubeconfig=./dev.yaml(kubeconfig file name) apply -f servicetest.yamlCheck your pods, deployments, and services using the kubectl get commands.

Check your pods, deployments, and services using the kubectl get commands.

Now, you can forward your port 80 to 8081

kubectl --kubeconfig=./dev.yaml port-forward svc/servicetest 8081:80 -n metans

The Angular should be running now as shown below. Test the app to confirm it is running as it should.

We’ve successfully deployed an Angular application on Kubernetes on local machine

Now, we'll automate our application using Azure pipeline

Create Service connection

We need to create new service connection to integrate our application with kubernetes.

Navigate to the Azure devops pipeline and add stage to auto deploy our application on Azure Kubernetes.

trigger:
- main

resources:
- repo: self

variables:
  tag: '$(Build.BuildId)'

stages:
- stage: Build
  displayName: Build image
  jobs:
  - job: Build
    displayName: Build
    pool:
      vmImage: ubuntu-latest
    steps:
    - task: Docker@2
      displayName: Build an image
      inputs:
        containerRegistry: 'Docker'
        repository: 'thesamiksha/angular-app'
        command: 'buildAndPush'
        Dockerfile: '**/Dockerfile'
        tags: |
          $(tag)
    - task: Kubernetes@1
      displayName: 'Task: Deploy to Kubernetes'
      inputs:
        connectionType: 'Kubernetes Service Connection'
        kubernetesServiceEndpoint: 'k8s-integrate'
        namespace: 'metans'
        command: 'set'
        arguments: 'image deployment/angular-deployment angular-con=thesamiksha/technofex:$(tag)'