Déployer votre site Astro sur Netlify

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 le 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 edge-rendered.

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 SSR

Ajoutez l’adaptateur Netlify pour activer le SSR 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.

npx astro add netlify

Si vous préférez installer l’adaptateur manuellement, suivez les deux étapes suivantes :

Installez l’adaptateur @astrojs/netlify dans les dépendances de votre projet en utilisant votre gestionnaire de paquets préféré. Si vous utilisez npm ou n’êtes pas sûr, exécutez ceci dans le terminal :
Fenêtre de terminal
```
npm install @astrojs/netlify
```
Ajoutez deux nouvelles lignes au fichier de configuration de projet astro.config.mjs.
astro.config.mjs
```
import { defineConfig } from 'astro/config';
import netlify from '@astrojs/netlify';

export default defineConfig({
  output: 'server',
  adapter: netlify(),
});
```
Vous pouvez également déployer le middleware Astro de votre projet en utilisant les fonctions Edge de Netlify en ajoutant edgeMiddleware : true à la configuration de l’adaptateur Netlify :
astro.config.mjs
```
import { defineConfig } from 'astro/config';
import netlify from '@astrojs/netlify/functions';

export default defineConfig({
  output: 'server',
  adapter: netlify({
    edgeMiddleware: true
  }),
});
```
Pour utiliser un middleware pour les pages pré-rendues, mettez edgeMiddleware: true. Cela vous permet d’utiliser un middleware pour implémenter l’authentification, les redirections, ou d’autres choses similaires, tout en utilisant une sortie HTML statique.

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 statiques et les sites SSR Astro.

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.

Cliquez sur Add new site sur votre dashboard Netlify
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.
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 build 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 :

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

Plus d’informations sur le “Déploiement d’un dépôt Astro Git existant” (EN) 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 le CLI de Netlify.

Installez le CLI de Netlify globalement :
Fenêtre de terminal
```
npm install --global netlify-cli
```
Exécutez netlify login et suivez les instructions pour vous connecter et autoriser Netlify
Lancez netlify init et suivez les instructions
Confirmez votre commande de build (astro build)

Le CLI détectera automatiquement les paramètres de build (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.
Construire (build) et déployer en poussant (push) vers Git

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

Plus de détails de Netlify sur Déployer un site Astro à l’aide de la CLI Netlify (EN)

Définir une version de Node.js

Si vous utilisez une ancienne image de build (EN) (Xenial) sur Netlify, assurez-vous que votre version de Node.js est définie. Astro requiert la version v18.17.1 or v20.3.0 ou une version plus récente.

Vous pouvez spécifier votre version de Node.js dans Netlify (EN) 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 (EN) pour commencer !