Architectures Medium

CI/CD Pipeline Architecture (GitHub Actions)

GitHub Actions pipeline structure with reusable workflows, matrix strategies, environment protection rules, and multi-stage deployment.

Open in Lab

github-actions yaml

Targets: HTML

Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CI/CD Pipeline Architecture</title>
<style>
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    background: #0a0a0f;
    color: #e2e8f0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    padding: 2rem 1rem;
  }
  .card {
    max-width: 780px;
    width: 100%;
    background: linear-gradient(135deg, rgba(34,211,238,0.04), rgba(59,130,246,0.04));
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 2rem;
    overflow: hidden;
  }
  .badge {
    display: inline-block;
    background: rgba(34,211,238,0.12);
    color: #22d3ee;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    margin-bottom: 0.75rem;
  }
  h1 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    background: linear-gradient(135deg, #22d3ee, #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .subtitle {
    color: #94a3b8;
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
    line-height: 1.5;
  }
  .section-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #22d3ee;
    margin-bottom: 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(34,211,238,0.15);
  }
  .tree {
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: 0.8rem;
    line-height: 1.7;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    overflow-x: auto;
  }
  .tree .file { color: #e2e8f0; }
  .tree .comment { color: #64748b; }
  .tree .dir { color: #22d3ee; }
  .tree .accent { color: #3b82f6; }
  .pipeline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1.5rem;
  }
  .p-node {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: 'SF Mono', monospace;
    font-size: 0.72rem;
    padding: 0.45rem 0.75rem;
    border-radius: 8px;
    white-space: nowrap;
  }
  .p-node.trigger {
    background: rgba(168,85,247,0.15);
    border: 1px solid rgba(168,85,247,0.3);
    color: #c084fc;
  }
  .p-node.lint {
    background: rgba(245,158,11,0.12);
    border: 1px solid rgba(245,158,11,0.25);
    color: #fbbf24;
  }
  .p-node.test {
    background: rgba(34,211,238,0.12);
    border: 1px solid rgba(34,211,238,0.25);
    color: #22d3ee;
  }
  .p-node.build {
    background: rgba(59,130,246,0.15);
    border: 1px solid rgba(59,130,246,0.3);
    color: #93c5fd;
  }
  .p-node.deploy-stg {
    background: rgba(34,197,94,0.12);
    border: 1px solid rgba(34,197,94,0.25);
    color: #4ade80;
  }
  .p-node.approval {
    background: rgba(239,68,68,0.12);
    border: 1px solid rgba(239,68,68,0.25);
    color: #f87171;
  }
  .p-node.deploy-prod {
    background: rgba(34,197,94,0.18);
    border: 1px solid rgba(34,197,94,0.35);
    color: #22c55e;
    font-weight: 600;
  }
  .p-arrow {
    color: #475569;
    font-size: 1rem;
    flex-shrink: 0;
  }
  .matrix-section {
    background: rgba(34,211,238,0.06);
    border: 1px solid rgba(34,211,238,0.15);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
  }
  .matrix-section h3 {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #22d3ee;
    margin-bottom: 0.75rem;
  }
  .matrix-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.5rem;
  }
  .matrix-cell {
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px;
    padding: 0.5rem;
    text-align: center;
    font-family: 'SF Mono', monospace;
    font-size: 0.72rem;
    color: #94a3b8;
  }
  .matrix-cell .val { color: #22d3ee; display: block; margin-top: 0.2rem; }
  .env-section {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
  }
  .env-card {
    flex: 1;
    min-width: 150px;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    padding: 0.75rem;
  }
  .env-card h4 {
    font-size: 0.78rem;
    margin-bottom: 0.35rem;
  }
  .env-card h4.stg { color: #fbbf24; }
  .env-card h4.prod { color: #f87171; }
  .env-card p {
    font-size: 0.7rem;
    color: #64748b;
    line-height: 1.4;
  }
  .source {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.06);
  }
  .source a {
    color: #64748b;
    font-size: 0.75rem;
    text-decoration: none;
    transition: color 0.2s;
  }
  .source a:hover { color: #22d3ee; }
</style>
</head>
<body>
<div class="card">
  <div class="badge">Architecture</div>
  <h1>CI/CD Pipeline (GitHub Actions)</h1>
  <p class="subtitle">Reusable workflows, matrix strategies, environment protection, and multi-stage deployment.</p>

  <div class="section-title">Workflow Structure</div>
  <div class="tree">
<span class="dir">.github/</span>
<span class="dir">  workflows/</span>
<span class="accent">    ├── ci.yml</span>            <span class="comment">(Lint + Test + Build)</span>
<span class="accent">    ├── deploy-staging.yml</span>
<span class="accent">    ├── deploy-production.yml</span>
<span class="accent">    ├── release.yml</span>       <span class="comment">(Semantic release)</span>
<span class="accent">    └── reusable/</span>
<span class="file">        ├── test.yml</span>      <span class="comment">(workflow_call)</span>
<span class="file">        └── build.yml</span>     <span class="comment">(workflow_call)</span>
<span class="dir">  actions/</span>
<span class="accent">    └── setup/</span>            <span class="comment">(Composite action)</span>
<span class="file">        └── action.yml</span>
<span class="file">  CODEOWNERS</span>
  </div>

  <div class="section-title">Pipeline Flow</div>
  <div class="pipeline">
    <span class="p-node trigger">PR</span>
    <span class="p-arrow">&rarr;</span>
    <span class="p-node lint">Lint</span>
    <span class="p-arrow">&rarr;</span>
    <span class="p-node test">Test (matrix)</span>
    <span class="p-arrow">&rarr;</span>
    <span class="p-node build">Build</span>
    <span class="p-arrow">&rarr;</span>
    <span class="p-node deploy-stg">Staging</span>
    <span class="p-arrow">&rarr;</span>
    <span class="p-node approval">Approval</span>
    <span class="p-arrow">&rarr;</span>
    <span class="p-node deploy-prod">Production</span>
  </div>

  <div class="section-title">Matrix Strategy</div>
  <div class="matrix-section">
    <h3>Test Jobs (4 parallel runs)</h3>
    <div class="matrix-grid">
      <div class="matrix-cell">Node 18<span class="val">ubuntu-latest</span></div>
      <div class="matrix-cell">Node 20<span class="val">ubuntu-latest</span></div>
      <div class="matrix-cell">Node 18<span class="val">macos-latest</span></div>
      <div class="matrix-cell">Node 20<span class="val">macos-latest</span></div>
    </div>
  </div>

  <div class="section-title">Environments</div>
  <div class="env-section">
    <div class="env-card">
      <h4 class="stg">Staging</h4>
      <p>Auto-deploy on merge to main. No approval required. Runs smoke tests post-deploy.</p>
    </div>
    <div class="env-card">
      <h4 class="prod">Production</h4>
      <p>Required reviewers (2). Wait timer: 5 min. Branch protection: main only. Rollback on failure.</p>
    </div>
  </div>

  <div class="source">
    <a href="https://docs.github.com/en/actions" target="_blank" rel="noopener">Source: GitHub Actions Docs</a>
    <a href="https://docs.github.com/en/actions/using-workflows/reusing-workflows" target="_blank" rel="noopener">Reusable Workflows</a>
    <a href="https://docs.github.com/en/actions/deployment/targeting-different-environments/using-environments-for-deployment" target="_blank" rel="noopener">Environments</a>
  </div>
</div>
</body>
</html>

CI/CD Pipeline Architecture (GitHub Actions)

A well-structured CI/CD pipeline automates the journey from code push to production deployment. GitHub Actions provides reusable workflows, matrix strategies, environment protection rules, and composite actions to build robust, maintainable pipelines.

Workflow Triggers

Workflows are triggered by events like push, pull_request, workflow_dispatch (manual), or schedule (cron). Use path filters and branch filters to control when workflows run:

on:
  pull_request:
    branches: [main]
    paths: ['src/**', 'package.json']

Reusable Workflows

Extract common jobs into reusable workflows with workflow_call. This eliminates duplication across CI, staging, and production workflows:

jobs:
  test:
    uses: ./.github/workflows/reusable/test.yml
    with:
      node-version: '20'
    secrets: inherit

Matrix Strategies

Run tests across multiple Node.js versions, operating systems, or configurations in parallel:

strategy:
  matrix:
    node: [18, 20]
    os: [ubuntu-latest, macos-latest]

Environment Protection

GitHub Environments provide required reviewers, wait timers, and deployment branch rules to gate production deployments.

Composite Actions

Bundle multiple steps into a single reusable action for common setup tasks (installing dependencies, caching, etc.).

Code

CI/CD Pipeline Architecture (GitHub Actions)

Workflow Triggers

Reusable Workflows

Matrix Strategies

Environment Protection

Composite Actions

Learn More