Deploiement Cloudflare Workers

Cloudflare Workers est ideal pour deployer des sites statiques consommant les APIs ZodBack. C'est la methode utilisee par z-blog et z-portefolio.

Avantages

• Tier gratuit genereux (100 000 requetes/jour)
• CDN global (faible latence)
• Deploiement simple (pas de build step pour du HTML/CSS/JS)
• Auto-deploy via GitHub

Structure du projet

mon-site/
  index.html          # Point d'entree
  js/
    config.js          # Token + API URL
    api.js             # Client fetch
    app.js             # Router / logique
    views/             # Composants de page
  css/
    style.css
  wrangler.toml        # Configuration Cloudflare Workers

Configuration wrangler.toml

name = "mon-site"
main = "index.js"
compatibility_date = "2024-01-01"

[site]
bucket = "."

Important : bucket = "." indique que tout le repertoire est servi en tant qu'assets statiques.

Deploiement manuel

# Installer wrangler (si pas deja fait)
bun add -g wrangler

# Se connecter a Cloudflare
wrangler login

# Deployer
wrangler deploy

Auto-deploy via GitHub

1. Connectez votre repo GitHub a Cloudflare Dashboard > Workers & Pages
2. Selectionnez le repo et la branche main
3. Chaque git push origin main declenche un deploiement automatique

Configurer un domaine personnalise

Dans Cloudflare Dashboard > Workers > votre worker > Settings > Triggers :

1. Ajoutez un Custom Domain (ex: mon-blog.zoddev.site)
2. Cloudflare gere automatiquement le SSL

Pieges a eviter

1. Ne pas ajouter de package.json avec un script build

Si Cloudflare detecte un package.json avec un script build, il tentera un npm run build. Pour un site statique, c'est inutile et peut echouer.

Solution : N'incluez pas de package.json, ou assurez-vous qu'il n'a pas de script build.

2. Ne pas ajouter de fichier _redirects

Les fichiers _redirects (style Netlify) peuvent causer des boucles de redirection dans Cloudflare Workers (erreur 10021).

Solution : Gerez le routing dans votre JavaScript, pas via _redirects.

3. Limite de taille des assets

Cloudflare Workers a une limite de 25 MB pour les assets. Si votre site depasse cette taille :

Solution : Optimisez les images (WebP, compression), utilisez un CDN externe pour les medias lourds.

4. Token dans le code source

Le token API est visible dans le code source (puisque c'est du JS client). C'est acceptable si :

• Le token est read-only
• Les origines sont strictement limitees au domaine du site
• Le token n'accede qu'a des donnees publiques

Exemple complet : z-blog

Le site z-blog (blog.zoddev.site) est un bon modele a suivre :

• Repo : z-blog sur GitHub
• Token : entite blog, permission read, origine https://blog.zoddev.site
• Stack : HTML + Vanilla JS + CSS (pas de framework)
• Deploy : auto via GitHub -> Cloudflare Workers