Automating Angular Deployment on Kubernetes with CI/CD Pipelines

Deploying Angular applications on Kubernetes can be streamlined using CI/CD pipelines. Automating this process ensures faster updates, consistent deployments, and reduces manual errors. This article guides you through setting up an automated deployment pipeline for Angular apps on Kubernetes.

Understanding the Deployment Workflow

The deployment process involves building the Angular application, containerizing it, pushing the image to a registry, and updating the Kubernetes deployment. Automating these steps with CI/CD tools like Jenkins, GitLab CI, or GitHub Actions enhances efficiency and reliability.

Prerequisites

Angular CLI installed and configured
Docker installed on your build machine
Kubernetes cluster running (e.g., Minikube, GKE, AKS)
Access to a container registry (Docker Hub, GitHub Container Registry)
CI/CD tool setup (e.g., GitHub Actions, GitLab CI)

Step 1: Building the Angular Application

Configure your CI/CD pipeline to run the Angular build command. Ensure production optimizations are enabled for a smaller, efficient build.

Sample command:

ng build --prod

Step 2: Containerizing the Application

Create a Dockerfile in your project root:

FROM nginx:alpine
COPY /dist/your-angular-app /usr/share/nginx/html
EXPOSE 80

Build the Docker image in your CI pipeline:

docker build -t your-registry/your-angular-app:latest .

Step 3: Pushing the Image to Registry

Authenticate with your container registry and push the image:

docker push your-registry/your-angular-app:latest

Step 4: Updating Kubernetes Deployment

Use kubectl or your deployment tool to update the running application with the new image. For example:

kubectl set image deployment/your-deployment your-container=your-registry/your-angular-app:latest

Automating the Process with CI/CD

Integrate these steps into your CI/CD pipeline. For example, a GitHub Actions workflow could look like this:

name: Angular Deployment

on:
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '14'
      - name: Install dependencies
        run: npm install
      - name: Build Angular app
        run: npm run build --prod
      - name: Build Docker image
        run: docker build -t your-registry/your-angular-app:latest .
      - name: Log in to registry
        run: echo "${{ secrets.REGISTRY_PASSWORD }}" | docker login -u "${{ secrets.REGISTRY_USERNAME }}" --password-stdin
      - name: Push Docker image
        run: docker push your-registry/your-angular-app:latest
      - name: Deploy to Kubernetes
        run: kubectl set image deployment/your-deployment your-container=your-registry/your-angular-app:latest
        env:
          KUBECONFIG: ${{ secrets.KUBECONFIG }}

Conclusion

Automating Angular deployment on Kubernetes with CI/CD pipelines accelerates development cycles and improves deployment consistency. By integrating build, containerization, and deployment steps, teams can focus more on development and less on manual deployment tasks.

Table of Contents