Cloudflare Pages

Pour déployer sur Cloudflare Pages, utilisez adapter-cloudflare.

Cet adaptateur est installé par défaut lorsque vous utilisez adapter-auto. Si vous prévoyez de rester sur Cloudflare Pages, vous pouvez supprimer adapter-auto pour utiliser directement cet adaptateur de sorte que les déclarations de types soit automatiquement appliquées et que vous puissiez utiliser les options spécifiques à Cloudflare.

Comparaisonspermalink

• adapter-cloudflare – supporte toutes les fonctionnalités de SvelteKit ; compile pour Cloudflare Pages
• adapter-cloudflare-workers – supporte toutes les fonctionnalités de SvelteKit ; copmile pour Cloudflare Workers
• adapter-static – produit uniquement des fichiers statiques pour le client ; compatible avec Cloudflare Pages

Usagepermalink

Installez l'adaptateur avec npm i -D @sveltejs/adapter-cloudflare, puis ajoutez-le à votre fichier svelte.config.js :

ts
import adapter from '@sveltejs/adapter-cloudflare';
Cannot find module '@sveltejs/adapter-cloudflare' or its corresponding type declarations.2307Cannot find module '@sveltejs/adapter-cloudflare' or its corresponding type declarations.

export default {
	kit: {
		adapter: adapter({
			// Voir plus bas pour une explication de ces options
			routes: {
				include: ['/*'],
				exclude: ['<all>']
			}
		})
	}
};

Optionspermalink

L'options routes vous permet de personnaliser le fichier _routes.json généré par adapter-cloudflare.

• include définit les routes qui vont invoquer une fonction, et vaut ['/*'] par défaut
• exclude définit les routes qui ne vont pas invoquer une fonction – c'est une méthode plus rapide et moins coûteuse de servir les fichiers statiques de votre application. Ce tableau peut inclure les valeurs spéciales suivantes :
  • <build> contient les artefacts de compilation de votre application (les fichiers sont générés par Vite)
  • <files> contient le contenu de votre dossier static
  • <prerendered> contient une liste de pages prérendues
  • <all> (valeur par défaut) contient tout ce qui est listé au-dessus

Vous pouvez avoir jusqu'à 100 règles include et exclude combinées. Vous pouvez en général omettre l'option routes, mais si (par exemple) vos chemins <prerendered> dépassent cette limite, vous trouverez probablement utile de créer manuellement une liste exclude qui contient 'articles/*' plutôt que la liste auto-générée ['/articles/foo', '/articles/bar', '/articles/baz', ...].

Déploiementpermalink

Merci de suivre le guide de Cloudflare Pages Get Started Guide (en anglais) pour commencer.

Lorsque vous configurez vos paramètres de projet, vous devez utiliser les paramètres suivants :

• Framework preset – SvelteKit
• Build command – npm run build ou vite build
• Build output directory – .svelte-kit/cloudflare

Bindingspermalink

L'objet env contient les bindings de votre projet, qui consistent en des namespaces KV/DO, etc. Il est fourni à SvelteKit via la propriété platform, conjointement à context et caches, ce qui signifie que vous pouvez y accéder dans les hooks et les endpoints :

ts
export async function POST({ request, platform }) {
Binding element 'request' implicitly has an 'any' type.
Binding element 'platform' implicitly has an 'any' type.7031
7031Binding element 'request' implicitly has an 'any' type.
Binding element 'platform' implicitly has an 'any' type.
	const x = platform.env.YOUR_DURABLE_OBJECT_NAMESPACE.idFromName('x');
}

Vous devriez plutôt utiliser le module intégré de SvelteKit $env pour gérer vos variables d'environnement.

Pour rendre ces types accessibles dans votre application, référencez-les dans votre fichier src/app.d.ts :

declare global {
	namespace App {
		interface Platform {
			env?: {
				YOUR_KV_NAMESPACE: KVNamespace;
				YOUR_DURABLE_OBJECT_NAMESPACE: DurableObjectNamespace;
			};
		}
	}
}

export {};

Tester localementpermalink

platform.env est uniquement accessible dans le build final, et donc pas en mode développement. Pour tester le build, vous pouvez utiliser wrangler version 3. Une fois que vous avez compilé votre site, lancez la commande wrangler pages dev .svelte-kit/cloudflare. Assurez-vous d'avoir vos bindings dans votre fichier wrangler.toml.

Notespermalink

Les fonctions contenues dans le dossier /functions à la racine de votre projet ne seront pas inclues dans le déploiement, qui est compilé en un seul fichier _worker.js. Les fonctions devraient être implémentées en tant que endpoints de serveur dans votre application SvelteKit.

Les fichiers _headers et _redirects spécifiques à Cloudflare Pages peuvent être utilisés pour les réponses de fichiers statiques (comme les images) en les plaçant dans le dossier /static.

Cependant, ils n'auront aucun effet sur les réponses dynamiquement générées par SvelteKit, qui renvoie des headers personnalisés ou des réponses de redirections depuis les endpoints de serveur ou le hook handle

Résolution de problèmespermalink

Plus de lecturepermalink

Vous pouvez vous référer à la documentation de Cloudflare pour déployer un site SvelteKit (en anglais).

Accès au système de fichierspermalink

Vous ne pouvez pas utiliser fs dans les workers Cloudflare - vous devez prérendre les routes en question.