Introduction:

In this article, we deploy a react application in civo cloud. In this project, Integration is automated and deployment is done manually. We use Docker, DockerHub, Civo, GitHub Actions, Kubernetes, Terraform, and Lens.

Source code:github.com/krishnarayapudi25/continuous-Int..

Step 1:Workflow

we create a react application using create react app which can be done easily and with less effort, now we create a Dockerfile for the react application and push both to GitHub and open the actions tab in the repository and create a workflow or select the most relevant workflow from the GitHub actions marketplace. Dockerfile

FROM node:14-alpine
ENV PATH = /app/node_modules/.bin:$PATH
WORKDIR /my-app
COPY package.json ./
RUN npm install
COPY .  ./
EXPOSE 3000
CMD ["npm" , "start"]

Workflow file

name: Docker Image CI

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:

  build:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2
    - name: docker login
      env:
        DOCKER_USER: ${{secrets.DOCKER_USER}}
        DOCKER_PASSWORD: ${{secrets.DOCKER_PASSWORD}}
      run: |
        docker login -u $DOCKER_USER -p $DOCKER_PASSWORD 
    - name: Build the Docker image
      run: docker build . --file Dockerfile --tag my-image-name:$(date +%s)

    - name: Docker Push
      run: docker push DockerHub_username/image-name

In this example, we publish to docker hub to make this action to work u need to add your docker Hub credentials as secrets in repository settings and pass them to the workflow file.

By now we successfully created a docker image and push it to the dockerHub

Step2:Infrastructure

We build the required infrastructure using terraform to perform this u need terraform installed and whichever cloud you are using should be configured. For this example, we are using civo cloud as our cloud provider.

We need to create a Kubernetes cluster for deployment and vpc to access those or control the access of the cluster. Below files will create a cluster and a vpc in civo cloud.

Providers.tf

terraform {
  required_version = ">= 0.13.0"

  required_providers {
    civo = {
        source = "civo/civo"
        version = "~> 1.0.13"
    }
  }
}

variable "civo_token"{

  type = string
}

provider "civo" {
  token = var.civo_token
  region = "LON1"
}

data "civo_size" "xsmall" {
    filter {
        key = "name"
        values = ["g4s.kube.xsmall"]
        match_by = "re"
    }
}

resource "civo_kubernetes_cluster" "react-application" {
    name = "react-application"
    applications = ""
    pools {

        size = element(data.civo_size.xsmall.sizes, 0).name
        node_count = 3
    }

    firewall_id = civo_firewall.fw_demo_1.id

}

resource "civo_firewall" "fw_demo_1" {
    name = "fw_demo_1"



}

resource "civo_firewall_rule" "k8s_http" {
    firewall_id = civo_firewall.fw_demo_1.id
    protocol = "tcp"
    start_port = "80"
    end_port = "80"
    cidr = ["0.0.0.0/0"]
    direction = "ingress"
    action = "allow"
    label = "k8s_http"

}

resource "civo_firewall_rule" "k8s_https" {
    firewall_id = civo_firewall.fw_demo_1.id
    protocol = "tcp"
    start_port = "443"
    end_port = "443"
    cidr = ["0.0.0.0/0"]
    direction = "ingress"
    action = "allow"
    label = "k8s_https"

}

resource "civo_firewall_rule" "k8s_api" {
    firewall_id = civo_firewall.fw_demo_1.id
    protocol = "tcp"
    start_port = "6443"
    end_port = "6443"
    cidr = ["0.0.0.0/0"]
    direction = "ingress"
    action = "allow"
    label = "k8s_api"

}

After creating the Kubernetes cluster download the kube config file from civo dashboard and add it to the Lens Ide now we deploy the cluster first we create Deployment.yaml and Service.yaml

Deployment.yaml

apiVersion: apps/v1
kind: Deployment
metadata:
  name: react-application
  labels:
    app: react-app
spec:
  replicas: 3
  selector:
    matchLabels:
      app: react-app
  template:
    metadata:
      labels:
        app: react-app
    spec:
      containers:
      - name: react-app
        image: krishnarayapudi25/react:latest
        ports:
        - containerPort: 3000

apiVersion: v1
kind: Service
metadata:
  name: react-app
spec:
  type: NodePort
  selector:
    app: react-app
  ports:
  - name: http
    port: 3000
    nodePort: 30020

Now your application is up and running.