Skip to main content
Version: Winter 2024 SheCodes Program

Vercel Deployment Guide

Vercel Introduction​

Vercel is a cloud platform for frontend developers, focusing on providing deployment solutions for static and server-side rendered applications.

⚡ Zero Configuration Deployment​

  • Automatic project type detection
  • Intelligent build settings
  • Instant deployment previews

🌍 Global CDN​

  • Edge network distribution
  • Automatic SSL certificates
  • Smart routing

🔄 Continuous Deployment​

  • Git integration
  • Automatic builds
  • Version control

🛠ī¸ Development Tools​

  • Real-time preview
  • Performance analysis
  • Environment variable management

Deploying Projects​

Preparation​

Requirements​

  • Git repository (GitHub, GitLab, or Bitbucket)
  • Project package.json file
  • Node.js environment
{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}

Importing Project​

1. Connect Git Platform​

  1. Visit Vercel Dashboard
  2. Click "New Project"
  3. Select "Import Git Repository"
  4. Authorize GitHub access

2. Configure Project​

# vercel.json configuration example
{
  "version": 2,
  "builds": [
    {
      "src": "package.json",
      "use": "@vercel/next"
    }
  ],
  "routes": [
    { "src": "/(.*)", "dest": "/" }
  ]
}

3. Deployment Settings​

  • Select project framework (usually auto-detected)
  • Configure build command and output directory
  • Set environment variables (if needed)

Advanced Feature Configuration​

Custom Domain​

Adding Domain​

  1. Find "Domains" in project settings
  2. Click "Add Domain"
  3. Enter your domain name

DNS Configuration​

# A Record configuration
Type: A
Name: @
Value: 76.76.21.21

# CNAME configuration
Type: CNAME
Name: www
Value: cname.vercel-dns.com

Environment Variable Management​

Setting in Vercel Dashboard​

  1. Project Settings > Environment Variables
  2. Add key-value pairs
  3. Select environment (Production/Preview/Development)

Using .env Files​

# .env.local
DATABASE_URL=xxx
API_KEY=xxx

# .env.production
NODE_ENV=production
API_ENDPOINT=https://api.example.com
Note

Do not commit .env files containing sensitive information to Git repository!

Performance Monitoring​

Core Web Vitals Monitoring​

// pages/_app.js
export function reportWebVitals(metric) {
  if (metric.label === 'web-vital') {
    console.log(metric); // Send to analytics service
  }
}

Setting Performance Budget​

{
  "performance": {
    "budget": {
      "firstContentfulPaint": 1500,
      "interactive": 3000,
      "firstMeaningfulPaint": 2000
    }
  }
}

Team Collaboration​

Team Setup​

  1. Create team
  2. Invite members
  3. Set permissions

Deployment Comments​

// Add deployment comments in PR
async function commentOnDeploy(deployment) {
  const comment = `
    🚀 Preview deployed at: ${deployment.url}
    Build: ${deployment.meta.buildId}
    Status: ${deployment.state}
  `;
  await github.createComment(comment);
}

Best Practices​

Optimizing Build Process​

Caching Strategy​

{
  "build": {
    "env": {
      "NEXT_PUBLIC_BUILD_TIME": "@now"
    }
  },
  "headers": [
    {
      "source": "/static/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    }
  ]
}

Build Optimization​

  • Use dependency caching
  • Optimize build commands
  • Configure output directory properly

Monitoring and Alerts​

Setting Alert Rules​

// Example: Performance alert configuration
{
  "alerts": [
    {
      "metric": "firstContentfulPaint",
      "threshold": 2000,
      "notification": {
        "type": "email",
        "recipients": ["team@example.com"]
      }
    }
  ]
}

Log Management​

  • Integrate logging service
  • Set up error tracking
  • Configure performance monitoring