Frontend CI/CD & Deployment 2025 — GitHub Actions, Turborepo, Vercel, Netlify, Cloudflare, Preview, Canary, Feature Flags, SLSA/SBOM (S6 E12)

Prologue — CI/CD is the platform

In 2016 CI/CD meant "Jenkins runs tests, then rsync." In 2026 your pipeline is your deploy surface — and the difference between a "dev team that ships 10 times a day" and "a team that ships every 3 weeks" is almost entirely pipeline maturity.

This post walks through the frontend CI/CD landscape: runners, caching, previews, canary/blue-green, feature flags, and supply-chain integrity (SLSA/SBOM) — with concrete patterns for 2026.

1. Pipeline anatomy in 2026

A modern frontend pipeline has 7 stages:

1. Install — lockfile verification + cached install.
2. Lint/typecheck — in parallel.
3. Test — unit + integration + e2e (last one often conditional).
4. Build — per-package in a monorepo, cache-aware.
5. Preview deploy — PR-scoped URL.
6. Security — SBOM, SLSA attestation, vulnerability scan.
7. Production deploy — canary → full.

Each stage should cache aggressively and fail fast.

2. GitHub Actions — the default

GitHub Actions has ~80% share in OSS and public companies. The 2024–2025 practices:

• Reusable workflows (workflow_call) to avoid copy-paste.
• Composite actions for local "mini-actions."
• Self-hosted runners on larger repos.
• Concurrency groups — cancel old runs on the same PR.
• OIDC for cloud credentials — no long-lived secrets.

Minimal but solid workflow

name: ci
on:
  pull_request:
  push:
    branches: [main]
concurrency:
  group: ${{ github.workflow }}-${{ github.ref }}
  cancel-in-progress: true
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v3
      - uses: actions/setup-node@v4
        with: { node-version: '22', cache: 'pnpm' }
      - run: pnpm install --frozen-lockfile
      - run: pnpm turbo run build test lint
        env:
          TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
          TURBO_TEAM: ${{ vars.TURBO_TEAM }}

3. Turborepo Remote Cache — the perf unlock

Monorepos without remote cache waste hours. With it, typical CI drops from 8 minutes to under 2.

• Turborepo: hashes inputs (source + deps + env) → skips tasks whose hash already exists.
• Remote cache: share results across machines. Vercel hosts it; you can self-host with turbo-cache + S3/MinIO.
• Nx has an equivalent (Nx Cloud).
• Bazel is the heavyweight option — not for frontend-only teams.

Rule: if your CI takes > 3 minutes and you have more than one package, remote cache is mandatory.

4. Preview environments

Preview URLs per PR became table stakes.

• Vercel/Netlify/Cloudflare Pages — automatic preview per push.
• Render/Railway — container-style previews for backends.
• Playwright + Chromatic — visual regression on every preview.
• GitHub environments with protection rules for staged promotion.

Pattern: every PR gets a URL, a bot comment, and a screenshot diff within 2 minutes.

5. Deployment platforms — Vercel, Netlify, Cloudflare

2025 shifts

• Vercel Fluid Compute — "serverless Node Functions with isolate-like concurrency." Bigger performance win than it sounds.
• Cloudflare closed the gap on framework integrations (Next.js, SvelteKit, SolidStart).
• Netlify pivoted hard to "composable" — integrations over monolith platform.

6. Canary and blue/green for frontends

Frontend canary used to mean "deploy and hope." In 2026 it's:

• Percent-based traffic split (Vercel Skew Protection, Cloudflare's % splits).
• Cohort-based (feature flag keyed by user ID).
• Header-based (internal users see canary via header).
• Blue/green for static assets via atomic symlink or CDN origin swap.

Skew protection is a subtle but important feature — ensuring a user who loaded v1 of your HTML doesn't fetch v2 chunks and crash. Vercel/Netlify ship this; roll your own if you self-host.

7. Feature flags — the must-have

You don't ship features in 2026, you roll them out.

Providers: LaunchDarkly, Statsig, Unleash, PostHog, Vercel Edge Config, GrowthBook.

Use cases:

• Kill-switch (disable broken feature without deploy).
• Cohort rollout (10% of users, then 50%, then 100%).
• Experimentation (A/B tests, funnel analysis).
• Long-running dark launches.

Anti-patterns:

• Flags that never get cleaned up (flag debt).
• Flags as branching logic for core flows (makes code unreadable).
• No observability on flag state (blind spot).

Rule: flag lifecycle is a first-class concern — track age, mark for deletion, PR to remove.

8. Supply chain — SLSA, SBOM, attestation

2024 SLSA level 3+ became real for many companies after SolarWinds and node-ipc incidents.

• SBOM (Software Bill of Materials) — CycloneDX or SPDX JSON emitted per build.
• Provenance attestation — signed proof that your artifact was built from commit X by action Y.
• Sigstore / cosign — OSS toolchain for signing without key management.
• npm provenance (2023+) — publish with --provenance so consumers verify.
• GitHub Artifact Attestations (2024) — built into Actions.

Why frontend cares: a compromised build of your app ships malicious code to every user. SBOM + attestation makes "can we trust this bundle?" a verifiable question.

9. Secret management

• No long-lived secrets in repo — obvious but still violated.
• OIDC to cloud providers — GitHub Actions ↔ AWS STS is the standard.
• Vault / Doppler / 1Password Secrets Automation — for runtime.
• Vercel/Netlify environment variables — scoped per environment.
• Pre-commit hooks with gitleaks / trufflehog — catch accidental commits.

10. Observability of the pipeline

You should see CI metrics like production metrics:

• Duration P50/P95/P99 per workflow.
• Failure rate per job.
• Cache hit rate.
• Cost per run.

Tools: GitHub Insights, Datadog CI Visibility, BuildPulse, Foresight.

11. Common failure modes

1. Flaky tests — fix by root-causing, not retry. Quarantine to a slow-lane if needed.
2. Cache invalidation surprises — always include node version, OS, and lockfile hash in cache keys.
3. Shared mutable state in parallel jobs — avoid; use matrix outputs.
4. Over-broad concurrency groups — cancel-in-progress can kill main.
5. Secrets logged — always use ::add-mask:: for dynamic values.
6. No rollback plan — even "just redeploy previous" isn't enough without DB migration strategy.

12. The 2026 ideal pipeline

PR opened
├─ 30s: install cache hit
├─ 60s: lint + typecheck (parallel)
├─ 90s: unit tests
├─ 120s: build (Turbo cache)
├─ 150s: preview deploy URL posted
├─ 180s: visual regression + e2e on preview
├─ 200s: SBOM + attestation signed
└─ review required → merge → canary → full

Total time to PR feedback: ~3 minutes
Total time to production: ~10 minutes (with canary hold)

13. What's coming

1. Dagger / Sandbox builds — pipelines as code in TypeScript/Go, portable across platforms. More traction in 2025.
2. AI-augmented CI — flaky test detection, failure triage (Datadog FlakyTest, BuildPulse AI).
3. Edge pipelines — CI runners on edge for faster global deploys.
4. Deployment ownership in Platform teams — bigger companies moving from "every team owns their deploy" back to "Platform owns the runway, teams write the apps."

12-item checklist

1. Is your CI under 5 minutes for typical PR?
2. Do you have remote cache?
3. Does every PR get a preview URL?
4. Do you verify lockfile integrity?
5. Is your secret strategy OIDC + no long-lived tokens?
6. Do you emit SBOM + provenance?
7. Do you have canary or % rollout?
8. Is there a feature flag system + lifecycle management?
9. Is rollback tested monthly?
10. Is pipeline observability integrated with prod?
11. Do you audit dependency changes (Dependabot/Renovate)?
12. Is deploy notification wired to Slack/Linear/Discord?

10 anti-patterns

1. No caching — CI scaling linearly with code.
2. No preview URLs — PR review happens in head.
3. Secrets in .env committed "for convenience."
4. No OIDC — long-lived AWS keys rotating never.
5. "Deploy = merge" — no canary, no gates.
6. Flags accumulating forever (flag debt).
7. Tests flaky and retry-on-failure — masks real bugs.
8. No SBOM — supply chain invisible.
9. No rollback procedure — "just roll forward" breaks users.
10. Deploy notifications in #general — nobody reads, everybody ignores.

Season 6 finale — next

Next post closes Season 6: Frontend Engineer 2025 Career Growth — RSC, Signals, AI, edge, full-stack, design engineer, burnout, Korean community. A career map for the next 3 years.

— End of CI/CD.