Aller au contenu

@astrojs/ netlify

v5.2.0 GitHub npm Changelog

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 Netlify

Netlify 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 Installation

Astro 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.

Fenêtre de terminal
npx astro add netlify

Installation manuelle

Titre de la section Installation manuelle

Tout d’abord, installez l’adaptateur Netlify dans les dépendances de votre projet en utilisant votre gestionnaire de paquets préféré :

Fenêtre de terminal
npm install @astrojs/netlify

Ensuite, ajoutez l’adaptateur et votre mode de rendu à la demande à votre fichier astro.config.* :

astro.config.mjs
 import { defineConfig } from 'astro/config';
 import netlify from '@astrojs/netlify';


 export default defineConfig({
    // ...
    output: 'server',
    adapter: netlify(),
 });

Utilisation

Titre de la section Utilisation

Lisez 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 :

Fenêtre de terminal
netlify deploy

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 site

Les 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 :

---
const {
  geo: { city },
} = Astro.locals.netlify.context;
---


<h1>Bonjour, aimable visiteur de {city} !</h1>

Si vous utilisez TypeScript, vous pouvez obtenir des typages corrects en mettant à jour src/env.d.ts pour utiliser NetlifyLocals :

src/env.d.ts
/// <reference path="../.astro/types.d.ts" />
/// <reference types="astro/client" />


type NetlifyLocals = import('@astrojs/netlify').NetlifyLocals


declare namespace App {
  interface Locals extends 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 Edge

Tout 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 :

astro.config.mjs
import { defineConfig } from 'astro/config';
import netlify from '@astrojs/netlify';


export default defineConfig({
  // ...
  output: 'server',
  adapter: netlify({
    edgeMiddleware: true,
  }),
});

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 Netlify

Cet 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 :

astro.config.mjs
import { defineConfig } from 'astro/config';
import netlify from '@astrojs/netlify';


export default defineConfig({
  // ...
  output: 'server',
  adapter: netlify({
    imageCDN: false,
  }),
});

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 :

astro.config.mjs
import { defineConfig } from 'astro/config';
import netlify from '@astrojs/netlify';


export default defineConfig({
    // ...
    output: 'server',
    adapter: netlify(),
    image: {
      domains: ['exemple.com'],
    },
});

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 Netlify

Pour 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 statiques

Les 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é.

astro.config.mjs
import { defineConfig } from 'astro/config';
import netlify from '@astrojs/netlify/static';


export default defineConfig({
  // ...
  adapter: netlify(),
  redirects: {
    '/blog/old-post': '/blog/new-post',
  },
});

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.

Mise en cache des pages

Titre de la section Mise en cache des pages

Les 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 :

astro.config.mjs
export default defineConfig({
  // ...
  output: 'server',
  adapter: netlify({
    cacheOnDemandPages: true,
  }),
});

Cela peut être modifié page par page en ajoutant des en-têtes de mise en cache à votre réponse :

pages/index.astro
---
import Layout from '../components/Layout.astro';


Astro.response.headers.set('CDN-Cache-Control', 'public, max-age=45, must-revalidate');
---


<Layout title="Astro on Netlify">
  {new Date()}
</Layout>

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

Plus d'intégrations

Framework d'interface utilisateur

Adaptateurs SSR

Autres intégrations