228 lines
4.7 KiB
Markdown
228 lines
4.7 KiB
Markdown
# Les 16: Deployment & Production
|
|
|
|
---
|
|
|
|
## Hoofdstuk
|
|
**Hoofdstuk 3: Advanced** (Les 10-18)
|
|
|
|
## Beschrijving
|
|
Deploy je eindproject naar productie. Leer environment variables, Vercel deployment, en basis performance optimalisatie.
|
|
|
|
---
|
|
|
|
## Te Behandelen
|
|
|
|
### Vercel Deployment Flow
|
|
|
|
**Hoe Vercel werkt:**
|
|
1. Connect GitHub repository
|
|
2. Push naar main → automatische deploy
|
|
3. Push naar andere branch → preview URL
|
|
4. Alles automatisch (build, SSL, CDN)
|
|
|
|
**Waarom Vercel voor Next.js:**
|
|
- Gemaakt door dezelfde makers
|
|
- Zero-config deployment
|
|
- Gratis tier ruim voldoende
|
|
- Automatische HTTPS
|
|
- Global CDN
|
|
|
|
---
|
|
|
|
### Environment Variables in Vercel
|
|
|
|
**Lokaal (.env.local) vs Productie (Vercel Dashboard):**
|
|
|
|
| Waar | Bestand/Locatie | Voorbeeld |
|
|
|------|-----------------|-----------|
|
|
| Lokaal | `.env.local` | Development |
|
|
| Vercel | Dashboard → Settings → Env Vars | Production |
|
|
|
|
**Stap voor stap:**
|
|
1. Ga naar je Vercel project
|
|
2. Settings → Environment Variables
|
|
3. Voeg toe:
|
|
- `NEXT_PUBLIC_SUPABASE_URL`
|
|
- `NEXT_PUBLIC_SUPABASE_ANON_KEY`
|
|
- `OPENAI_API_KEY`
|
|
4. Selecteer environment (Production, Preview, Development)
|
|
5. Save & Redeploy
|
|
|
|
**Let op:**
|
|
- `NEXT_PUBLIC_` prefix = zichtbaar in browser
|
|
- Zonder prefix = alleen server-side (API routes)
|
|
|
|
---
|
|
|
|
### Supabase Productie Setup
|
|
|
|
**Redirect URLs configureren:**
|
|
1. Ga naar Supabase → Authentication → URL Configuration
|
|
2. Voeg toe bij "Redirect URLs":
|
|
- `https://jouw-app.vercel.app/**`
|
|
- `https://jouw-app.vercel.app`
|
|
|
|
**Waarom:**
|
|
- Auth redirects werken alleen naar toegestane URLs
|
|
- Wildcards (`**`) voor sub-routes
|
|
|
|
---
|
|
|
|
### Deployment Checklist
|
|
|
|
**Voor deployment:**
|
|
- [ ] `npm run build` werkt lokaal
|
|
- [ ] Geen TypeScript errors
|
|
- [ ] Environment variables gedocumenteerd in `.env.example`
|
|
- [ ] `.gitignore` bevat `.env*.local`
|
|
- [ ] README up-to-date
|
|
|
|
**Na deployment:**
|
|
- [ ] App laadt correct
|
|
- [ ] Auth werkt (login/logout)
|
|
- [ ] Data wordt opgehaald uit Supabase
|
|
- [ ] AI features werken (indien van toepassing)
|
|
- [ ] Geen console errors
|
|
|
|
---
|
|
|
|
### Performance Basics
|
|
|
|
**Lighthouse Audit:**
|
|
1. Open Chrome DevTools
|
|
2. Tab "Lighthouse"
|
|
3. Klik "Analyze page load"
|
|
4. Aim for score >80 in elke categorie
|
|
|
|
**Quick wins:**
|
|
- Gebruik Next.js `Image` component (niet `<img>`)
|
|
- Lazy load components die niet direct nodig zijn
|
|
- Verwijder ongebruikte dependencies
|
|
|
|
---
|
|
|
|
### Security Checklist
|
|
|
|
**Belangrijk voor productie:**
|
|
- [ ] API keys nooit in client-side code
|
|
- [ ] Supabase RLS enabled (Row Level Security)
|
|
- [ ] Error messages geven geen gevoelige info
|
|
- [ ] HTTPS (automatisch via Vercel)
|
|
|
|
---
|
|
|
|
### Monitoring Basics
|
|
|
|
**Vercel Dashboard toont:**
|
|
- Deployments history
|
|
- Function logs
|
|
- Analytics (optioneel)
|
|
|
|
**Supabase Dashboard toont:**
|
|
- Database usage
|
|
- Auth logs
|
|
- API requests
|
|
|
|
---
|
|
|
|
## Tools
|
|
- Vercel
|
|
- GitHub
|
|
- Supabase
|
|
- Chrome DevTools (Lighthouse)
|
|
|
|
---
|
|
|
|
## Lesopdracht (2 uur)
|
|
|
|
### Deploy Je Eindproject
|
|
|
|
**Deel 1: Pre-Deployment Check (30 min)**
|
|
|
|
Run door de checklist:
|
|
1. `npm run build` - fix eventuele errors
|
|
2. Check TypeScript errors
|
|
3. Maak/update `.env.example`
|
|
4. Update README met project info
|
|
|
|
**Deel 2: Vercel Deployment (30 min)**
|
|
|
|
1. Ga naar [vercel.com](https://vercel.com)
|
|
2. "Add New Project"
|
|
3. Import je GitHub repository
|
|
4. Voeg environment variables toe
|
|
5. Deploy!
|
|
|
|
**Deel 3: Supabase Config (20 min)**
|
|
|
|
1. Voeg Vercel URL toe aan Supabase redirect URLs
|
|
2. Test auth in productie
|
|
3. Verifieer data access
|
|
|
|
**Deel 4: Testing & Lighthouse (40 min)**
|
|
|
|
1. Test alle features in productie:
|
|
- Login/logout
|
|
- CRUD operaties
|
|
- AI chat (indien aanwezig)
|
|
2. Run Lighthouse audit
|
|
3. Fix issues tot score >80
|
|
4. Screenshot resultaat
|
|
|
|
### Deliverable
|
|
- Werkende productie URL
|
|
- Lighthouse screenshot (score >80)
|
|
- Test rapport: wat werkt, wat niet
|
|
|
|
---
|
|
|
|
## Huiswerk (2 uur)
|
|
|
|
### Polish & Documentatie
|
|
|
|
**Deel 1: Bug Fixes (1 uur)**
|
|
|
|
1. Test je app grondig in productie
|
|
2. Fix gevonden bugs
|
|
3. Test edge cases:
|
|
- Lege states
|
|
- Error states
|
|
- Loading states
|
|
4. Redeploy
|
|
|
|
**Deel 2: Performance Optimization (30 min)**
|
|
|
|
1. Run Lighthouse opnieuw
|
|
2. Fix top 3 performance issues
|
|
3. Document wat je hebt verbeterd
|
|
|
|
**Deel 3: Documentatie Afronden (30 min)**
|
|
|
|
Update je `README.md`:
|
|
- Werkende productie URL
|
|
- Features lijst
|
|
- Tech stack
|
|
- Setup instructies
|
|
- Screenshots
|
|
|
|
Update `docs/`:
|
|
- PROMPT-LOG.md (minimaal 10 entries)
|
|
- AI-DECISIONS.md (minimaal 5 entries)
|
|
|
|
### Deliverable
|
|
- Geoptimaliseerde productie app
|
|
- Complete documentatie
|
|
- Lighthouse score >85
|
|
|
|
---
|
|
|
|
## Leerdoelen
|
|
Na deze les kan de student:
|
|
- Een Next.js app deployen naar Vercel
|
|
- Environment variables configureren in Vercel
|
|
- Supabase redirect URLs instellen voor productie
|
|
- Een deployment checklist doorlopen
|
|
- Lighthouse gebruiken voor performance audit
|
|
- Basis security checks uitvoeren
|
|
- Productie monitoring begrijpen
|