CI/CD Deployment Pipeline

SFCC Headless Pro - Interactive Pipeline Visualization

Pipeline Overview

๐Ÿ“
Code Push
Instant
โ†’
โœจ
Lint & Format
45s
โ†’
๐Ÿงช
Unit Tests
2m
โ†’
๐Ÿ”จ
Build SSR
3m
โ†’
๐ŸŽญ
E2E Tests
5m
โ†’
โšก
Performance
2m
โ†’
๐Ÿš€
Deploy Staging
1m
โ†’
โœ…
Approve
Manual
โ†’
๐ŸŒ
Deploy Prod
2m
โ†’
๐ŸŒ
CDN Invalidate
30s

Environment Architecture

๐Ÿ’ป Development (Local)

โš™๏ธ
Node.js Local Dev Server
Full source maps & debugging
โ™ป๏ธ
Hot Module Replacement
Instant code updates
๐Ÿ”—
SCAPI Proxy to Sandbox
Direct SFCC integration
npm start โ†’ localhost:3000

๐Ÿข Staging (Managed Runtime)

โšก
Auto-Deploy on Push
Staging branch โ†’ Live
๐Ÿ”Œ
Staging SFCC Instance
Sandbox environment
๐Ÿงช
E2E Tests Run Here
Real environment validation
staging-{project}.mobify-storefront.com

๐ŸŒŸ Production (Managed Runtime)

๐Ÿ›ก๏ธ
Manual Promotion from Staging
Gated deployment
๐ŸŒ
CDN Edge Caching
Global distribution
๐Ÿ“ˆ
Auto-Scaling Lambda
Handles traffic spikes
www.client-store.com

Quality Gates

๐Ÿ”€ Pre-Merge Gates

ESLint: 0 errors, 0 warnings
Prettier: All files formatted
Jest: 100% passing, >80% coverage
TypeScript: No type errors
Bundle size: < 300KB initial JS

๐Ÿงช Pre-Staging Gates

Playwright E2E: All critical paths
Lighthouse Performance: > 80 score
Lighthouse Accessibility: > 90
SCAPI integration: Endpoints OK
SLAS auth: Guest + registered flows

๐Ÿš€ Pre-Production Gates

Staging: 48hr burn-in
Load test: 2x peak traffic
Security scan: No critical CVEs
Manual QA sign-off
Rollback plan verified

GitHub Actions Workflow

name: Deploy SFCC Headless
on:
  push:
    branches: [main, staging]
  pull_request:
    branches: [main]

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci
      - run: npm run lint

  test:
    needs: lint
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci
      - run: npm test -- --coverage

  build:
    needs: test
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci
      - run: npm run build

  e2e:
    needs: build
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npx playwright install
      - run: npm run test:e2e

  lighthouse:
    needs: build
    runs-on: ubuntu-latest
    steps:
      - run: npx lhci autorun

  deploy-staging:
    needs: [e2e, lighthouse]
    if: github.ref == 'refs/heads/staging'
    runs-on: ubuntu-latest
    steps:
      - run: npx pwa-kit-dev push --target staging

  deploy-production:
    needs: [e2e, lighthouse]
    if: github.ref == 'refs/heads/main'
    runs-on: ubuntu-latest
    environment: production
    steps:
      - run: npx pwa-kit-dev push --target production

Monitoring & Rollback

System Uptime
99.9%
All systems operational
Error Rate (24h)
0.02%
Within acceptable threshold
Avg Response Time
145ms
P95: 320ms, P99: 890ms
Error Rate Trend
Response Time (P50, P95, P99)
Request Volume (Req/sec)

๐Ÿ”„ Rollback Procedure

If critical issues are detected in production, an automatic or manual rollback can be initiated. This promotes the previous stable bundle from the CDN, rolling back all changes within seconds.

Process: Rollback Button โ†’ CDN Promotion โ†’ Health Checks โ†’ Notify Team