Implementing Continuous Deployment for React Apps on Kubernetes Using Jenkins and GitLab CI

Implementing continuous deployment (CD) for React applications on Kubernetes can significantly improve your development workflow, enabling faster releases and more reliable updates. Combining Jenkins and GitLab CI offers a powerful solution to automate the deployment process seamlessly from code commit to live environment.

Prerequisites and Setup

Before starting, ensure you have the following components set up:

A Kubernetes cluster with kubectl configured
GitLab repository with your React app code
Jenkins server with necessary plugins (Kubernetes, GitLab, Docker)
Docker registry for container images
Access to GitLab CI variables and Jenkins credentials

Configuring GitLab CI/CD

Create a .gitlab-ci.yml file in your repository root to define the CI/CD pipeline stages. This file will include build, test, image creation, and deployment steps.

stages:
  - build
  - test
  - deploy

variables:
  IMAGE_TAG: "$CI_REGISTRY_IMAGE:$CI_COMMIT_SHA"

build:
  stage: build
  script:
    - npm install
    - npm run build
    - docker build -t $IMAGE_TAG .
    - docker push $IMAGE_TAG
  only:
    - main

test:
  stage: test
  script:
    - npm test
  only:
    - main

deploy:
  stage: deploy
  script:
    - echo "Trigger Jenkins job for deployment"
    - curl -X POST -u "$JENKINS_USER:$JENKINS_TOKEN" "$JENKINS_URL/job/DeployReactApp/buildWithParameters?IMAGE_TAG=$CI_REGISTRY_IMAGE:$CI_COMMIT_SHA"
  only:
    - main

Setting Up Jenkins for Deployment

Configure a Jenkins job named DeployReactApp that accepts IMAGE_TAG as a parameter. This job will handle deploying the new container image to Kubernetes.

In the Jenkins job configuration:

Add a parameter for IMAGE_TAG
Use the Kubernetes plugin or kubectl commands to update the deployment:

kubectl set image deployment/react-app react-container=$IMAGE_TAG --namespace=default

This command updates the deployment with the latest image, triggering a rolling update in Kubernetes.

Creating Kubernetes Deployment Configuration

Define your deployment in a YAML file, e.g., react-deployment.yaml. Make sure it references your Docker image and is ready for updates.

apiVersion: apps/v1
kind: Deployment
metadata:
  name: react-app
spec:
  replicas: 3
  selector:
    matchLabels:
      app: react-app
  template:
    metadata:
      labels:
        app: react-app
    spec:
      containers:
      - name: react-container
        image: yourregistry/your-react-app:latest
        ports:
        - containerPort: 80

Update the image tag dynamically during deployment to ensure the latest build is used.

Automating the Deployment Workflow

With the setup complete, every code commit to the main branch triggers GitLab CI, which builds and pushes the Docker image, then calls Jenkins to perform the deployment update. This creates a continuous deployment pipeline that minimizes manual intervention.

Best Practices and Tips

To ensure a robust deployment process, consider the following:

Use version tags instead of latest for better control
Implement health checks in your Kubernetes deployment
Configure rollback strategies in case of deployment failures
Secure your CI/CD credentials and tokens
Monitor deployment status and logs for troubleshooting

Conclusion

Automating continuous deployment for React applications on Kubernetes using Jenkins and GitLab CI enhances development efficiency and reliability. By integrating these tools, teams can deliver updates faster, maintain higher quality standards, and streamline their deployment workflows.

Table of Contents