Deployment

​

Deployment Architecture

GitHub (main branch)
  ↓
  Trigger: Push to main
  ↓
Vercel Build
  ├── Install dependencies
  ├── Run database migrations
  ├── Build Next.js app
  └── Deploy to production
  ↓
charle.agency (live)

​

Environments

​

Deployment Process

​

Automatic Deployments

git push origin main

​

Preview Deployments

• URL: https://charle-os-git-{branch}-charle.vercel.app
• Purpose: Test changes before merging
• Database: Uses DEV branch (safe to experiment)
• Auto-cleanup: Deleted after PR merges

​

Build Configuration

​

package.json Scripts

{
  "scripts": {
    "build": "next build",
    "postinstall": "drizzle-kit migrate"
  }
}

1. npm install - Install dependencies
2. postinstall hook runs → drizzle-kit migrate - Apply database migrations
3. npm run build - Build Next.js app

​

Environment Variables

• DATABASE_URL - Production database connection
• BETTER_AUTH_SECRET - Auth encryption key
• BETTER_AUTH_URL - https://charle.agency
• GOOGLE_CLIENT_ID - Google OAuth credentials
• GOOGLE_CLIENT_SECRET

• All integration API keys (Pusher, Resend, Algolia, etc.)
• Feature flags
• Service URLs

​

Database Migrations

// package.json
{
  "postinstall": "drizzle-kit migrate"
}

1. Vercel installs dependencies
2. postinstall hook triggers
3. Drizzle applies pending migrations from drizzle/ folder
4. If migrations fail, deployment fails (safe!)
5. App starts with updated schema

​

Rollback

​

Option 1: Rollback in Vercel Dashboard

1. Go to Vercel Dashboard
2. Click “Deployments”
3. Find previous working deployment
4. Click ”⋯” → “Promote to Production”

​

Option 2: Revert Git Commit

# Revert last commit
git revert HEAD
git push origin main

# Vercel automatically deploys the revert

​

Option 3: Redeploy Previous Commit

# Go to specific commit
git checkout abc123

# Force push (use with caution!)
git push origin main --force

# Or create revert commit
git revert abc123..HEAD
git push origin main

​

Monitoring

​

Vercel Analytics

• Page views
• Load times
• Core Web Vitals
• Top pages

​

Sentry Error Tracking

• Runtime errors
• API failures
• Performance issues
• User context

​

Logs

• Show build output
• Database migration results
• Warnings and errors

• API route logs
• Server component logs
• Edge function logs

​

Performance Optimization

​

Caching Strategy

• Static assets (images, CSS, JS)
• Server Components (ISR)
• API routes with Cache-Control headers

​

Edge Functions

• Global: Deployed to 90+ edge locations
• Fast: Sub-100ms response times
• Scalable: Auto-scales to demand

​

Image Optimization

• Automatic format conversion (WebP/AVIF)
• Responsive sizing
• Lazy loading
• CDN caching

​

Security

// next.config.ts
module.exports = {
  async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          { key: 'X-Frame-Options', value: 'DENY' },
          { key: 'X-Content-Type-Options', value: 'nosniff' },
          { key: 'Referrer-Policy', value: 'origin-when-cross-origin' },
        ],
      },
    ];
  },
};

​

Troubleshooting

​

Build Failures

1. TypeScript errors
2. Failed database migration
3. Missing environment variables
4. Dependency installation failure

1. Check build logs in Vercel dashboard
2. Run npm run build locally to reproduce
3. Fix errors and push again

​

Runtime Errors

1. Check Sentry for error details
2. View runtime logs in Vercel
3. Verify environment variables are set
4. Check database connection

​

Migration Failures

1. Test migration locally: npm run db:migrate
2. Check migration SQL for syntax errors
3. Verify database schema compatibility
4. If needed, create fix-forward migration

​

Best Practices

# Build locally
npm run build

# Run production build
npm run start

# Test migrations
npm run db:migrate

# Check for updates
npm outdated

# Update dependencies
npm update

# Test thoroughly before deploying

​

Deployment Checklist

• All tests passing (unit + E2E)
• TypeScript compiles without errors
• Database migrations tested locally
• Environment variables configured
• Breaking changes documented
• Rollback plan prepared
• Monitoring/alerts configured

​

Related Documentation