@astrojs/ netlify
Cet adaptateur permet à Astro de déployer votre site rendu hybride
ou serveur
sur Netlify.
Si vous utilisez Astro en tant que constructeur de site statique, vous n’avez pas besoin d’adaptateur.
Apprenez à déployer votre site Astro dans notre Guide de déploiement Netlify.
Pourquoi Astro Netlify
Titre de la section Pourquoi Astro NetlifyNetlify est une plateforme de déploiement qui vous permet d’héberger votre site en vous connectant directement à votre dépôt GitHub. Cet adaptateur améliore le processus de construction d’Astro pour préparer votre projet à être déployé via Netlify.
Installation
Titre de la section InstallationAstro inclut une commande astro add
pour automatiser l’installation des intégrations officielles. Si vous préférez, vous pouvez installer les intégrations manuellement à la place.
Ajoutez l’adaptateur Netlify pour activer SSR dans votre projet Astro avec la commande astro add
.
Cela installera @astrojs/netlify
et apportera les changements appropriés à votre fichier astro.config.mjs
en une seule étape.
Installation manuelle
Titre de la section Installation manuelleTout d’abord, installez l’adaptateur Netlify dans les dépendances de votre projet en utilisant votre gestionnaire de paquets préféré :
Ensuite, ajoutez l’adaptateur et votre mode de rendu à la demande à votre fichier astro.config.*
:
Utilisation
Titre de la section UtilisationLisez le guide de déploiement complet ici
Suivez les instructions pour construire votre site localement. Après la construction, vous aurez un dossier .netlify/
contenant à la fois Netlify Functions dans le dossier .netlify/functions-internal/
et Netlify Edge Functions dans le dossier .netlify/edge-functions/
.
Pour déployer votre site, installez le Netlify CLI et exécutez-le :
Le blog de Netlify sur Astro et la documentation de Netlify fournissent plus d’informations sur la manière d’utiliser cette intégration pour déployer vers Netlify.
Accès au contexte Edge depuis votre site
Titre de la section Accès au contexte Edge depuis votre siteLes fonctions Netlify Edge fournissent un objet de contexte qui comprend des métadonnées sur la demande, telles que l’IP de l’utilisateur, les données de géolocalisation et les cookies.
Cet objet est accessible via l’objet Astro.locals.netlify.context
:
Si vous utilisez TypeScript, vous pouvez obtenir des typages corrects en mettant à jour src/env.d.ts
pour utiliser NetlifyLocals
:
Ceci n’est pas disponible sur les pages pré-rendues.
Exécution du middleware Astro sur les fonctions Netlify Edge
Titre de la section Exécution du middleware Astro sur les fonctions Netlify EdgeTout middleware Astro est appliqué aux pages pré-rendues au moment de la création, et aux pages pré-rendues au moment de l’exécution.
Pour implémenter des redirections, des contrôles d’accès ou des en-têtes de réponse personnalisés pour les pages pré-rendues, exécutez votre middleware sur les fonctions Edge de Netlify en activant l’option edgeMiddleware
:
Lorsque edgeMiddleware
est activé, une fonction edge exécutera votre code middleware pour toutes les requêtes, y compris les actifs statiques, les pages pré-rendues et les pages rendues à la demande.
Pour les pages rendues à la demande, l’objet context.locals
est sérialisé en utilisant du JSON et envoyé dans un en-tête pour la fonction serverless, qui effectue le rendu. Comme mesure de sécurité, la fonction serverless refusera de servir les requêtes avec une réponse 403 Forbidden
à moins qu’elles ne proviennent de la fonction edge générée.
Support du CDN d’images Netlify
Titre de la section Support du CDN d’images NetlifyCet adaptateur utilise par défaut le Netlify Image CDN pour transformer les images à la volée sans impacter sur les temps de construction. Il est implémenté en utilisant un Astro Image Service sous le capot.
Pour ne pas utiliser l’optimisation d’image à distance du CDN de Netlify, utilisez l’option imageCDN
:
Si vous utilisez des images hébergées sur un autre domaine, vous devez autoriser les chaînes de domaines ou d’URL en utilisant les options de configuration image.domains
ou image.remotePatterns
:
Pour plus d’informations, voir le guide d’autorisation des images distantes. Cela n’est pas nécessaire pour les images hébergées sur le même domaine que votre site.
Sites statiques avec l’adaptateur Netlify
Titre de la section Sites statiques avec l’adaptateur NetlifyPour les sites statiques (output : 'static'
) hébergés sur Netlify, vous n’avez généralement pas besoin d’adaptateur. Cependant, certaines fonctionnalités de déploiement ne sont disponibles qu’à travers un adaptateur.
Sites statiques
Titre de la section Sites statiquesLes sites statiques devront installer cet adaptateur pour utiliser et configurer le service d’image de Netlify.
Si vous utilisez la configuration redirects
dans votre configuration Astro, l’adaptateur Netlify peut être utilisé pour traduire cette configuration au format _redirects
approprié.
Une fois que vous avez lancé astro build
, il y aura un fichier dist/_redirects
. Netlify l’utilisera pour router correctement les pages en production.
Vous pouvez toujours inclure un fichier public/_redirects
pour les redirections manuelles. Toutes les redirections que vous spécifiez dans la configuration des redirections sont ajoutées à la fin de la vôtre.
Mise en cache des pages
Titre de la section Mise en cache des pagesLes pages rendues à la demande sans contenu dynamique peuvent être mises en cache pour améliorer les performances et réduire l’utilisation des ressources.
L’activation de l’option cacheOnDemandPages
dans l’adaptateur mettra en cache toutes les pages rendues par le serveur pour une durée maximale d’un an :
Cela peut être modifié page par page en ajoutant des en-têtes de mise en cache à votre réponse :
Avec fine-grained cache control, Netlify prend en charge
les en-têtes de cache standard comme CDN-Cache-Control
ou Vary
.
Reportez-vous à la documentation pour en savoir plus sur la mise en place, par exemple, de la mise en cache TTL (time to live) ou SWR (stale while revalidate) : https://docs.netlify.com/platform/caching
Exemples
Titre de la section Exemples-
Le modèle de démarrage Astro avec Edge fournit un exemple et un guide dans le README.
-
Parcourir les projets Astro Netlify sur GitHub pour plus d’exemples !