Creating a React Continuous Delivery Pipeline with GitLab CI/CD and Kubernetes

Implementing a continuous delivery pipeline for a React application ensures rapid, reliable, and automated deployment of updates. Combining GitLab CI/CD with Kubernetes provides a powerful platform for managing deployments at scale, improving efficiency, and reducing manual errors.

Overview of the Technology Stack

The core components of this pipeline include:

React: The frontend framework used for building user interfaces.
GitLab CI/CD: The continuous integration and deployment tool that automates testing and deployment processes.
Kubernetes: The container orchestration platform that manages deployment, scaling, and operation of application containers.

Setting Up Your React Application

Start by creating a React project using Create React App or your preferred setup. Ensure your application is ready for production by running tests and optimizing the build.

Example commands:

npx create-react-app my-app

cd my-app

npm run build

Configuring GitLab CI/CD

Create a .gitlab-ci.yml file in the root of your project. This file defines the stages, jobs, and scripts for your pipeline.

Sample .gitlab-ci.yml configuration:

stages:
  - build
  - deploy

build:
  stage: build
  image: node:14
  script:
    - npm install
    - npm run build
  artifacts:
    paths:
      - build/

deploy:
  stage: deploy
  image: google/cloud-sdk:latest
  script:
    - echo "Deploying to Kubernetes..."
    - kubectl apply -f k8s/deployment.yaml
  only:
    - main

Creating Kubernetes Deployment Files

Define your deployment and service configurations in YAML files within a k8s directory.

Example deployment.yaml:

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-app
        image: registry.gitlab.com/your-project/react-app:latest
        ports:
        - containerPort: 80

And service.yaml:

apiVersion: v1
kind: Service
metadata:
  name: react-service
spec:
  type: LoadBalancer
  selector:
    app: react-app
  ports:
    - protocol: TCP
      port: 80
      targetPort: 80

Integrating Docker for Containerization

Build a Docker image of your React app and push it to a container registry. Create a Dockerfile in your project root:

FROM node:14-alpine as build
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build

FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Build and push the image:

docker build -t registry.gitlab.com/your-project/react-app:latest .

docker push registry.gitlab.com/your-project/react-app:latest

Automating Deployment with GitLab CI/CD

Configure your pipeline to build the Docker image, push it to the registry, and apply Kubernetes manifests. Use GitLab CI/CD variables for credentials and registry URLs for security.

Example snippet in .gitlab-ci.yml:

deploy:
  stage: deploy
  image: docker:latest
  services:
    - docker:dind
  script:
    - docker login -u "$CI_REGISTRY_USER" -p "$CI_REGISTRY_PASSWORD" $CI_REGISTRY
    - docker build -t $CI_REGISTRY_IMAGE:latest .
    - docker push $CI_REGISTRY_IMAGE:latest
    - kubectl apply -f k8s/deployment.yaml
    - kubectl apply -f k8s/service.yaml
  only:
    - main

Scaling and Monitoring

Kubernetes allows you to scale your React application horizontally by increasing the number of replicas. Use commands like:

kubectl scale deployment/react-app --replicas=5

Implement monitoring using tools like Prometheus and Grafana to track application health and performance metrics.

Conclusion

Creating a React continuous delivery pipeline with GitLab CI/CD and Kubernetes streamlines the deployment process, enhances reliability, and enables rapid iteration. By automating build, test, and deployment steps, development teams can focus more on feature development and less on manual deployment tasks.

Table of Contents