Migrate from SSG to SSR with @astrojs/node adapter so Sanity CMS changes are reflected immediately without rebuild. Separate ports for Astro SSR (4321) and Fastify API (3000) in production. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
213 lines
6.3 KiB
Markdown
213 lines
6.3 KiB
Markdown
# REBOURS — Documentation technique
|
|
|
|
## Architecture du projet
|
|
|
|
```
|
|
rebours/
|
|
├── src/
|
|
│ ├── layouts/
|
|
│ │ └── Base.astro # Layout HTML commun (SEO, fonts, CSS)
|
|
│ ├── lib/
|
|
│ │ └── sanity.mjs # Client Sanity + queries + image helper
|
|
│ ├── pages/
|
|
│ │ ├── index.astro # Page principale (hero, collection, newsletter)
|
|
│ │ ├── collection/
|
|
│ │ │ └── [slug].astro # Pages produits statiques (SSG)
|
|
│ │ ├── success.astro # Page de confirmation Stripe
|
|
│ │ ├── robots.txt.ts # robots.txt généré au build
|
|
│ │ └── sitemap.xml.ts # sitemap.xml généré au build
|
|
│ └── scripts/
|
|
│ └── main.js # JS client (cursor CAD, grid, panel, routing, checkout)
|
|
├── public/
|
|
│ ├── style.css # CSS global
|
|
│ └── assets/ # Images statiques (fallback), favicon, son ambiant
|
|
├── sanity/ # Sanity Studio (projet séparé)
|
|
│ ├── sanity.config.ts
|
|
│ ├── sanity.cli.ts
|
|
│ └── schemas/
|
|
│ ├── product.ts # Schéma produit
|
|
│ └── index.ts
|
|
├── server.mjs # Serveur API Fastify (Stripe uniquement)
|
|
├── astro.config.mjs # Config Astro (SSG, proxy dev)
|
|
├── nginx.conf # Config nginx de référence
|
|
└── .env # Variables d'environnement (non versionné)
|
|
```
|
|
|
|
## Stack
|
|
|
|
| Couche | Techno |
|
|
|--------|--------|
|
|
| Front (SSR) | Astro + HTML/CSS/JS vanilla + GSAP |
|
|
| CMS | Sanity (headless, hébergé) |
|
|
| API | Fastify (Node.js) |
|
|
| Paiement | Stripe Checkout (price_data inline) |
|
|
| Images | Sanity CDN (avec transformations) |
|
|
| Reverse proxy | Nginx |
|
|
| Hébergement | VPS (Debian) |
|
|
| Fonts | Space Mono (Google Fonts) |
|
|
|
|
---
|
|
|
|
## Développement local
|
|
|
|
### Prérequis
|
|
- Node.js >= 18
|
|
- Un compte Sanity avec un projet créé
|
|
- Un fichier `.env` à la racine (voir `.env.example`)
|
|
|
|
### Variables d'environnement (.env)
|
|
```env
|
|
SANITY_PROJECT_ID=your_project_id
|
|
SANITY_DATASET=production
|
|
SANITY_API_TOKEN= # Optionnel
|
|
|
|
STRIPE_SECRET_KEY=sk_test_...
|
|
STRIPE_WEBHOOK_SECRET=whsec_...
|
|
|
|
DOMAIN=http://localhost:4321
|
|
FASTIFY_PORT=3000 # Port Fastify API (prod)
|
|
ASTRO_PORT=4321 # Port Astro SSR (prod)
|
|
```
|
|
|
|
### Lancer le projet
|
|
```bash
|
|
pnpm install
|
|
pnpm dev
|
|
```
|
|
|
|
Cela lance en parallèle (via `concurrently`) :
|
|
- `astro dev` sur http://localhost:4321
|
|
- `node --watch server.mjs` (mode dev)
|
|
|
|
Le proxy Vite dans `astro.config.mjs` redirige `/api/*` vers le serveur Fastify.
|
|
|
|
### Sanity Studio
|
|
```bash
|
|
cd sanity
|
|
npm install
|
|
npx sanity dev
|
|
```
|
|
Accessible sur http://localhost:3333
|
|
|
|
### Build
|
|
```bash
|
|
pnpm build
|
|
# Génère ./dist/ (serveur Astro SSR + assets client)
|
|
```
|
|
|
|
---
|
|
|
|
## CMS — Sanity
|
|
|
|
### Accès
|
|
- Studio local : `npx sanity dev`
|
|
- Studio déployé : `npx sanity deploy`
|
|
- Dashboard : https://www.sanity.io/manage
|
|
|
|
### Schéma Produit
|
|
Champs principaux :
|
|
- **name** : Nom technique (Solar_Altar)
|
|
- **productDisplayName** : Nom affiché (Solar Altar)
|
|
- **slug** : Auto-généré depuis le nom
|
|
- **image** : Image avec hotspot + texte alt
|
|
- **price** : En centimes (180000 = 1 800 EUR). Vide = non disponible
|
|
- **isPublished** : Toggle pour masquer sans supprimer
|
|
|
|
### Ajouter un produit
|
|
1. Ouvrir Sanity Studio
|
|
2. Créer un nouveau document "Produit"
|
|
3. Remplir les champs, uploader l'image
|
|
4. Publier → visible immédiatement sur le site (SSR, pas de rebuild nécessaire)
|
|
|
|
### Images
|
|
Les images sont servies via le CDN Sanity avec transformations automatiques.
|
|
|
|
---
|
|
|
|
## Stripe
|
|
|
|
### Architecture
|
|
Le checkout utilise `price_data` inline — pas de prix pré-créés dans Stripe.
|
|
Quand un client clique "Commander" :
|
|
1. Le front envoie le slug du produit à `/api/checkout`
|
|
2. Le serveur fetch le produit depuis Sanity (prix, nom, image)
|
|
3. Le serveur crée une session Stripe Checkout avec `price_data`
|
|
4. Le client est redirigé vers Stripe
|
|
5. Après paiement : `/success?session_id=...`
|
|
|
|
### Endpoints API
|
|
| Route | Méthode | Description |
|
|
|-------|---------|-------------|
|
|
| `/api/checkout` | POST | Crée une session Stripe Checkout |
|
|
| `/api/session/:id` | GET | Vérifie le statut d'une session |
|
|
| `/api/webhook` | POST | Reçoit les événements Stripe |
|
|
| `/api/health` | GET | Health check |
|
|
|
|
### Configuration
|
|
- Test : clés `sk_test_...` dans `.env`
|
|
- Prod : clés `sk_live_...` dans `.env` sur le serveur
|
|
- Webhook : `https://rebours.studio/api/webhook`
|
|
|
|
---
|
|
|
|
## Production
|
|
|
|
### Serveur : ordinarthur@10.10.0.13
|
|
|
|
### Architecture prod (SSR)
|
|
```
|
|
Internet -> Nginx (port 80) -> / -> proxy -> Astro SSR :4321
|
|
-> /_astro/* -> fichiers statiques (dist/client/)
|
|
-> /api/* -> proxy -> Fastify :3000
|
|
```
|
|
|
|
### Services systemd
|
|
| Service | Port | Rôle |
|
|
|---------|------|------|
|
|
| `rebours-ssr` | 4321 | Astro SSR (pages dynamiques) |
|
|
| `rebours` | 3000 | Fastify API (Stripe, checkout) |
|
|
|
|
### Variables d'environnement en prod
|
|
```env
|
|
SANITY_PROJECT_ID=...
|
|
SANITY_DATASET=production
|
|
STRIPE_SECRET_KEY=sk_live_...
|
|
STRIPE_WEBHOOK_SECRET=whsec_...
|
|
DOMAIN=https://rebours.studio
|
|
FASTIFY_PORT=3000
|
|
ASTRO_PORT=4321
|
|
```
|
|
|
|
### Déploiement
|
|
```bash
|
|
pnpm build
|
|
scp -r dist/* ordinarthur@10.10.0.13:/tmp/rebours-dist/
|
|
ssh ordinarthur@10.10.0.13 "sudo rm -rf /var/www/html/rebours/dist && sudo mkdir -p /var/www/html/rebours/dist && sudo cp -r /tmp/rebours-dist/* /var/www/html/rebours/dist/ && sudo chown -R ordinarthur:ordinarthur /var/www/html/rebours/dist && sudo systemctl restart rebours-ssr"
|
|
```
|
|
|
|
Si server.mjs a changé :
|
|
```bash
|
|
scp server.mjs ordinarthur@10.10.0.13:/tmp/server.mjs
|
|
ssh ordinarthur@10.10.0.13 "sudo cp /tmp/server.mjs /var/www/html/rebours/server.mjs && sudo systemctl restart rebours"
|
|
```
|
|
|
|
---
|
|
|
|
## Routing
|
|
|
|
| URL | Comportement |
|
|
|-----|-------------|
|
|
| `/` | Page principale Astro (SSR, données Sanity live) |
|
|
| `/collection/{slug}` | Page produit (SSR), auto-open panel via `window.__OPEN_PANEL__` |
|
|
| `/success?session_id=...` | Page de confirmation Stripe |
|
|
| `/robots.txt` | Généré au build |
|
|
| `/sitemap.xml` | Généré au build depuis Sanity |
|
|
|
|
---
|
|
|
|
## Fichiers à ne jamais versionner
|
|
- `.env`
|
|
- `node_modules/`
|
|
- `dist/`
|
|
- `sanity/node_modules/`
|