Déployer Nuxt sur Netlify

Comment déployer Nuxt sur Netlify ?

Le déploiement sur Netlify est une option simple et rapide afin de mettre en ligne un site généré statiquement avec Nuxt.

Le cœur du processus utilise la commande nuxt generate(<= v2.12) pendant le déploiement pour créer une version statique de votre application Nuxt dans un répertoire dist. Le contenu de ce répertoire est ensuite déployé sur une URL de production.

Commencer

Appuyez sur le bouton "New site from Git" du tableau de bord Netlify.

Authentifiez-vous auprès de votre hébergeur Git puis sélectionnez un repository à déployer et continuez.

Vous devriez atterrir à l'étape 3: "Build options, and deploy!"

Configurer

Pour un site généré statiquement

Assurez-vous que vous avez target: 'static' dans votre nuxt.config.

1. Branche à déployer: main, ou la branche que vous préférez
2. Commande de construction: npm run generate
3. Répertoire de publication: dist

Pour le rendu côté client uniquement

Assurez-vous que vous avez target: 'static' et ssr: false dans votre nuxt.config.

1. Branche à déployer: main, ou la branche que vous préférez
2. Commande de construction: npm run generate
3. Répertoire de publication: dist

Pour le rendu côté client, il y a un problème d'actualisation car par défaut sur Netlify le site redirige vers "404 not found". Pour toutes les pages qui ne sont pas générées, elles reviendront en mode SPA, puis si vous actualisez ou partagez ce lien, vous obtiendrez la page 404 de Netlify. C'est parce que les pages qui ne sont pas générées n'existent pas réellement. En redirigeant vers le 404.html, Nuxt rechargera correctement votre page dans SPA fallback.

Le moyen le plus simple de résoudre ce problème est d'ajouter une propriété generate dans votre nuxt.config et en définissant fallback: true. Ainsi, il reviendra au 404.html généré en mode SPA au lieu de la page 404 de Netlify.

export default {
  generate: {
    fallback: true
  }
}

Si toutefois vous souhaitez appliquer automatiquement les en-têtes et les redirections de l'application, il existe un module pour cela, particulièrement utile pour les headers/redirects custom (dans un _headers ou _redirects):

netlify-files-module

Pour plus d'informations sur les redirections Netlify, consultez la documentation Netlify .

Pour une référence simple sur les redirections Netlify, lisez cet article de blog by Divya Sasidharan

En option, vous pouvez ajouter des variables ENV supplémentaires via le bouton "Advanced". Celles-ci peuvent être utiles pour échanger des informations d'identification d'API alternatives, etc. Netlify fournit également des variables ENV par défaut qui peuvent être lues par votre application Nuxt au moment de la construction.

Cliquez sur "Deploy site" pour déclencher immédiatement un déploiement. Votre site Netlify recevra une URL aléatoire et sera déployé à l'aide de la commande nuxt generate.

Voilà ! Votre application Nuxt est désormais hébergée sur Netlify !