How to Set Up a CI/CD Pipeline for Seamless Web App Deployment

Continuous Integration and Continuous Deployment (CI/CD) streamline the development process by automating testing, building, and deployment. Whether you're using GitHub Actions, GitLab CI, or Jenkins, setting up a CI/CD pipeline improves efficiency, reduces errors, and ensures fast, reliable deployments.

1. Why CI/CD Matters

✅ Automates testing & deployment → No more manual processes
✅ Ensures code quality → Runs tests before deployment
✅ Reduces downtime → Faster rollback & hotfixes
✅ Speeds up development → Developers focus on coding, not deployments

1. CI/CD Pipeline Overview

A CI/CD pipeline automates code integration, testing, and deployment in four key stages:

1️⃣ Commit → Developers push changes to the repository
2️⃣ Build → CI tool compiles & packages the app
3️⃣ Test → Runs unit, integration, and security tests
4️⃣ Deploy → Deploys the app to a staging or production server

Let’s explore how to set up a CI/CD pipeline using GitHub Actions, GitLab CI/CD, and Jenkins.

1. CI/CD with GitHub Actions

Step 1: Create a .github/workflows/deploy.yml file

name: Deploy Web App

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout Code
        uses: actions/checkout@v3

      - name: Install Dependencies
        run: npm install

      - name: Run Tests
        run: npm test

      - name: Build Project
        run: npm run build

      - name: Deploy to Server
        uses: appleboy/scp-action@master
        with:
          host: ${{ secrets.SERVER_IP }}
          username: ${{ secrets.SSH_USER }}
          password: ${{ secrets.SSH_PASSWORD }}
          source: "build/"
          target: "/var/www/app"

Step 2: Configure GitHub Secrets

1. Go to your GitHub repo

2. Navigate to Settings → Secrets and Variables → Actions

3. Add secrets:

SERVER_IP → Your server's IP address

SSH_USER → SSH username

SSH_PASSWORD → SSH password

✅ Now, every push to the main branch will trigger a build, test, and deploy automatically! 🚀

1. CI/CD with GitLab CI/CD

Step 1: Create a .gitlab-ci.yml file

stages:
  - build
  - test
  - deploy

build:
  stage: build
  script:
    - npm install
    - npm run build

test:
  stage: test
  script:
    - npm test

deploy:
  stage: deploy
  script:
    - scp -r build/* $SSH_USER@$SERVER_IP:/var/www/app
  only:
    - main

Step 2: Add Environment Variables in GitLab

1. Go to Settings → CI/CD → Variables

2. Add:

SSH_USER → Your SSH username

SERVER_IP → Your server IP

✅ Now, GitLab CI/CD automates deployment when code is pushed to main.

1. CI/CD with Jenkins

Step 1: Install Required Jenkins Plugins

1. Install Jenkins and install these plugins:

Git (for repo integration)

Pipeline (for defining workflows)

SSH Pipeline Steps (for remote deployment)

Step 2: Create a Jenkinsfile in the Project

pipeline {
  agent any

  stages {
    stage('Checkout') {
      steps {
        git branch: 'main', url: 'https://github.com/your-repo.git'
      }
    }

    stage('Build') {
      steps {
        sh 'npm install'
        sh 'npm run build'
      }
    }

    stage('Test') {
      steps {
        sh 'npm test'
      }
    }

    stage('Deploy') {
      steps {
        sshPublisher(
          publishers: [
            sshPublisherDesc(
              configName: 'MyServer',
              transfers: [
                sshTransfer(
                  sourceFiles: 'build/**',
                  remoteDirectory: '/var/www/app'
                )
              ]
            )
          ]
        )
      }
    }
  }
}

Step 3: Configure Jenkins Job

1. Open Jenkins Dashboard

2. Click New Item → Pipeline

3. Under Pipeline, select Pipeline script from SCM

4. Set repository URL (https://github.com/your-repo.git)

5. Save and run

✅ Jenkins now builds, tests, and deploys automatically!

1. Best Practices for CI/CD Pipelines

✅ Run tests before deployment to catch bugs early
✅ Use environment variables instead of hardcoded credentials
✅ Enable rollback mechanisms for safer deployments
✅ Use Docker & Kubernetes for scalable microservices
✅ Monitor deployments with logs & alerts

Final Thoughts

Setting up a CI/CD pipeline with GitHub Actions, GitLab CI/CD, or Jenkins enables faster, automated, and reliable deployments. 🚀

Which one should you use?

✔ GitHub Actions → Best for GitHub-hosted projects
✔ GitLab CI/CD → Built-in for GitLab users
✔ Jenkins → Highly customizable for complex workflows

I am open to collaboration on projects and work. Let's transform ideas into digital reality.

CI/CD #DevOps #Automation #GitHubActions #GitLabCI #Jenkins