Complete CI/CD Implementation Guide for Modern Web Applications
Complete CI/CD Implementation Guide for Modern Web Applications
Continuous Integration and Continuous Deployment (CI/CD) are essential practices for modern software development. They automate testing, building, and deployment processes, reducing errors and speeding up delivery. This guide will help you implement CI/CD for your web applications.
What is CI/CD?
CI (Continuous Integration) - Automatically build and test code changes when developers push to the repository.
CD (Continuous Deployment) - Automatically deploy code changes to production after passing all tests.
Benefits of CI/CD
CI/CD Pipeline Overview
A typical CI/CD pipeline includes:
1. Source - Code repository (GitHub, GitLab, etc.)
2. Build - Compile and build the application
3. Test - Run automated tests
4. Deploy - Deploy to staging/production
Implementation with GitHub Actions
Step 1: Create GitHub Actions Workflow
Create .github/workflows/ci-cd.yml in your repository:
name: CI/CD Pipeline
on:
push:
branches: [ main, develop ]
pull_request:
branches: [ main ]
jobs:
test:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [18.x, 20.x]Implementation with GitLab CI
Create .gitlab-ci.yml in your repository root:
stages:
- test
- build
- deploy
variables:
NODE_VERSION: "18"
cache:
paths:
- node_modules/
test:
stage: test
image: node:$NODE_VERSIONDocker-based CI/CD Pipeline
For containerized applications:
name: Docker CI/CD
on:
push:
branches: [ main ]
pull_request:
branches: [ main ]
jobs:
build-and-push:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Set up Docker BuildxAutomated Testing in CI/CD
Unit Tests
- name: Run unit tests
run: npm run test:unit
env:
CI: trueIntegration Tests
- name: Run integration tests
run: npm run test:integration
env:
DATABASE_URL: ${{ secrets.TEST_DATABASE_URL }}E2E Tests
- name: Run E2E tests
uses: cypress-io/github-action@v5
with:
start: npm start
wait-on: 'http://localhost:3000'
wait-on-timeout: 120Environment Management
Using Secrets
Store sensitive data in GitHub Secrets or GitLab CI/CD Variables:
1. GitHub: Settings → Secrets and variables → Actions
2. GitLab: Settings → CI/CD → Variables
Environment-specific Configurations
deploy-staging:
environment:
name: staging
url: https://staging.example.com
variables:
NODE_ENV: staging
API_URL: https://api-staging.example.com
deploy-production:
environment:
name: production
url: https://example.com
variables:
NODE_ENV: production
API_URL: https://api.example.comDeployment Strategies
1. Blue-Green Deployment
Deploy new version alongside old, then switch traffic:
- name: Blue-Green Deployment
run: |
docker run -d --name app-green -p 3001:3000 myapp:new
# Health check
curl http://localhost:3001/health
# Switch traffic
docker stop app-blue
docker rm app-blue
docker rename app-green app-blue2. Rolling Deployment
Gradually replace old instances:
- name: Rolling Deployment
run: |
docker-compose up -d --scale app=3 --no-deps app
docker-compose up -d --scale app=2 --no-deps app
docker-compose up -d --scale app=1 --no-deps app3. Canary Deployment
Deploy to small subset first:
- name: Canary Deployment
run: |
# Deploy to 10% of traffic
docker run -d --name app-canary -p 3002:3000 myapp:new
# Monitor metrics
# If successful, deploy to 100%Monitoring and Notifications
Slack Notifications
- name: Notify Slack
uses: 8398a7/action-slack@v3
with:
status: ${{ job.status }}
text: 'Deployment completed!'
webhook_url: ${{ secrets.SLACK_WEBHOOK }}
if: always()Email Notifications
- name: Send Email
uses: dawidd6/action-send-mail@v3
with:
server_address: smtp.gmail.com
server_port: 465
username: ${{ secrets.EMAIL_USERNAME }}
password: ${{ secrets.EMAIL_PASSWORD }}
subject: 'Deployment Status: ${{ job.status }}'
to: team@example.com
from: CI/CD BotBest Practices
1. Fast Feedback Loops
Keep build times under 10 minutes for quick feedback.
2. Parallel Jobs
Run tests in parallel to speed up pipelines:
strategy:
matrix:
test-suite: [unit, integration, e2e]3. Caching
Cache dependencies to speed up builds:
- uses: actions/setup-node@v3
with:
cache: 'npm'4. Security Scanning
Add security checks to your pipeline:
- name: Run security audit
run: npm audit --audit-level=moderate5. Code Quality
Enforce code quality standards:
- name: Run linter
run: npm run lint
- name: Check code coverage
run: npm run test:coverageTroubleshooting Common Issues
Build Failures
Deployment Failures
Test Failures
Conclusion
Implementing CI/CD significantly improves your development workflow by:
Start with a simple pipeline and gradually add more features as your team grows. Remember to monitor your pipelines and continuously improve them based on your team's needs.
Share this article
Enjoyed this article?
Support our work and help us create more free content for developers.
Stay Updated
Get the latest articles and updates delivered to your inbox.