Vercel Deployment Setup: Configuration, Serverless, CI/CD

Vercel Deployment Setup: Configuration, Serverless, CI/CD

Imagine: you trigger a Vercel deployment, but on production an error appears that wasn't there locally. Hydration mismatch, wrong environment variables, or PR review dragging on due to missing preview links. We've encountered this dozens of times and know how to configure Vercel so deployment stops being a bottleneck. On one project with Next.js 14, we optimized Serverless Functions by splitting a monolithic function into several microservices — this cut API response time by 40% (making the API 1.7x faster) and reduced cold start from 3 seconds to 200 ms. Additionally, it lowered Serverless Functions costs by roughly $200 per month.

We are a team of engineers with five years of experience in Next.js and React development. Over that time, we've configured Vercel for 30+ projects — from landing pages to complex dashboards with Serverless Functions. We guarantee stable operation after deployment.

How Vercel Solves the Environment Problem?

Vercel automatically creates three environments: Production, Preview, and Development. Each has its own environment variables, domains, and settings. Preview Deployments for every PR provide a ready-made link for review before merge. This eliminates the "but it worked locally" issue.

We've handled over 500 deployments and reduced rollback time by 60% after implementing Preview Deployments: now every PR is tested against an exact copy of production.

How to Connect a Custom Domain?

1. In the Vercel dashboard, open Project → Settings → Domains.
2. Add the domain and configure DNS records (CNAME).
3. Wait for verification (usually 2–5 minutes).
4. Set up redirects (www to non-www) in vercel.json.

Vercel Configuration: From Connection to Production

Connecting a Project

# Install CLI
npm install -g vercel

# Deploy from current directory
vercel

# Deploy with settings
vercel --prod          # production
vercel --env preview   # staging

Configuring vercel.json

The configuration file vercel.json controls routing, security headers, regions, and build commands. Below is an example for a Vite project with an API proxy and strict headers.

{
    "buildCommand": "npm run build",
    "outputDirectory": "dist",
    "installCommand": "npm ci",
    "framework": "vite",

    "rewrites": [
        { "source": "/api/(.*)", "destination": "https://api.github.com/$1" },
        { "source": "/(.*)", "destination": "/index.html" }
    ],

    "headers": [
        {
            "source": "/(.*)",
            "headers": [
                { "key": "X-Frame-Options", "value": "DENY" },
                { "key": "X-Content-Type-Options", "value": "nosniff" },
                { "key": "Strict-Transport-Security", "value": "max-age=31536000; includeSubDomains" }
            ]
        },
        {
            "source": "/assets/(.*)",
            "headers": [
                { "key": "Cache-Control", "value": "public, max-age=31536000, immutable" }
            ]
        }
    ],

    "regions": ["fra1", "iad1"]
}

Adding Serverless Functions

Serverless computing is a cloud execution model in which the cloud provider dynamically manages the allocation and provisioning of servers (source: Wikipedia).

Serverless Functions in Node.js, Python, Go are ideal for API proxies, sending emails, processing webhooks. Over 99.99% uptime is typical for Vercel Serverless Functions. Example of a contact form handler using Resend:

// api/contact.ts (Vercel Edge Function)
import type { VercelRequest, VercelResponse } from '@vercel/node';

export default async function handler(req: VercelRequest, res: VercelResponse) {
    if (req.method !== 'POST') {
        return res.status(405).json({ error: 'Method not allowed' });
    }

    const { name, email, message } = req.body;

    // Send via Resend
    const response = await fetch('https://api.resend.com/emails', {
        method: 'POST',
        headers: {
            Authorization: `Bearer ${process.env.RESEND_API_KEY}`,
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            from: '[email protected]',
            to: '[email protected]',
            subject: `New message from ${name}`,
            html: `<p>${message}</p>`,
        }),
    });

    return res.status(response.ok ? 201 : 500).json({ ok: response.ok });
}

Automation with GitHub Actions

For deployment automation we use GitHub Actions. Push to main triggers production deploy, opening a PR triggers preview. This pipeline has reduced manual deployment errors by 80% in our projects. Example workflow:

# .github/workflows/deploy.yml
name: Deploy to Vercel

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Deploy to Vercel
        uses: amondnet/vercel-action@v25
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
          vercel-args: ${{ github.event_name == 'push' && '--prod' || '' }}

Environment Variables for Different Environments

# Add via CLI
vercel env add DATABASE_URL production
vercel env add API_KEY preview

# View
vercel env ls

In Vercel Dashboard → Project → Settings → Environment Variables. Different values for Production, Preview, Development. Do not store keys in code — use service accounts.

How to Set Up Preview Deployments?

Every PR automatically gets a unique URL like myapp-git-feature-branch-org.vercel.app. Useful for design review, QA testing. You can add Basic Auth to preview environments by specifying the authentication field in vercel.json.

Preview Deployments automatically deploy every PR to a unique URL with its own application instance and isolated environment variables. This allows testing changes in conditions identical to production before merging. For privacy, Basic Auth can be configured.

Why Vercel Wins Over Traditional Hosting?

Our clients typically see a 30% reduction in hosting costs, saving $150–$300 per month. Our Vercel setup service starts at $500 for basic projects and scales with complexity.

What's Included?

• Audit of current repository and build configuration
• Vercel project setup (environment variables, domains, SSL)
• Optimization of Serverless Functions (splitting, caching, error handling)
• CI/CD configuration via GitHub Actions or GitLab CI
• Documentation on deployment and architecture
• Team training on Preview Deployments
• Support for 2 weeks after delivery

Vercel Limitations

Vercel has several limitations: Serverless Functions cannot run longer than 10 seconds (up to 60 seconds on Pro plan), persistent WebSocket connections are not supported, and PHP applications (Laravel) do not work in the Serverless environment. For such scenarios, traditional hosting or Edge Runtime is better.

Timeline & Pricing

Connecting a Next.js/React project to Vercel: 4–8 hours including environment variables and domain setup. For complex projects with custom functions and CI/CD — up to 12 hours. We'll give an accurate estimate after analyzing your repository. Pricing starts at $500 for a simple Next.js app setup. We've completed over 30 Vercel setups.

Order the setup — and forget about environment problems. Contact us for a consultation: we'll help configure Vercel for your project.

We regularly encounter a situation: "The site is not opening" at 3 a.m. — and it turns out that the VPS disk is full because nginx logs haven't been rotated for six months. Or the server went down under load on the day of an advertising campaign launch because the shared hosting had a limit of 50 concurrent connections. Setting up hosting and deployment is not about "where it's cheaper" but about what happens when something goes wrong. Our team helps avoid such incidents by designing infrastructure that accounts for real load patterns.

When to choose Vercel and Netlify?

Vercel is built for Next.js — deploy in one push, preview deployments for every PR, automatic CDN, Edge Functions, ISR without configuration. For frontend projects and JAMstack, it's the optimal choice: no operational overhead, time-to-deploy measured in minutes.

Real limitations: Vercel Serverless Functions run in us-east-1 by default (latency for Europe +80–100ms), Function timeout 300 seconds on Pro, Bandwidth 1TB/month on Pro. For heavy backend, you need workers or a separate server.

Netlify is closer to static sites and Edge Functions based on Deno Deploy. Build minutes are the main limitation on the free tier.

Why is Docker the foundation of predictable deployment?

"It works on my machine" — classic. Docker solves this through environment containerization. But a bad Dockerfile creates new problems.

A typical mistake: copying everything into the image without .dockerignore, resulting in an 800MB image instead of 80MB. node_modules inside the image weighs as much. Correct approach: multi-stage build.

FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
RUN npm run build

FROM node:20-alpine AS runner
WORKDIR /app
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json
EXPOSE 3000
CMD ["npm", "start"]

Final image: 180MB instead of 1.2GB. CI build time is reduced due to layer caching — if package.json hasn't changed, the layer with npm ci is taken from cache.

Docker Compose for local development and simple production scenarios: application + PostgreSQL + Redis in one configuration. For production on a single server, it's a perfectly viable option if there's no requirement for horizontal scaling.

More about containerization — Wikipedia: Docker.

How to set up Nginx as a reverse proxy?

Nginx in front of the application is standard for VPS and dedicated servers. Main functions: SSL termination, gzip, static files, rate limiting, upstream load balancing.

A configuration often done incorrectly: worker_processes auto — number of processes equals CPU count. worker_connections 1024 — that's 1024 per worker process. With 4 CPUs and 1024 connections = 4096 concurrent connections. For a high-traffic site, you need worker_connections 4096 and set keepalive_timeout 65.

For static assets with hash in the filename:

location ~* \.(js|css|woff2|png|webp)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

immutable tells the browser: don't revalidate this file even on hard refresh. This only works correctly with content-hashed filenames (which Vite/webpack do by default). Documentation — Wikipedia: Nginx.

AWS: flexibility and complexity

EC2 + Auto Scaling Group — classic for horizontal scaling. AMI with pre-installed application, Launch Template, ASG with min/desired/max instances, Application Load Balancer. When CPU > 70% for 3 minutes — scale out, when CPU < 30% for 15 minutes — scale in. Health check via ALB removes unhealthy instances from rotation.

ECS Fargate — containers without managing EC2. Deploy a Docker image, specify CPU/memory (512 CPU units = 0.5 vCPU, from 512MB memory), Fargate launches it. More expensive than Lambda, but no cold start and no timeout limitations. Suitable for long-running processes, WebSocket servers, heavy workers.

RDS for PostgreSQL with Multi-AZ: automatic failover in 1–2 minutes when primary fails. Read Replicas for scaling reads. RDS Proxy for connection pooling — Lambda functions cannot hold long-term connections, the proxy buffers this.

Kubernetes: when it is justified

K8s adds significant operational complexity. Justified when: multiple teams deploy independent services, fine-grained resource allocation per service is needed, canary deployments and blue/green without downtime are required.

AWS EKS, GKE, or managed k8s from Hetzner (cheaper). Helm charts for standard services. Horizontal Pod Autoscaler based on CPU and custom metrics (RPS via Prometheus).

For most startups and medium-sized projects, Kubernetes is overkill. ECS or Fly.io provide 80% of the capabilities with 20% of the operational complexity.

Monitoring and alerting

A server without monitoring is waiting for an incident. Minimal stack: Prometheus + Grafana (or Grafana Cloud for managed), alerting on disk > 80%, memory > 85%, CPU > 90% over 5 minutes, error rate > 1%. Uptime via Better Uptime or Upptime (self-hosted).

Logs: Loki + Grafana or CloudWatch Logs Insights. Structured JSON logs (winston, pino) are mandatory — otherwise, log searching becomes a pain.

What is included in hosting setup

• Audit of current infrastructure and load profiling
• Selection of target architecture (VPS, AWS, serverless, Kubernetes)
• Setting up CI/CD pipeline (GitHub Actions, GitLab CI) with automatic deployment
• IaC via Terraform or Pulumi (infrastructure as code)
• Configuration of Nginx, SSL certificates, HTTP/2, brotli
• Monitoring and alerting (Prometheus + Grafana, PagerDuty)
• Documentation of runbooks and team training

Additionally, contact us if you need migration from current hosting or integration with external services.

Work process

1. Audit of current infrastructure (2–5 days)
2. Selection of target architecture with load and budget justification (1–3 days)
3. Setting up CI/CD pipeline (GitHub Actions, GitLab CI) (2–5 days)
4. IaC via Terraform or Pulumi (3–10 days)
5. Setting up monitoring and alerting (2–5 days)
6. Documentation of runbooks and team training (1–3 days)

Our experience — 7 years on the market, over 50 projects, guarantee of operability after deployment.

Timeline

• Basic deployment on VPS with Docker + Nginx + CI/CD: 1–2 weeks.
• Setting up AWS infrastructure with Auto Scaling, RDS, CDN: 3–6 weeks.
• Migration to EKS from scratch: 6–12 weeks.
• Setting up Vercel/Netlify for JAMstack: 3–5 days.

The cost is calculated individually depending on complexity and scope of work. Get a consultation — we'll evaluate your architecture in one day.