How-To2026-09-0310 min read

How to Set Up a Deployment Pipeline in Vercel

Vercel's deployment pipeline turns every git push into a live URL — preview deployments on PRs, staging on develop, production on main. For frontend-heavy products, this eliminates the DevOps overhead that slows down shipping. But a default Vercel setup without proper configuration leaves you with exposed environment variables, no deployment protection, and no clear promotion path from preview to production.

This guide covers setting up a production-grade Vercel deployment pipeline: connecting your repository, configuring environment variables securely, setting up preview deployments with URL comments on PRs, establishing branch-based deployment rules, and adding custom domain routing. The goal is a pipeline where merging to main automatically deploys to production with zero manual steps.

Step-by-step guide

01

Connect your GitHub repository to Vercel

Log into Vercel, create a new project, and import your GitHub repository. Vercel will detect your framework (Next.js, Vite, etc.) and configure the build command automatically. Review the auto-detected settings: build command, output directory, and install command. For monorepos, set the root directory to the frontend app's subdirectory.

  • Click 'Add New Project' and select your GitHub repository
  • Verify the detected framework and build settings
  • For monorepos, set 'Root Directory' to the frontend path (e.g., apps/web)
02

Configure environment variables by deployment context

In Vercel's project settings, add environment variables for each context: Production, Preview, and Development. Production variables point to your live API and services. Preview variables point to staging or development endpoints. Never use the same database or API keys across contexts — a preview deployment should not modify production data.

  • Navigate to Settings > Environment Variables
  • Add each variable and check only the appropriate context checkbox (Production, Preview, or Development)
  • Use Vercel's built-in encryption for sensitive values — they are never exposed in logs
03

Set up preview deployments with PR comments

Vercel creates a unique URL for every push to a non-production branch by default. Enable the GitHub integration to post a comment on each PR with the preview URL, deployment status, and a screenshot comparison. This lets reviewers click a link and see the running application without pulling the branch locally.

  • Go to Settings > Git > GitHub Integration
  • Enable 'Comment on Pull Requests' with deployment status
  • Configure the Vercel bot to leave a comment with the preview URL on every PR
04

Configure branch-based deployment rules

Set up deployment rules so that pushes to 'main' trigger production deployments, pushes to 'develop' trigger staging deployments, and all other branches get preview deployments. In Vercel's Git settings, set the production branch to 'main'. Create a 'Staging' environment that maps to your 'develop' branch with its own environment variables.

  • In Settings > Git, set the production branch to 'main'
  • Create a custom environment for 'develop' branch with staging variables
  • Optionally restrict preview deployments to PRs only (ignore direct pushes to feature branches)
05

Add custom domain routing

In your project's Domain settings, add your production domain (e.g., app.yourproduct.com) and point it to the production deployment. Add a staging subdomain (e.g., staging.yourproduct.com) pointed to the develop branch. Configure DNS records as Vercel instructs — typically a CNAME or A record. Enable 'Redirect to Primary Domain' to prevent duplicate content.

  • Go to Settings > Domains and add your production domain
  • Add a staging subdomain and assign it to the develop branch
  • Configure DNS records at your registrar following Vercel's instructions
06

Add deployment protection and access controls

Enable Vercel's deployment protection for preview deployments — this adds an authentication layer so previews are not publicly accessible. For production, enable Vercel's DDoS protection and set up deployment rollback so you can instantly revert to the previous deployment if something breaks. Configure Slack notifications for production deployment events.

  • Go to Settings > Deployment Protection and enable 'Vercel Authentication' for previews
  • Set up Slack integration for production deployment notifications
  • Test the rollback flow by deploying a trivial change and reverting it

Common mistakes

Using the same environment variables for production and preview

If your preview deployments point at the production database, a broken migration or bad data write from a preview deployment can take down production. Always separate environment variables by context and point previews at staging or development services.

Not protecting preview deployments behind authentication

Preview deployments are publicly accessible by default. If your app shows customer data or internal tools, anyone with the URL can access it. Enable deployment protection to require authentication for preview URLs.

Ignoring build caching configuration

Vercel caches dependencies and build output between deployments. If your cache is misconfigured, you get stale builds that do not reflect your latest code changes. Review your cache settings and add cache invalidation for files that should always trigger a rebuild.

Not testing the rollback process before you need it

The first time you discover your rollback does not work should not be during a production incident. Deploy a trivial change, verify it is live, then roll back and verify the previous version is restored. This takes five minutes and saves hours of panic later.

Tips

Use Vercel's 'Promote to Production' feature for staged rollouts — deploy to a preview URL, test thoroughly, then promote that exact build to production without a rebuild.

Set up a Vercel speed insights integration to track Core Web Vitals on every deployment — catch performance regressions before users notice.

Use Vercel's edge middleware for feature flags, A/B testing, and geographic routing without adding client-side JavaScript weight.

Configure Vercel's 'Ignored Build Step' for monorepos to skip deployments when only unrelated packages change — this saves build minutes.

How Vantage helps

Vantage connects to your deployment pipeline to understand your release cadence and environment structure. When generating tickets for a feature, Vantage includes deployment considerations — environment variable setup, staging verification steps, and rollback notes — as part of the acceptance criteria so engineers know exactly what to validate before and after merge.

Frequently asked questions

Spend less time on setup, more on decisions

Vantage connects your tools and generates specs grounded in real data. Free to start.

Free to start. No credit card required.

Related reading