Skip to main content

Deployment Guide

This guide will help you deploy the ECC learning site to Vercel and configure CI/CD automation.

πŸš€ Quick Deploy to Vercel​

Click the button below to deploy to Vercel in one click:

Deploy with Vercel

Option 2: Manual Deployment​

1. Install the Vercel CLI​

npm install -g vercel

2. Log in to Vercel​

vercel login

3. Deploy the Project​

cd ecc-docs
vercel

On first deployment, Vercel will ask some configuration questions:

  • Set up and deploy? Yes
  • Which scope? Select your account
  • Link to existing project? No
  • Project name? ecc-learning-site
  • Directory? ./
  • Override settings? No

βš™οΈ CI/CD Configuration​

GitHub Actions Workflows​

The project comes with pre-configured GitHub Actions, including two workflows:

CI Workflow (ci.yml)​

Runs automatically on every push or PR:

  • βœ… Unit tests
  • βœ… Build verification
  • βœ… E2E tests

Deploy Workflow (deploy.yml)​

Automatically deploys when pushed to the main branch:

  • βœ… Run CI checks
  • βœ… Deploy to Vercel
  • βœ… Verify deployment

Configure GitHub Secrets​

Add the following Secrets in your GitHub repository settings:

Secret NameDescriptionHow to Obtain
VERCEL_TOKENVercel API TokenVercel Settings
VERCEL_ORG_IDVercel Organization ID.vercel/project.json
VERCEL_PROJECT_IDVercel Project ID.vercel/project.json

πŸ”’ Environment Variables​

Local Development​

Copy .env.example to .env.local:

cp .env.example .env.local

Edit .env.local and fill in your configuration.

Vercel Environment Variables​

Configure environment variables in Vercel project settings:

  1. Open the Vercel Dashboard
  2. Select your project
  3. Go to Settings β†’ Environment Variables
  4. Add the required variables

πŸ“Š Deployment Checklist​

Confirm before deploying:

  • All unit tests pass (npm test)
  • Build succeeds (npm run build)
  • E2E tests pass (npm run test:e2e)
  • Environment variables are configured
  • GitHub Secrets are set up

🌐 Custom Domain​

Add a Custom Domain​

  1. Open the project in the Vercel Dashboard
  2. Go to Settings β†’ Domains
  3. Add your domain
  4. Configure DNS records

DNS Configuration Example​

TypeNameValue
CNAMEwwwcname.vercel-dns.com
A@76.76.19.19

πŸ”§ Advanced Configuration​

Custom Build Command​

Edit vercel.json:

{
  "buildCommand": "npm run build",
  "outputDirectory": "build"
}

Configure Redirects​

{
  "redirects": [
    {
      "source": "/old-path",
      "destination": "/new-path",
      "permanent": true
    }
  ]
}

Configure Security Headers​

The project comes pre-configured with these security headers:

  • X-Frame-Options: DENY
  • X-Content-Type-Options: nosniff
  • X-XSS-Protection: 1; mode=block
  • Referrer-Policy: strict-origin-when-cross-origin

πŸ“ˆ Monitoring and Analytics​

Vercel Analytics​

Enable Analytics in the Vercel Dashboard:

  1. Go to project settings
  2. Select Analytics
  3. Enable Web Analytics

Performance Monitoring​

Monitor with Vercel Speed Insights:

  • First Contentful Paint (FCP)
  • Largest Contentful Paint (LCP)
  • Cumulative Layout Shift (CLS)

πŸ› FAQ​

Build Failure​

  1. Check that the Node.js version is 20+
  2. Verify that package-lock.json is committed
  3. Review build logs for errors

404 After Deployment​

  1. Verify the outputDirectory configuration is correct
  2. Check rewrite rules
  3. Clear Vercel cache and redeploy

Environment Variables Not Working​

  1. Verify variable names are correct
  2. Check variable scope (Production/Preview/Development)
  3. Redeploy for variables to take effect

πŸ“š Related Resources​