import ReadMore from '~/components/ReadMore.astro'; import { Steps } from '@astrojs/starlight/components';

Netlify propose des services d'hébergement et de backend sans serveur (serverless) pour les applications web et les sites web statiques. Tout site Astro peut être hébergé sur Netlify !

Ce guide comprend des instructions pour le déploiement sur Netlify via l'interface utilisateur du site Web ou la CLI de Netlify.

Configuration du projet

Votre projet Astro peut être déployé sur Netlify de trois manières différentes : en tant que site statique, en tant que site rendu côté serveur ou en tant que site rendu en périphérie.

Site statique

Votre projet Astro est un site statique par défaut. Vous n'avez besoin d'aucune configuration supplémentaire pour déployer un site Astro statique sur Netlify.

Adaptateur pour le rendu à la demande

Ajoutez l'adaptateur Netlify pour activer le rendu à la demande dans votre projet Astro et déployez vers Netlify avec la commande astro add suivante. Celle-ci installera l'adaptateur et apportera les changements appropriés à votre fichier astro.config.mjs en une seule étape.

bash
npx astro add netlify

Consultez le guide de l'adaptateur Netlify pour installer manuellement à la place, ou pour plus d'options de configuration, telles que le déploiement du middleware Astro de votre projet à l'aide des fonctions Edge de Netlify.

Comment déployer

Vous pouvez déployer sur Netlify via l'interface utilisateur du site Web ou en utilisant l'interface en ligne de commande (CLI) de Netlify. Le processus est le même pour les sites Astro statiques et rendus à la demande.

Déploiement via l'interface utilisateur du site web

Si votre projet est stocké sur GitHub, GitLab, BitBucket, ou Azure DevOps, vous pouvez utiliser l'interface utilisateur de Netlify pour déployer votre site Astro.

  1. Choisissez Import an existing project

    Lorsque vous importez votre dépôt Astro depuis votre fournisseur Git, Netlify devrait automatiquement détecter et pré-remplir les paramètres de configuration corrects pour vous.

  2. Assurez-vous que les paramètres suivants sont saisis, puis appuyez sur le bouton Deploy :

    • Build command : astro build ou npm run build
    • Publish directory : dist

    Après le déploiement, vous serez redirigé vers la page de présentation du site. Vous pourrez y modifier les détails de votre site.

Toute modification future de votre dépôt source déclenchera des déploiements de prévisualisation et de production en fonction de votre configuration de déploiement.

Le fichier netlify.toml

Vous pouvez éventuellement créer un nouveau fichier netlify.toml à la racine de votre dépôt de projet pour configurer votre commande de compilation et votre répertoire de publication, ainsi que d'autres paramètres du projet, y compris les variables d'environnement et les redirections. Netlify lira ce fichier et configurera automatiquement votre déploiement.

Pour configurer les paramètres par défaut, créez un fichier netlify.toml avec le contenu suivant :

toml
[build]  command = "npm run build"  publish = "dist"

Retrouvez plus d'informations sur le « Déploiement d'un dépôt Astro Git existant » (Anglais) sur le blog de Netlify

Déploiement CLI

Vous pouvez également créer un nouveau site sur Netlify et relier votre dépôt Git en installant et en utilisant la CLI de Netlify.

```bash npm install --global netlify-cli ```

2. Exécutez netlify login et suivez les instructions pour vous connecter et autoriser Netlify

  1. Lancez netlify init et suivez les instructions

  2. Confirmez votre commande de compilation (astro build)

    La CLI détectera automatiquement les paramètres de compilation (astro build) et le répertoire de déploiement (dist), et proposera de générer automatiquement un fichier netlify.toml avec ces paramètres.

  3. Compilez et déployez en envoyant vers Git

    La CLI ajoutera une clé de déploiement au dépôt, ce qui signifie que votre site sera automatiquement recompilé sur Netlify chaque fois que vous utiliserez git push.

Plus de détails de Netlify sur le déploiement d'un site Astro à l'aide de la CLI de Netlify (Anglais)

Définir une version de Node.js

Si vous utilisez une ancienne image de la compilation (Anglais) (Xenial) sur Netlify, assurez-vous que votre version de Node.js est définie. Astro nécessite la version v18.20.8 ou v20.3.0 ou une version plus récente.

Vous pouvez spécifier votre version de Node.js dans Netlify (Anglais) en utilisant :

  • un fichier .nvmrc dans votre répertoire de base.
  • une variable d'environnement NODE_VERSION dans les paramètres de votre site en utilisant le tableau de bord du projet Netlify.

Utilisation des fonctions Netlify

Aucune configuration particulière n'est nécessaire pour utiliser les fonctions Netlify avec Astro. Ajoutez un répertoire netlify/functions à la racine de votre projet et suivez la documentation sur les fonctions Netlify (Anglais) pour commencer !

Exemples

Cours Astro