vercel-deployment

What this skill does

# Vercel Deployment Skill

This skill provides comprehensive deployment lifecycle management for applications deployed to Vercel using the Vercel CLI.

## Overview

The deployment lifecycle consists of five phases:
1. **Pre-Deployment Validation** - Application readiness, framework detection, build validation
2. **Project Configuration** - vercel.json generation, build settings, environment variables
3. **Deployment** - Deploy to preview or production, manage builds
4. **Domain & Environment Management** - Custom domains, environment variables, aliases
5. **Post-Deployment Verification** - Health checks, deployment status, analytics

## Supported Application Types

- **Next.js**: App Router, Pages Router, API Routes, Middleware
- **React**: Create React App, Vite, custom builds
- **Vue**: Vue 3, Nuxt, Vite
- **Static Sites**: HTML/CSS/JS, Gatsby, Astro, Hugo, Jekyll
- **Serverless Functions**: Node.js, Python, Go, Ruby serverless APIs
- **Monorepos**: Turborepo, Nx, pnpm workspaces

## Available Scripts

### 1. Application Validation

**Script**: `scripts/validate-app.sh <app-path>`

**Purpose**: Validates application is ready for Vercel deployment

**Checks**:
- Framework detection (Next.js, React, Vue, static)
- package.json or build configuration present
- Build command specified or detectable
- Output directory configured
- No hardcoded secrets in code
- Environment configuration present
- Node.js version compatibility

**Usage**:
```bash
# Validate Next.js app
./scripts/validate-app.sh /path/to/nextjs-app

# Validate React app
./scripts/validate-app.sh /path/to/react-app

# Validate static site
STATIC_SITE=true ./scripts/validate-app.sh /path/to/static-site

# Verbose mode
VERBOSE=1 ./scripts/validate-app.sh .
```

**Exit Codes**:
- `0`: Validation passed
- `1`: Validation failed (must fix before deployment)

### 2. Deploy to Vercel

**Script**: `scripts/deploy-to-vercel.sh <app-path> [environment]`

**Purpose**: Deploys application to Vercel

**Actions**:
- Validates Vercel CLI authentication
- Detects project framework and settings
- Links project to Vercel (if first deployment)
- Builds and deploys application
- Configures environment variables
- Captures deployment URL
- Monitors deployment status

**Usage**:
```bash
# Deploy to preview (automatic for branches)
./scripts/deploy-to-vercel.sh /path/to/app

# Deploy to production
./scripts/deploy-to-vercel.sh /path/to/app production

# Deploy with custom name
PROJECT_NAME=my-app ./scripts/deploy-to-vercel.sh /path/to/app

# Deploy and wait for completion
WAIT=true ./scripts/deploy-to-vercel.sh /path/to/app production

# Deploy with specific build command
BUILD_CMD="npm run build:prod" ./scripts/deploy-to-vercel.sh /path/to/app
```

**Environment Variables**:
- `VERCEL_TOKEN`: Vercel authentication token
- `VERCEL_ORG_ID`: Organization ID (for team projects)
- `VERCEL_PROJECT_ID`: Project ID (for existing projects)
- `PROJECT_NAME`: Custom project name
- `BUILD_CMD`: Custom build command
- `OUTPUT_DIR`: Custom output directory
- `WAIT`: Set to `true` to wait for deployment completion
- `PROD`: Set to `true` for production deployment

**Exit Codes**:
- `0`: Deployment successful
- `1`: Deployment failed

### 3. Update Environment Variables

**Script**: `scripts/update-env-vars.sh <project-name> <environment>`

**Purpose**: Updates environment variables for Vercel project

**Actions**:
- Retrieves current environment variables
- Prompts for updated variables
- Supports development, preview, production scopes
- Triggers redeployment if needed
- Verifies variables applied

**Usage**:
```bash
# Update production env vars
./scripts/update-env-vars.sh my-app production

# Update from .env file
ENV_FILE=.env.production ./scripts/update-env-vars.sh my-app production

# Update specific variables
API_KEY=new_key DATABASE_URL=new_url ./scripts/update-env-vars.sh my-app production

# Update for all environments
ENV_SCOPE=all ./scripts/update-env-vars.sh my-app
```

**Exit Codes**:
- `0`: Environment variables updated successfully
- `1`: Update failed

### 4. Configure Domain

**Script**: `scripts/configure-domain.sh <project-name> <domain>`

**Purpose**: Configures custom domain for Vercel project

**Actions**:
- Adds domain to Vercel project
- Configures SSL/TLS certificate (automatic)
- Sets up DNS records
- Configures redirects (www, apex)
- Verifies domain is accessible

**Usage**:
```bash
# Add custom domain
./scripts/configure-domain.sh my-app myapp.com

# Add with www redirect
WWW_REDIRECT=true ./scripts/configure-domain.sh my-app myapp.com

# Add subdomain
./scripts/configure-domain.sh my-app api.myapp.com

# Force HTTPS redirect
FORCE_HTTPS=true ./scripts/configure-domain.sh my-app myapp.com
```

**Exit Codes**:
- `0`: Domain configured successfully
- `1`: Configuration failed

### 5. Manage Deployments

**Script**: `scripts/manage-deployment.sh <action> <project-name>`

**Purpose**: Manage Vercel deployments and project

**Actions**:
- `list`: List recent deployments
- `inspect`: Show deployment details
- `logs`: View deployment logs
- `rollback`: Rollback to previous deployment
- `promote`: Promote preview to production
- `remove`: Remove deployment
- `alias`: Manage aliases

**Usage**:
```bash
# List deployments
./scripts/manage-deployment.sh list my-app

# Inspect specific deployment
./scripts/manage-deployment.sh inspect my-app <deployment-url>

# View logs
./scripts/manage-deployment.sh logs my-app <deployment-url>

# Rollback to previous
./scripts/manage-deployment.sh rollback my-app

# Promote preview to production
./scripts/manage-deployment.sh promote my-app <preview-url>

# Remove deployment
./scripts/manage-deployment.sh remove my-app <deployment-url>
```

### 6. Health Check

**Script**: `scripts/health-check.sh <deployment-url>`

**Purpose**: Validates Vercel deployment health

**Checks**:
- Deployment status (ready/building/error)
- HTTP endpoint accessibility
- SSL certificate validity
- Build logs for errors
- Performance metrics
- Edge network propagation
- DNS resolution

**Usage**:
```bash
# Check deployment health
./scripts/health-check.sh https://my-app.vercel.app

# Continuous monitoring (runs every 30s)
MONITOR=true ./scripts/health-check.sh https://my-app.vercel.app

# Detailed health report
DETAILED=true ./scripts/health-check.sh https://my-app.vercel.app
```

**Exit Codes**:
- `0`: All health checks passed
- `1`: One or more health checks failed

### 7. Project Setup

**Script**: `scripts/setup-project.sh <app-path> <project-name>`

**Purpose**: Initialize Vercel project configuration

**Actions**:
- Creates vercel.json configuration
- Links project to Vercel
- Sets up environment variables
- Configures build settings
- Sets up Git integration

**Usage**:
```bash
# Setup new project
./scripts/setup-project.sh /path/to/app my-app

# Setup with custom settings
FRAMEWORK=nextjs ./scripts/setup-project.sh /path/to/app my-app

# Setup for team
TEAM=my-team ./scripts/setup-project.sh /path/to/app my-app
```

## Available Templates

### 1. Next.js Configuration

**File**: `templates/vercel-nextjs.json`

**Purpose**: vercel.json for Next.js applications

**Example**:
```json
{
  "version": 2,
  "framework": "nextjs",
  "buildCommand": "npm run build",
  "outputDirectory": ".next",
  "installCommand": "npm install",
  "devCommand": "npm run dev",
  "env": {
    "NEXT_PUBLIC_API_URL": "your_api_url_here"
  },
  "build": {
    "env": {
      "DATABASE_URL": "@database-url"
    }
  }
}
```

### 2. React/Vite Configuration

**File**: `templates/vercel-react.json`

**Purpose**: vercel.json for React applications

**Example**:
```json
{
  "version": 2,
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "installCommand": "npm install",
  "devCommand": "npm run dev",
  "framework": "vite",
  "routes": [
    {
      "src": "/api/(.*)",
      "dest": "/api/$1"
    },
    {
      "src": "/(.*)",
      "dest": "/index.html"
    }
  ]
}
```

### 3. Static Site Configuration

*