Server Techno Lab: CI/CD pipeline in GitHub action and push to Docker image to docker-hub and publish application to vercel

Description: In this topic, I have explained how to setup CI/CD pipeline in GitHub action and push to Docker image to docker-hub and publish application to vercel

Goals: Below are the goals for this document

Building and publish the docker image to Docker-hub
Deploy updates to Vercel for every push and pull request

Check React Application in Local environment: Whenever we setup CI/CD pipeline with any framework make sure application must test on local environment

I have setup local docker container using below Dockerfile

# Fetching the image from the dockerhub
FROM harpalgohilon/reactsample AS development

# Declaring env
ENV NODE_ENV development

# Setting up the work directory
WORKDIR /react-app

# Installing dependencies
COPY ./package.json /react-app
RUN npm install

# Copying all the files in our project
COPY . .

# Starting our application
CMD npm start

Below is the screenshot for application on localhost

Upload project source code to GitHub: I have upload all source code include above stated Dockerfile in Github repository with .gitignore file

Github URL: https://github.com/harpal1990/reactrepo

.gitignore file

/node_modules

/npm-debug.log

/.pnp

.pnp.js

Setup Workflow in GitHub Action: To setup the CI/CD we are going to use GitHub Action workflow, which is platform of GitHub to automate the Deployment.

To setup the Github action navigate to Repository --> Actions button

Search for Node.js and configure it

Now paste below yaml file in place of auto-generated file

# This is a basic workflow to help you get started with Actions
name: React-Workflow

# Controls when the action will run.
on:
  # Triggers the workflow on push  request events but only for the main branch
  push:
    branches: [master]

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # This workflow contains multiple jobs
  build_test:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [18.x]

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
      - uses: actions/checkout@v2

      - name: setup node
        uses: actions/setup-node@master
        with:
          node-version: ${{ matrix.node-version }}

      # install applicaion dependencies
      - name: Install dependencies
        run: |
          npm install
      # build and test the apps

  push_to_Docker_Hub:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest
    # build docker image and push to docker hub
    # only if the app build and test successfully
    needs: [build_test]

    steps:
      - name: checkout repo
        uses: actions/checkout@v2

      - name: Set up QEMU
        uses: docker/setup-qemu-action@v1

      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v1

      - name: Login to DockerHub
        uses: docker/login-action@v1
        with:
          username: ${{ secrets.DOCKRUHUB_USERNAME }}
          password: ${{ secrets.DOCKERHUB_TOKEN }}

      - name: Build and push
        uses: docker/build-push-action@v2
        with:
          context: ./
          file: ./Dockerfile
          push: true
          tags: ${{ secrets.DOCKRUHUB_USERNAME }}/reactsample:latest

      - name: Run the image in a container
        uses: addnab/docker-run-action@v3
        with:
          image: ${{ secrets.DOCKRUHUB_USERNAME }}/reactsample:latest
          run: |
            echo "runing the docker image"
  push_to_vercel:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: amondnet/vercel-action@v20
        if: github.event_name == 'push' && github.ref == 'refs/heads/main'
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.ORG_ID}} 
          vercel-project-id: ${{ secrets.PROJECT_ID}}
          vercel-args: "--prod"

Define below variables in GitHub

DOCKRUHUB_USERNAME = It is the username for docker image

DOCKERHUB_TOKEN = Token generated from Docker hub --> Account --> Security

Vercel Configuration: Below are the configuration for Vercel VERCEL_TOKEN : Generate Token from Vercel account using URL and add it under Github

ORG_ID and Project_ID: To get the vercel org id you need perform below activities

Install vercel tool on system using below command

# npm i -g vercel

Run the vercel command from the project directory where your project is hosted
# vercel

It will asked for GitHub details to connect with the GitHub project

After all the command run successfully you will find the ORG_ID under .vercel folder project.json

After getting both the details kindly add both the variable on GitHub secrets. Now we can see 4 secretes added in GitHub

Note: Make sure all the things added under Secretes

Run the workflow by change in the source code: After perform all the changes now I am changing in the source code from the local system and commit it to GitHub master branch.

So I changed the default message in src/App.js file as follow. So As far as I changed in file and commit it to master branch workflow will run automatically