200 lines
3.6 KiB
Markdown
200 lines
3.6 KiB
Markdown
# Les 17: Advanced Deployment & Production (Vercel)
|
|
|
|
> 📋 **Lesmateriaal nog niet uitgewerkt**
|
|
>
|
|
> De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
|
|
> - Les17-Slide-Overzicht.md
|
|
> - Les17-Lesplan.md
|
|
> - Les17-Docenttekst.md
|
|
> - Les17-Bijlage-A-Lesopdracht.md
|
|
> - Les17-Bijlage-B-Huiswerkopdracht.md
|
|
|
|
---
|
|
|
|
## Hoofdstuk
|
|
**Hoofdstuk 3: Advanced** (Les 8-18)
|
|
|
|
## Beschrijving
|
|
Production-ready deployment.
|
|
|
|
---
|
|
|
|
## Te Behandelen
|
|
|
|
### Vercel Deployment Deep Dive
|
|
|
|
**Hoe werkt Vercel:**
|
|
- Edge network
|
|
- Serverless
|
|
- Automatic builds
|
|
|
|
**Git Integratie:**
|
|
- Push main → deploy
|
|
- Branches → preview URLs
|
|
- Preview deployments
|
|
- Instant rollbacks
|
|
- Environments
|
|
|
|
### Environment Variables
|
|
- Verschillende vars per environment
|
|
- Secrets handlen
|
|
- Accessing (process.env, NEXT_PUBLIC_)
|
|
- Best practices
|
|
|
|
### Custom Domains
|
|
- Domein toevoegen
|
|
- DNS config
|
|
- HTTPS automatic
|
|
- Multiple domains
|
|
|
|
### Performance Optimization
|
|
|
|
| Categorie | Technieken |
|
|
|-----------|------------|
|
|
| Images | Next.js Image, lazy loading, responsive, WebP/AVIF |
|
|
| Fonts | next/font, font-display, reducing files |
|
|
| Code | Dynamic imports, lazy loading, route-based splitting |
|
|
| General | Bundle analyse, caching strategies, connection pooling |
|
|
|
|
### Vercel Analytics
|
|
|
|
**Web Vitals:**
|
|
- CLS (Cumulative Layout Shift)
|
|
- FID (First Input Delay)
|
|
- LCP (Largest Contentful Paint)
|
|
- FCP (First Contentful Paint)
|
|
- TTFB (Time to First Byte)
|
|
|
|
**Features:**
|
|
- Real user monitoring
|
|
- Speed insights
|
|
- Audience insights
|
|
|
|
### Error Tracking
|
|
- Edge Function logs
|
|
- Error boundaries
|
|
- Logging services (Sentry, LogRocket)
|
|
|
|
### CI/CD
|
|
- GitHub Actions
|
|
- Automated testing
|
|
- Type checking
|
|
- Linting
|
|
- E2E on previews
|
|
|
|
### Supabase Production
|
|
- Connection pooling
|
|
- Backups
|
|
- Monitoring
|
|
- Rate limiting
|
|
|
|
### Security Checklist
|
|
- Env vars secure
|
|
- No secrets exposed
|
|
- HTTPS
|
|
- CSP headers
|
|
- Rate limiting
|
|
- Validation
|
|
- Dependency updates
|
|
|
|
---
|
|
|
|
## Tools
|
|
- Vercel
|
|
- GitHub Actions
|
|
- Sentry/LogRocket
|
|
- Lighthouse
|
|
- Cursor
|
|
|
|
---
|
|
|
|
## Lesopdracht (2 uur)
|
|
|
|
### Production-Ready Deployment van Beste Project
|
|
|
|
**(Todo app aanbevolen)**
|
|
|
|
### Phase 1: Pre-Deployment Checklist (30 min)
|
|
|
|
Verify:
|
|
- Env vars
|
|
- Error boundaries
|
|
- Loading states
|
|
- 404 page
|
|
- SEO basics
|
|
- Favicon
|
|
- TypeScript errors
|
|
|
|
### Phase 2: Performance Optimization (45 min)
|
|
|
|
- Run Lighthouse (aim 90+)
|
|
- Fix met Cursor:
|
|
- Optimize images
|
|
- Reduce bundle
|
|
- Optimize fonts
|
|
- Improve Core Web Vitals
|
|
- Re-run
|
|
- Document
|
|
|
|
### Phase 3: Deploy & Monitor (45 min)
|
|
|
|
- Deploy naar Vercel
|
|
- Custom domain (optional)
|
|
- Enable Analytics
|
|
- Setup error monitoring
|
|
- Maak monitoring dashboard
|
|
- Test grondig
|
|
|
|
### Deliverable
|
|
- Production URL
|
|
- Lighthouse screenshot
|
|
- Dashboard access
|
|
|
|
---
|
|
|
|
## Huiswerk (2 uur)
|
|
|
|
### Maak Production Deployment Playbook
|
|
|
|
### Deel 1: Comprehensive Checklist (1 uur)
|
|
|
|
Schrijf checklists voor:
|
|
- Pre-Deployment
|
|
- Environment Setup
|
|
- Performance Requirements
|
|
- Monitoring Setup
|
|
- Post-Deployment
|
|
- Rollback Plan
|
|
|
|
### Deel 2: GitHub Actions (optional, 30 min)
|
|
- Setup automated checks op PRs
|
|
|
|
### Deel 3: Monitoring Dashboard (30 min)
|
|
|
|
Bouw admin dashboard met:
|
|
- Deployment status
|
|
- Errors
|
|
- Performance metrics
|
|
- Database usage
|
|
- API usage
|
|
- Custom metrics
|
|
- Auto-refresh 5min
|
|
|
|
### Deliverable
|
|
- Playbook
|
|
- GitHub Actions
|
|
- Dashboard
|
|
- Reflectie (200 woorden)
|
|
|
|
---
|
|
|
|
## Leerdoelen
|
|
Na deze les kan de student:
|
|
- Vercel deployment configureren met Git integration
|
|
- Environment variables veilig beheren
|
|
- Custom domains configureren
|
|
- Performance optimaliseren voor Web Vitals
|
|
- Analytics en monitoring opzetten
|
|
- CI/CD implementeren met GitHub Actions
|
|
- Security best practices toepassen voor productie
|