Aller au contenu

@astrojs/ netlify

v5.1.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 dans les fonctions Edge

Titre de la section Exécution du middleware Astro dans les fonctions 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/functions';


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

Configurer edgeMiddleware : true déploiera votre middleware en tant que fonction de pointe, et l’exécutera sur toutes les routes, y compris les pages pré-rendues. Cependant, les locaux spécifiés dans le middleware ne seront pas disponibles pour les pages pré-rendues, parce qu’elles ont déjà été entièrement rendues au moment de la construction.

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/functions';


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

Sites statiques et redirections

Titre de la section Sites statiques et redirections

Pour les sites statiques, vous n’avez généralement pas besoin d’adaptateur. Cependant, 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