Deployment Architecture
Environments
| Environment | URL | Branch | Purpose |
|---|---|---|---|
| Production | https://charle.agency | main | Live application |
| Preview | https://charle-os-*.vercel.app | Feature branches | PR previews |
| Local | http://localhost:3000 | Any | Development |
Deployment Process
Automatic Deployments
Every push tomain triggers a deployment:
1
Push to GitHub
2
Vercel Detects Change
Webhook triggers Vercel build automatically
3
Build Process
- Install npm dependencies
- Run database migrations (
postinstallscript) - Build Next.js application
- Generate static assets
4
Deploy
- Upload to Vercel’s CDN
- Update DNS to point to new deployment
- Old deployment kept for 30 days (rollback)
5
Post-Deploy
- Environment goes live
- Vercel sends notification
- Logs available in dashboard
Preview Deployments
Pull requests get automatic 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
npm install- Install dependenciespostinstallhook runs →drizzle-kit migrate- Apply database migrationsnpm run build- Build Next.js app
Environment Variables
Production environment variables are set in Vercel dashboard: Required for build:DATABASE_URL- Production database connectionBETTER_AUTH_SECRET- Auth encryption keyBETTER_AUTH_URL-https://charle.agencyGOOGLE_CLIENT_ID- Google OAuth credentialsGOOGLE_CLIENT_SECRET
- All integration API keys (Pusher, Resend, Algolia, etc.)
- Feature flags
- Service URLs
Environment variables are encrypted at rest and only decrypted during build/runtime.
Database Migrations
Migrations run automatically during deployment:- Vercel installs dependencies
postinstallhook triggers- Drizzle applies pending migrations from
drizzle/folder - If migrations fail, deployment fails (safe!)
- App starts with updated schema
Rollback
If a deployment has issues:Option 1: Rollback in Vercel Dashboard
- Go to Vercel Dashboard
- Click “Deployments”
- Find previous working deployment
- Click ”⋯” → “Promote to Production”
Option 2: Revert Git Commit
Option 3: Redeploy Previous Commit
Monitoring
Vercel Analytics
Built-in analytics show:- Page views
- Load times
- Core Web Vitals
- Top pages
Sentry Error Tracking
Production errors are tracked in Sentry:- Runtime errors
- API failures
- Performance issues
- User context
Logs
View deployment logs in Vercel: Build logs:- Show build output
- Database migration results
- Warnings and errors
- API route logs
- Server component logs
- Edge function logs
Performance Optimization
Caching Strategy
Vercel automatically caches:- Static assets (images, CSS, JS)
- Server Components (ISR)
- API routes with
Cache-Controlheaders
Edge Functions
API routes run on Vercel’s Edge Network:- Global: Deployed to 90+ edge locations
- Fast: Sub-100ms response times
- Scalable: Auto-scales to demand
Image Optimization
Next.js Image component uses Vercel’s optimization:- Automatic format conversion (WebP/AVIF)
- Responsive sizing
- Lazy loading
- CDN caching
Security
HTTPS Everywhere
HTTPS Everywhere
- All traffic encrypted with TLS 1.3
- Automatic SSL certificate management
- HTTP → HTTPS redirect
Environment Variable Encryption
Environment Variable Encryption
- Encrypted at rest
- Only decrypted during build/runtime
- Never exposed in logs or UI
DDoS Protection
DDoS Protection
- Vercel’s Edge Network provides DDoS mitigation
- Automatic rate limiting
- IP blocking for suspicious traffic
Security Headers
Security Headers
Troubleshooting
Build Failures
Error: “Build failed” Common causes:- TypeScript errors
- Failed database migration
- Missing environment variables
- Dependency installation failure
- Check build logs in Vercel dashboard
- Run
npm run buildlocally to reproduce - Fix errors and push again
Runtime Errors
Error: “Application error” / 500 Internal Server Error Fix:- Check Sentry for error details
- View runtime logs in Vercel
- Verify environment variables are set
- Check database connection
Migration Failures
Error: “Migration failed” Fix:- Test migration locally:
npm run db:migrate - Check migration SQL for syntax errors
- Verify database schema compatibility
- If needed, create fix-forward migration
Best Practices
Test Locally Before Deploying
Test Locally Before Deploying
Always build and test locally:
Use Preview Deployments
Use Preview Deployments
Test changes in preview before merging:
- Create PR
- Wait for Vercel preview deployment
- Test preview URL
- Merge when confirmed working
Monitor After Deployment
Monitor After Deployment
Watch for issues after deploying:
- Check Vercel Analytics for traffic
- Monitor Sentry for errors
- Verify key user flows work
- Check database migrations succeeded
Keep Dependencies Updated
Keep Dependencies Updated
Regular dependency updates:
Deployment Checklist
Before deploying to production:- 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