Aller au contenu

Héberger un site Vue.js sur OVH

Ce guide explique comment héberger un site Vue.js sur OVH, étape par étape. Nous allons construire le projet, le tester, uploader les fichiers via FTP, puis configurer le domaine sur OVH.

Étape 1 : Construction du projet Vue.js

1.1. Ouvrir le terminal

Ouvrez le terminal dans le dossier racine de votre projet Vue.js.

1.2. Lancer la commande npm run build

Pour construire le projet, exécutez :

npm run build

Cette commande génère les fichiers statiques optimisés nécessaires au site, dans un dossier dist.

1.3. Prévisualiser le projet

Vérifiez le fonctionnement localement avec :

npm run preview

Cela lance un serveur local pour tester le site avant la mise en ligne.

Étape 2 : Uploader les fichiers sur OVH

2.1. Utilisation du client FTP

Transférez les fichiers du dossier dist vers le serveur OVH en utilisant un client FTP comme Cyberduck.

2.2. Arborescence des fichiers sur le FTP

Assurez-vous que les fichiers (notamment index.html et assets) sont placés correctement dans le répertoire du serveur.

Étape 3 : Configurer le domaine sur OVH

3.1. Accéder à la configuration

  1. Connectez-vous à l'administration d'OVH.
  2. Allez dans "Web Cloud" (1), sélectionnez votre hébergement (2), puis cliquez sur "Actions" et choisissez "Ajouter un domaine ou sous-domaine" (3).

3.2. Ajouter un sous-domaine

  1. Choisissez "Ajouter un domaine enregistré chez OVH" et sélectionnez votre domaine principal.


  2. Entrez le nom du sous-domaine (ex. "vuejs"), ce qui donnera vuejs.roracq.be.

  3. Indiquez le dossier racine (à savoir test_vue).

  4. Activez l'option SSL, puis cliquez sur "Suivant".

3.3. Valider la configuration

Vérifiez et cliquez sur "Valider" pour ajouter le sous-domaine.

Étape 4 : Régénération du certificat SSL

Après avoir ajouté le sous-domaine, le certificat SSL sera généré automatiquement. Cela peut prendre plusieurs heures. Si le SSL n'est pas actif après ce délai, vous pouvez manuellement le régénérer dans l'interface OVH :

  • Sous "Informations générales", cliquez sur les trois points à côté de "Certificat SSL" et sélectionnez "Régénérer le certificat SSL".

Étape 5 : Configurer le fichier .htaccess

Pour éviter une erreur 404 lors de l'accès direct à une page autre que la page d'accueil, configurez Apache via un fichier .htaccess. Sur les hébergements OVH, Apache est utilisé, d'où l'importance de ce fichier.

Créez un fichier .htaccess à la racine du projet et ajoutez :

<IfModule mod_negotiation.c>
    Options -MultiViews
</IfModule>

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
</IfModule>

Ce fichier redirige toutes les requêtes vers index.html si le fichier ou dossier demandé n'existe pas, permettant ainsi à Vue Router de gérer les routes côté client.

Étape 6 : Tests de vérification

  • Charger une URL spécifique : Essayez de charger directement une URL comme http://vuejs.roracq.be/flags pour vérifier la configuration .htaccess. Si tout est correct, cette page se chargera sans erreur 404.

  • Tester la redirection HTTPS : Assurez-vous que votre site utilise HTTPS. Visitez votre site avec https:// pour vérifier que le SSL est actif. Si ce n'est pas le cas, régénérez le certificat.

  • Naviguer sur plusieurs pages : Parcourez le site pour vérifier que toutes les pages fonctionnent et que les assets se chargent correctement.

Conclusion

Vous avez maintenant mis en ligne votre site Vue.js sur OVH, ajouté un sous-domaine, configuré .htaccess pour gérer les routes, et sécurisé le site avec SSL. Testez bien toutes les pages pour garantir que tout fonctionne.

Si vous rencontrez des problèmes, revenez à ce guide ou consultez la documentation d'OVH.