Article

Déployer son application Nuxt 3 sur O2switch avec cpanel

Vues: 1669Catégorie: programmation

BZHWEBCREATON le 4 décembre 2024Modifier le 24 janvier 2025

Déployer son application Nuxt sur o2switch

Introduction

Les applications web de type SPA (Single Page Application) gagnent en popularité grâce à leur capacité à offrir une expérience utilisateur comparable à celle d’une application mobile. Elles se distinguent notamment par leur rapidité de chargement, essentielle pour garantir une navigation fluide.

Cette rapidité est cruciale, non seulement pour maintenir l’intérêt de vos utilisateurs et éviter l’abandon de votre site, mais également pour satisfaire les exigences de Google, qui valorise les sites performants dans son algorithme de référencement.

Dans cet article, nous examinerons d’abord l’intérêt de migrer d’une simple application Vue vers Nuxt en matière de SEO. Ensuite, nous vous guiderons à travers les étapes pour héberger une application vitrine sur o2switch.

Vue est-il performant pour le SEO de mon site web ?

Vue utilise une technique de rendu appelée Client-Side Rendering (CSR). Cela signifie que le rendu des pages s’effectue directement dans le navigateur, en utilisant principalement JavaScript, plutôt que sur un serveur.

L’avantage de cette méthode est qu’après un temps de chargement initial légèrement plus long, le site devient très réactif, car il n’est plus nécessaire de recharger la page pour afficher de nouveaux contenus.

Cependant, cette dépendance au JavaScript peut poser des problèmes pour le référencement naturel (SEO). Bien que Google soit capable d’exécuter du JavaScript, il se peut qu’il ne voie pas immédiatement toutes les informations lors de son premier passage. Par exemple, les balises essentielles de votre en-tête (<head>) pourraient ne pas être détectées, ce qui pourrait retarder l’indexation de vos pages et affecter négativement votre SEO.

Il est également important de noter que les moteurs de recherche concurrents, tels que Yahoo ou Bing, sont encore moins performants que Google dans l’exécution de JavaScript. Même si leur part de marché est plus réduite, il est préférable de ne rien négliger.

De plus, si vous utilisez des outils d’analyse SEO comme SEMRUSH ou AHREF, il est probable qu’ils ne puissent pas correctement analyser votre site basé sur du CSR.

Nuxt comme solution pour améliorer votre SEO

Nuxt est un framework gratuit basé en partie sur Vue.js et Node.js. Son principal atout, qui nous intéresse ici, est le Server-Side Rendering (SSR).

Grâce au SSR, le serveur génère chaque page HTML complète avant de l’envoyer au navigateur. Cela signifie que, lorsque l’utilisateur demande une page, il reçoit immédiatement un contenu complet, sans avoir à attendre le rendu via JavaScript. À chaque nouvelle page demandée, une requête est envoyée au serveur, qui renvoie une page HTML déjà prête.

Cette approche présente un avantage majeur pour le SEO : en fournissant du contenu directement dans le HTML, les moteurs de recherche peuvent indexer plus efficacement les pages de votre site. Le contenu étant disponible immédiatement, il est mieux compris par les robots d’indexation, ce qui peut significativement améliorer votre référencement.

Installer une application Nuxt avec cpanel sur o2switch

Dans un premier temps, il est nécessaire de compiler (build) votre application localement. Si vous utilisez une solution d’hébergement mutualisé, les ressources disponibles risquent d’être insuffisantes pour exécuter cette opération directement sur le serveur.

Pour cela, utilisez la commande suivante :

npm run build

Remarque importante : si vous avez des fichiers .env et .env.production, vous allez avoir besoin de préciser que vous souhaitez compiler votre application avec “.env.production”.
Pour se faire, vous allez ajouter cette ligne (le nom “production” pourra être changé) dans la partie scripts de votre fichier package.json :

"production": "nuxi build --dotenv .env.production"

Au lieu d’écrire npm run build, vous devrez écrire npm run production pour build l’application avec .env.production.
Vous pouvez trouver des informations à ce sujet ici

Cette commande va générer un dossier nommé .output à la racine de votre projet.

Ensuite, vous devez créer un emplacement dédié sur votre serveur pour héberger l’application. Il est important de ne pas placer votre application dans les dossiers www ou public_html. Il est préférable que l’application soit dans un répertoire séparé du domaine principal, afin de protéger vos sources et éviter qu’elles ne soient accessibles à tous en cas d’arrêt de l’application.

Une fois l’emplacement créé, transférez-y le contenu du dossier .output. Vous pouvez utiliser le gestionnaire de fichiers de cPanel ou un client FTP comme FileZilla pour faciliter l’opération.

Cependant, l’opération sera plus rapide en utilisant la fonctionnalité Charger du gestionnaire de fichiers de cPanel. Il vous suffit simplement de compresser les fichiers de votre application, de les charger, puis de faire un clic droit dessus, de les décompresser et de supprimer le fichier compressé.

Une fois fait, vous allez devoir ajouter deux nouveaux fichiers au même endroit.

Dans un premier temps le « package.json » de votre projet.

Ajout de fichiers supplémentaires

Deux fichiers supplémentaires doivent être ajoutés au même emplacement que le contenu de .output :

Le fichier package.json de votre projet.
Un fichier CommonJS (.cjs), qui contourne un problème causé par ECMAScript Modules si vous avez "type": "module" dans votre package.json.

Vous pouvez nommer ce fichier .cjs comme vous le souhaitez. Voici un exemple de contenu pour ce fichier :

async function loadApp() {
    await import("./server/index.mjs");
}
loadApp();

Assurez-vous que l’importation du fichier index.mjs soit correcte.

Setup Node.js Application sur o2switch

Sur cPanel, allez dans l’outil “Setup Node.js Application” d’ o2switch. Suivez les étapes pour créer l’application :

Cliquez sur “Create Application”.
Configurez les options suivantes :
- Version de Node.js : Choisissez la version compatible avec votre projet.
- Application mode : Sélectionnez production.
- Application root : Indiquez l’emplacement de votre application sur le serveur.
- Application URL : Renseignez le domaine ou sous-domaine qui pointera vers l’application.
- Application startup file : Sélectionnez le fichier .cjs que vous avez créé (c’est ce fichier qui va démarrer l’application).
- Passenger log file : Définissez un fichier .log pour stocker les logs (erreurs, etc.).
- Environment variables : Ajoutez ici vos variables d’environnement (comme des clés API, etc.).3. Cliquez sur “Create” pour finaliser la création de l’application.

Cette action déverrouillera le bouton “Run NPM Install” et vous fournira un lien “source”. Pour mieux diagnostiquer d’éventuelles erreurs, utilisez ce lien dans le terminal de cPanel.

Dans le terminal, exécutez la commande suivante pour installer les dépendances :

npm install

Retournez ensuite dans l’outil “Setup Node.js Application” d’ 02switch. Vous devrez peut-être redémarrer l’application en cliquant sur “Restart”.

Vous avez aussi la possibilité d’utiliser un client SSH tel que " PuTTY " pour réaliser cette tâche.

Comment mettre en place un client SSH avec CPanel de O2switch : Mise en place du client SSH PuTTY

Une fois votre application en ligne, il ne faudra pas oublier de configurer votre fichier .htaccess. Il se trouvera soit dans le dossier public_html si votre application utilise un nom de domaine, soit dans un dossier portant le nom de votre site si ce dernier est un sous-domaine. Par exemple, vous aurez sûrement à forcer le HTTPS et à bloquer l’utilisation du “www” :

# Force www to non-www
<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{HTTP_HOST} ^www\.(.*)$ [NC]
    RewriteRule ^(.*)$ https://%1/$1 [L,R=301]
</IfModule>

# Force HTTPS redirection
<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{HTTPS} off
    RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
</IfModule>

Remarque : Si vous devez réinstaller votre application, il se peut que le fichier .htaccess soit réinitialisé ou modifié. Pensez donc à en faire une copie.

Mise à jour complète ou partielle sans tout réinstaller

Si vous souhaitez mettre à jour votre application Nuxt à la suite de changements relativement basiques (modification d’une vue, ajout d’une image, etc.), vous pouvez générer le dossier .output, puis remplacer en ligne les dossiers public et server existants par ceux-ci. Il vous suffira ensuite de redémarrer votre application Node pour que les changements soient pris en compte.

En revanche, si vous devez effectuer une mise à jour complète, il faudra remplacer l’ensemble des fichiers et redémarrer l’application. Il ne faut surtout pas recréer ou supprimer l’application, ni relancer de commande dans la console.

Avant d’effectuer ce type de manipulation, pensez tout de même à réaliser une sauvegarde au préalable :)

Conclusion

À ce stade, votre application Nuxt sur votre hébergeur o2switch devrait être fonctionnelle. Pensez à configurer le fichier .htaccess afin de gérer correctement les redirections et autres règles serveur.