Hébergement d'un site statique généré avec Nuxt sur Bunny.net

Comme je l'ai déjà expliqué dans plusieurs articles, j'essaie de réduire ma dépendance à la Tech US. Or, j'utilise maintenant Netlify depuis quelques années pour héberger plusieurs sites :

• eventuallycoding.com (ce blog)
• bloggrify.com (un projet open source qui fait tourner ce blog)
• tous les sites de démo pour les templates de bloggrify (minimalist.bloggrify.com, mistral.bloggrify.com etc...)

Et même si j'apprécie Netlify, il existe des alternatives en Europe, donc je souhaitais essayer de migrer.

Netlify et ses alternatives

Avant de commencer, il faut comprendre ce qu'est Netlify et comment se définissent ces alternatives.

Netlify est un un PAAS, une plateforme pour faire tourner des applications de type Jamstack.

Jamstack étant une approche architecturale qui repose sur Javascript et le fait de faire tourner l'application en grande partie côté client avec des appels API quand c'est nécessaire. Netlify est d'ailleurs le principal acteur privé derrière la communauté Jamstack et pousse cette approche dans l'industrie.

Bref, c'est une plateforme dans laquelle on va trouver des notions de builds, de déploiement, d'extensions (auth, database, cms etc...)

Si on devait citer des alternatives dans le même coeur de métier, et plug and play, on pourrait lister :

• Vercel (qui a connu plusieurs polémiques autour du soutien de son CEO à Trump ou à Netanyahu)
• Cloudflare pages
• Firebase

Sauf que toutes ces plateformes sont US.

Il existe d'autres solutions, plus généralistes et cette fois on peut trouver des solutions Européennes : Scalingo ou Clever Cloud.

Mais il y a une solution qui est souvent oubliée : Bunny.net.

Bunny.net

A l'origine, Bunny.net n'est pas un concurrent à proprement parler de netlify. Bunny.net est avant tout un CDN et se compare davantage à Cloudflare. Sauf que, comme Cloudflare, ils ont su évoluer pour proposer des fonctionnalitées avancées permettant de faire tourner des applications jamstack simple sur leur CDN.

Attention, c'est moins abouti qu'un Netlify ou qu'un Cloudflare, on retrouvera moins de services et il faut soi-même assembler une "storage zone" et une "pull zone" pour assembler son site. On le verra plus loin, il y a d'autres petites limitations. Mais à côté de ca on retrouve par contre un très bon service anti DDOS ou des limites de consommation (pour éviter les factures 100 000 dollars de Netlify...), des services d'optimisations d'images, de l'optimisation de ressources, un bouclier anti bot, bref, tout ce dont j'ai besoin pour des blogs statiques.

Maintenant, passons à la pratique et voyons comment j'ai migré Bloggrify.

Cas pratique: Migration de Bloggrify

Bloggrify est un projet opensource, une sorte de Docus mais pour les blogs. Et si vous ne connaissez pas Docus, cette phrase n'a sans doute aucun sens :)

Mais peu importe, ce qu'il faut retenir c'est que c'est un générateur de blog statique et qui dit statique, dit déployable sur un CDN.

Pull zone et storage zone

La première chose à faire, nous allons créer une zone de stockage pour les fichiers (storage zone) :

Quand la zone est crée, il faut la connecter à une "pull zone". Ce sera cette "pull zone" qui permettra de servir le site web.

Maintenant dans la zone de stockage, il faut aller dans FTP & Api access pour récupérer le mot de passe permettant d'utiliser l'API.

Configurer le déploiement automatique avec bunny-deploy

Un de mes critères pour migrer c'était évidemment de ne pas perdre l'automatisation de mes déploiements. Or il se trouve qu'il existe un plugin compatible avec Github actions pour le déploiement sur Bunny.

Ici il faut donc rajouter ces étapes :

    - name: Generate static site
      run: npm run generate

    - name: Deploy to Bunny
      uses: R-J-dev/bunny-deploy@v2.1.1
      with:
        access-key: ${{ secrets.BUNNY_ACCESS_KEY }}
        directory-to-upload: ".output/public"  # Nuxt 3
        storage-endpoint: "https://storage.bunnycdn.com"
        storage-zone-name: "bloggrify"
        storage-zone-password: ${{ secrets.BUNNY_STORAGE_ZONE_PASSWORD }}
        enable-delete-action: true
        enable-purge-pull-zone: true
        pull-zone-id: "5063091"
        concurrency: 50
        replication-timeout: "15000"
        request-timeout: "5000" # optional, defaults to 5000
        retry-limit: "3" # optional, defaults to 3

Au préalable il faut avoir renseigné la BUNNY_ACCESS_KEY et le BUNNY_STORAGE_ZONE_PASSWORD dans les secrets de votre repository.

Evidemment la storage-zone-name est le nom de la zone défini dans Bunny, ici bloggrify pour mon cas.

Configurer le nom de domaine

A ce stade, vous avez sans doute votre site sur une url bunny, par exemple bloggrify-mistral.b-cdn.net. Cependant il est possible d'ajouter un custom hostname :

Ceci vous demandera de configurer votre DNS pour ajouter un ALIAS ou un CNAME sur votre DNS.

Eviter les factures délirantes

Bunny permet de limiter la conso et de se protéger des attaques DDOS. Pour cela, il faut choisir la pull zone, aller dans Network limits, et créer une "monthly bandwidth limit". J'ai mis 1GB en considérant que le traffic n'est pas excessif sur Bloggrify.

En plus de cela, vous pouvez aller dans Shield, choisir le plan gratuit, et sélectionner la protection DDoS. Vous pouvez ajuster la sensibilité en fonction de ce qui vous semble juste.

Paramétrage de nitro

Dans le cas très spécifique de Nuxt, et surtout de Docus, vous pourriez rencontrer un problème. En effet le site généré contient des répertoires sans index.html.

Par exemple :

• introduction/configuration qui contient les ressources de la page configuration
• introduction/configuration.html

Mais si on tape sur https://bloggrify.com/introduction/configuration, par défaut on obtient une 404 parce que personne ne réécrit l'url vers le fichier html. Donc il faut dire explicitement à Nitro de changer sa façon de générer les fichiers :

export default defineNuxtConfig({
  nitro: {
    prerender: {
      autoSubfolderIndex: true
    }
  }
})

En faisant cela, on va générer cette fois :

• introduction/configuration/index.html, et cette fois ça marche.

Cette gymnastique n'est pas nécessaire sur Netlify qui gère très bien cela mais pour Bunny il faut l'aider un peu.

Et.... c'est terminé.

Alors certes la mise en place est un peu plus exigeante que Netlify mais désormais bloggrify.com fonctionne sur Bunny et je migre progressivement les autres sites. L'objectif est atteint et je ferai peut être un suivi dans les mois qui viennent.