Pour déployer sur les [Cloudflare Workers](https://workers.cloudflare.com/) ou les [Cloudflare Pages](https://pages.cloudflare.com/), utilisez l'adaptateur [`adapter-cloudflare`](https://github.com/sveltejs/kit/tree/main/packages/adapter-cloudflare). Cet adaptateur sera installé par défaut lorsque vous utilisez [`adapter-auto`](adapter-auto). Si vous prévoyez de rester sur Cloudflare, vous pouvez directement passer de [`adapter-auto`](adapter-auto) à cet adaptateur afin que la plateforme `event.platform` soit émulée lors du développement local, que les déclarations de type soient automatiquement appliquées et que la possibilité de définir des options spécifiques à Cloudflare soit activée. ## Comparaisons [!VO]Comparisons - `adapter-cloudflare` – supporte toutes les fonctionnalités de SvelteKit ; compile pour Cloudflare Workers Static Assets et Cloudflare Pages - `adapter-cloudflare-workers` – déprécié. Supporte toutes les fonctionnalités de SvelteKit ; compile pour Cloudflare Workers Site - `adapter-static` – ne produit que des assets statique client ; compatible avec Cloudflare Workers Static Assets et Cloudflare Pages ## Usage Installez l'adaptateur avec `npm i -D @sveltejs/adapter-cloudflare`, puis ajoutez-le à votre fichier `svelte.config.js` : ```js /// file: svelte.config.js import adapter from '@sveltejs/adapter-cloudflare'; export default { kit: { adapter: adapter({ // Voir plus bas pour une explication de ces options config: undefined, platformProxy: { configPath: undefined, environment: undefined, persist: undefined }, fallback: 'plaintext', routes: { include: ['/*'], exclude: [''] } }) } }; ``` ## Options ### config Chemin vers votre [fichier de configuration Wrangler](https://developers.cloudflare.com/workers/wrangler/configuration/). Si vous souhaitez utiliser un nom de fichier de configuration Wrangler autre que `wranglet.jsonc`, `wrangler.json`, ou `wrangler.toml`, vous pouvez le préciser avec cette option. ### platformProxy Les préférences pour les liaisons locales émulées `platform.env`. Voir la [documentation d'API de Wrangler qui traite de `getPlatformProxy`](https://developers.cloudflare.com/workers/wrangler/api/#parameters-1) pour plus de détails. ### fallback Si oui ou non afficher une page 404.html en texte pur, ou une page de secours rendue en SPA pour les requêtes ne correspondant à aucun asset. Pour les Cloudflare Workers, le comportement par défaut est de renvoyer une réponse 404 avec un body vide pour les requêtes ne correspondant à aucun asset. Cependant, si l'option de configuration de Wrangler [`assets.not_found_handling`](https://developers.cloudflare.com/workers/static-assets/routing/#2-not_found_handling) vaut `"404-page"`, cette page sera servie si une requête échoue à correspondre un asset. Si `asset.not_found_handling` est défini comme `"single-page-application"`, l'adaptateur va rendre une page de secours index.html en SPA indépendamment de l'option `fallback` précisée. Pour les Cloudflare Pages, cette page sera uniquement servie lorsqu'une requête correspondant à une entrée précisée dans `routes.exclude` échoue à correspondre à un asset. La plupart du temps `plaintext` suffit, mais si vous utilisez `routes.exclude` pour manuellement exclure un ensemble de pages pré-rendues sans dépasser la limite de 100 routes, vous pourriez souhaiter plutôt utiliser `spa` pour éviter afficher une page 404 sans aucun style à vos utilisateurs et utilisatrices. Voir la section [Comportement Not Found](https://developers.cloudflare.com/pages/configuration/serving-pages/#not-found-behavior) dans la documentation de Cloudflare pour plus d'infos. ### routes Uniquement pour les Cloudflare Pages. Vous permet de personnaliser le fichier [`_routes.json`](https://developers.cloudflare.com/pages/functions/routing/#create-a-_routesjson-file) généré par `adapter-cloudflare`. - `include` définit les routes qui vont invoquer une fonction, et vaure `['/*']` par défaut - `exclude` définit les routes qui ne vont _pas_ invoquer une fonction — c'est une façon plus rapide et moins chère de servir les assets statiques de votre application. Ce tableau peut inclure les valeurs spéciales suivantes : - `` contient les artéfacts de compilation de votre application (les fichiers générés par Vite) - `` contient le contenu de votre dossier `static` - `` contient une liste des pages pré-rendues - `` (par défaut) contient tout ce qui précisé juste au-dessus Vous pouvez avoir jusqu'à 100 règles `include` et `exclude` combinées. Généralement, vous pouvez omettre l'option `routes`, mais si (par exemple) vos chemins `` excèdent cette limite, vous pourriez trouver utile de créer manuellement une liste `exclude` qui inclut `'/articles/*'` plutôt que la liste auto-générée `['/articles/foo', '/articles/bar', '/articles/baz', ...]`. ## Cloudflare Workers ### Configuration de base [!VO]Basic configuration Lorsque vous compilez pour les Cloudflare Workers, cet adaptateur s'attend à trouver le [fichier de configuration Wrangler](https://developers.cloudflare.com/workers/configuration/sites/configuration/) à la racine du projet. Il devrait ressembler à quelque chose comme ça : ```jsonc /// file: wrangler.jsonc { "name": "", "main": ".svelte-kit/cloudflare/_worker.js", "compatibility_date": "2025-01-01", "assets": { "binding": "ASSETS", "directory": ".svelte-kit/cloudflare", } } ``` ### Déploiement [!VO]Deployment Merci de suivre le [guide dédié aux frameworks](https://developers.cloudflare.com/workers/frameworks/framework-guides/svelte/) pour vous lancer avec les Cloudflare Workers. ## Cloudflare Pages ### Déploiement [!VO]Deployment Merci de suivre le [Guide Get Started](https://developers.cloudflare.com/pages/get-started/) pour vous lancer avec les Cloudflare Pages. Si vous utilisez l'[intégration Git](https://developers.cloudflare.com/pages/get-started/git-integration/) vos paramètres de compilation devraient ressembler à ça : - **Framework preset** – SvelteKit - **Build command** – `npm run build` ou `vite build` - **Build output directory** – `.svelte-kit/cloudflare` ### Plus de lecture [!VO]Further reading Vous devriez vous référer à la [documentation de Cloudflare pour déployer un site SvelteKit sur les Cloudflare Pages](https://developers.cloudflare.com/pages/framework-guides/deploy-a-svelte-kit-site/). ### Notes Les fonctions présentes dans le [dossier `/functions`](https://developers.cloudflare.com/pages/functions/routing/) à la racine du projet ne seront _pas_ incluses dans le déploiement. À la place, les fonctions devraient être implémentées en tant que [endpoints de serveur](routing#server) dans votre application SvelteKit, qui sont compilées en [un seul fichier `_workers.js`](https://developers.cloudflare.com/pages/functions/advanced-mode/). ## APIs de runtime [!VO]Runtime APIs L'objet [`env`](https://developers.cloudflare.com/workers/runtime-apis/fetch-event#parameters) contient les [liaisons](https://developers.cloudflare.com/workers/runtime-apis/bindings/) de votre projet, qui consistent en des namespaces KV/DO, etc. Il est passé à SvelteKit via la propriété `platform`, de même que [`context`](https://developers.cloudflare.com/workers/runtime-apis/context/), [`caches`](https://developers.cloudflare.com/workers/runtime-apis/cache/), et [`cf`](https://developers.cloudflare.com/workers/runtime-apis/request/#incomingrequestcfproperties), ce qui signifie que vous pouvez y accéder dans les hooks et les endpoints : ```js // @errors: 7031 export async function POST({ request, platform }) { const x = platform.env.YOUR_DURABLE_OBJECT_NAMESPACE.idFromName('x'); } ``` > [!NOTE] Le module intégré de [`$env`]($env-static-private) devrait être préféré pour les variables > d'environnement. Pour rendre ces types disponibles dans votre application, installez [`@cloudflare/workers-types`](https://www.npmjs.com/package/@cloudflare/workers-types) et référencez-les dans votre fichier `src/app.d.ts` : ```ts /// file: src/app.d.ts +++import { KVNamespace, DurableObjectNamespace } from '@cloudflare/workers-types';+++ declare global { namespace App { interface Platform { +++ env?: { YOUR_KV_NAMESPACE: KVNamespace; YOUR_DURABLE_OBJECT_NAMESPACE: DurableObjectNamespace; };+++ } } } export {}; ``` ### Tester en local [!VO]Testing locally Les valeurs spécifiques à Cloudflare dans la propriété `platform` sont émulées lors du développement et de la prévisualisation. Les [liaisons](https://developers.cloudflare.com/workers/wrangler/configuration/#bindings) locales sont créées en fonction de votre [fichier de configuration Wrangler](https://developers.cloudflare.com/workers/wrangler/) et sont utilisées pour remplir `platform.env` lors du développement et de la prévisualisation. Utilisez la configuration [`platformProxy`](#Options-platformProxy) de l'adaptateur pour changer vos préférences de liaison. Pour tester le projet compilé, vous devriez utiliser la **version 4** de [Wrangler](https://developers.cloudflare.com/workers/wrangler/). Une fois que vous avez compilé votre site, lancez `wrangler dev .svelte-kit/cloudflare` si vous testez pour les Cloudflare Workers ou `wrangler pages dev .svelte-kit/cloudflare` si vous testez pour les Cloudflare Pages. ## En-têtes et redirections [!VO]Headers and redirects Les fichiers [`_headers`](https://developers.cloudflare.com/pages/configuration/headers/) et [`_redirects`](https://developers.cloudflare.com/pages/configuration/redirects/), spécifiques à Cloudflare, peuvent être utilisés pour les réponses d'assets statiques (comme les images) en les plaçant à la racine de votre projet. Cependant, ils n'auront aucun effet pour les réponses rendues dynamiquement par SvelteKit, qui devraient renvoyer des réponses d'en-tête ou de redirection personnalisées depuis vos [endpoints de serveur](routing#server) ou grâce au hook [`handle`](hooks#Server-hooks-handle). ## Résolution de problèmes [!VO]Troubleshooting ### Compatibilité avec Node.js [!VO]Node.js compatibility Si vous souhaitez activer la [compatibilité avec Node.js](https://developers.cloudflare.com/workers/runtime-apis/nodejs/), vous pouvez ajouter l'option de compatibilité `nodejs_compat` à votre fichier de configuration : ```jsonc /// file: wrangler.jsonc { "compatibility_flags": ["nodejs_compat"] } ``` ### Limites de taille des workers [!VO]Worker size limits Lorsque vous déployez votre application, le serveur généré par SvelteKit est compilé en un seul fichier. Wrangler va échouer à publier votre worker s'il excède les [limites de taille](https://developers.cloudflare.com/workers/platform/limits/#worker-size) après minification. Il est normalement peu probable que vous dépassiez cette limite, mais certaines grosses librairies peuvent vous les faire dépasser. Dans ce cas, vous pouvez essayer de réduire la taille de votre worker en n'important ces librairies que côté client. Voir la [FÀQ](./faq#How-do-I-use-a-client-side-library-accessing-document-or-window) pour plus d'informations. ### Accéder au système de fichiers [!VO]Accessing the file system Vous ne pouvez pas utiliser `fs` dans les Cloudflare Workers — vous devez [pré-rendre](page-options#prerender) les routes en question. ## Migrer depuis Workers Sites [!VO]Migrating from Workers Sites Cloudflare ne recommande plus d'utiliser les [Workers Sites](https://developers.cloudflare.com/workers/configuration/sites/configuration/) et recommande plutôt d'utiliser les [Workers Static Assets](https://developers.cloudflare.com/workers/static-assets/). Pour migrer, remplacez `@sveltejs/adapter-cloudflare-workers` par `@sveltejs/adapter-cloudflare` et supprimez tous les paramètres de configuration `site` de votre fichier de configuration Wrangler, puis ajoutez-y les paramètres de configuration `assets.directory` et `assets.bindings` : ### svelte.config.js ```js /// file: svelte.config.js ---import adapter from '@sveltejs/adapter-cloudflare-workers';--- +++import adapter from '@sveltejs/adapter-cloudflare';+++ export default { kit: { adapter: adapter() } }; ``` ### wrangler.toml ```toml /// file: wrangler.toml ---site.bucket = ".cloudflare/public"--- +++assets.directory = ".cloudflare/public" assets.binding = "ASSETS"+++ ``` ### wrangler.jsonc ```jsonc /// file: wrangler.jsonc { --- "site": { "bucket": ".cloudflare/public" },--- +++ "assets": { "directory": ".cloudflare/public", "binding": "ASSETS" }+++ } ```