diff --git a/pages/bare_metal_cloud/virtual_private_servers/import-lovable-website-on-vps/guide.fr-fr.md b/pages/bare_metal_cloud/virtual_private_servers/import-lovable-website-on-vps/guide.fr-fr.md new file mode 100644 index 00000000000..856ab8baced --- /dev/null +++ b/pages/bare_metal_cloud/virtual_private_servers/import-lovable-website-on-vps/guide.fr-fr.md @@ -0,0 +1,224 @@ +--- +title: "Créer et importer un site web Lovable.dev sur un VPS OVHcloud" +excerpt: "Apprenez comment héberger un site web généré par Lovable.dev sur votre VPS OVHcloud" +updated: 2025-06-17 +--- + +## Objectif + +[Lovable.dev](https://lovable.dev) est un outil qui permet de générer des sites web à partir de prompts. Ce guide vous explique comment importer et publier un site web généré via Lovable sur un **hébergement mutualisé OVHcloud**. + +## Prérequis + +- Disposer d'une offre [VPS OVHcloud](https://www.ovhcloud.com/fr/vps/) +- Disposer d'un accès administrateur (sudo) via SSH à votre serveur +- Posséder un compte sur [Lovable.dev](https://lovable.dev) + +## En pratique + +### Sommaire + +- [Étape 1 : Générer votre site web sur Lovable.dev](#step1) +- [Étape 2 : Exporter votre site web via GitHub et le récupérer](#step2) +- [Étape 3 : Envoyer l’archive sur le VPS ](#step3) +- [Étape 4 : Installer Node.js et les outils nécessaires](#step4) +- [Étape 5 : Décompresser et builder votre site web](#step5) +- [Étape 6 : Déployer votre site web](#step6) +- [Étape 7 : Installer et configurer le serveur web](#step7) +- [Étape 8 : Accéder à votre site web](#step8) +- [Conclusion](#conclusion) +- [Aller plus loin](#go-further) + +### Étape 1 : Générer votre site web sur Lovable.dev + +1. Rendez-vous sur [https://lovable.dev](https://lovable.dev). +2. Créez un compte si ce n'est pas déjà fait. +3. Entrez votre prompt pour générer votre site web. + +### Étape 2 : Exporter votre site web via GitHub et le récupérer + +Une fois votre site web généré par Lovable, exportez-le via GitHub. Dans l'interface principale de Lovable.dev, cliquez en haut à droite sur l'icône de Github (`Sync your project to GitHub`). + +![hosting](images/synch_project_github_button.png){.thumbnail} + +Pour connecter votre compte Lovable à GitHub, suivez la documentation officielle de [Lovable.dev](https://lovable.dev/integrations/github). + +Une fois le processus terminé, un nouveau dépôt contenant le code de votre site web est présent dans votre compte GitHub. + +Depuis ce dépôt GitHub, effectuez les actions suivantes : + +- Cliquez sur `Code`{.action} puis sur `Download ZIP`{.action} +- Cela télécharge un fichier `.zip` contenant votre projet +- Décompressez-le. + +### Étape 3 : Envoyer l’archive sur le VPS + +Dans votre terminal (à l’emplacement où se trouve le fichier .zip), utilisez cette commande : + +```bash +scp mon_site.zip @:~ +``` + +Remplacez : + +- `mon_site.zip` par le nom du fichier téléchargé depuis lovable +- `` par votre nom d'utilisateur root (ex: debian, root, etc.) +- `` par l'adresse IP publique ou le nom DNS de votre VPS + +`~` fait référence au dossier personnel de l'utilisateur. + +### Étape 4 : Installer Node.js et les outils nécessaires + +Connectez-vous en SSH à votre VPS : + +```bash +ssh @ +``` + +Pour construire un site web Lovable, vous devez compiler le projet React en version optimisée à l’aide de la commande `npm run build`. Pour cela, il vous faut les éléments suivants sur le VPS : + +- `Node.js` : L’environnement JavaScript nécessaire à l’exécution de React. +- `npm` : Le gestionnaire de paquets JavaScript qui installe les dépendances du projet. +- `curl` : Permet de télécharger le script d’installation de Node.js. +- `unzip` : Sert à extraire l’archive `.zip` du site exporté depuis Lovable. + +Exécutez ces commandes : + +```bash +sudo apt update +sudo apt install curl unzip -y +curl -fsSL https://deb.nodesource.com/setup_18.x | sudo bash - +sudo apt install -y nodejs +``` + +Vérifiez l'installation : + +```bash +node -v +npm -v +``` + +### Étape 5 : Décompresser et builder votre site web + +Décompressez l'archive `.zip` dans un dossier de destination (ex: `lovable-src`): + +```bash +unzip mon_site.zip -d lovable-src +``` + +Entrez dans le dossier de destination : + +```bash +cd lovable-src/mon_site +``` + +Installez les dépendances nécessaires : + +```bash +npm install +``` + +Cela va installer toutes les bibliothèques React/Lovable définies dans le fichier `package.json`. + +Générez les fichiers optimisés (build de production) : + +```bash +npm run build +``` + +Cela crée un dossier `dist/` contenant les fichiers HTML, CSS et JS minifiés. + +### Étape 6 : Déployer votre site web + +Créez le dossier public : + +```bash +sudo mkdir -p /var/www/lovable +sudo cp -r dist/* /var/www/lovable/ +``` + +### Étape 7 : Installer et configurer le serveur web + +> [!primary] +> +> Pour ce guide, nous choisissons Nginx mais vous êtes libre d'installer le serveur web de votre choix. +> + +Installez NGINX : + +```bash +sudo apt install nginx -y +``` + +Créez un fichier de configuration pour votre site : + +```bash +sudo nano /etc/nginx/sites-available/lovable +``` + +Collez le contenu suivant, en remplaçant adresse_du_vps par l'adresse IP de votre VPS ou votre nom de domaine : + +```console +server { + listen 80; + server_name IP_VPS; + + root /var/www/lovable; + index index.html; + + location / { + try_files $uri /index.html; + } +} +``` + +Remplacez `IP_VPS` par l'adresse IP de votre VPS ou votre nom de domaine. + +Activez cette configuration : + +```bash +sudo ln -s /etc/nginx/sites-available/lovable /etc/nginx/sites-enabled/ +sudo nginx -t +``` + +Redémarrez NGINX pour appliquer la configuration : + +```bash +sudo systemctl start nginx +``` + +Si le service est déjà actif, utilisez plutôt : + +```bash +sudo systemctl reload nginx +``` + +### Étape 8 : Accéder à votre site web + +Dans votre navigateur, entrez : + +```console +http://IP_VPS +``` + +ou : + +```console +http://NOM_DE_DOMAINE +``` + +Votre site web Lovable s'affiche. + +### Conclusion + +En quelques minutes, vous avez créé votre site web avec Lovable, puis l’avez mis en ligne sur votre VPS OVHcloud. Si vous souhaitez le sécuriser avec HTTPS, suivez notre guide « [Comment installer un certificat SSL sur un VPS](/pages/bare_metal_cloud/virtual_private_servers/install-ssl-certificate) ». + +## Aller plus loin + +[Installer un environnement de développement web sur un VPS](/pages/bare_metal_cloud/virtual_private_servers/install_env_web_dev_on_vps) + +[Sécuriser un VPS](/pages/bare_metal_cloud/virtual_private_servers/secure_your_vps) + +Pour des prestations spécialisées (référencement, développement, etc), contactez les [partenaires OVHcloud](https://partner.ovhcloud.com/fr-ca/directory/) + +Échangez avec notre [communauté d'utilisateurs](/links/community). \ No newline at end of file diff --git a/pages/bare_metal_cloud/virtual_private_servers/import-lovable-website-on-vps/images/synch_project_github_button.png b/pages/bare_metal_cloud/virtual_private_servers/import-lovable-website-on-vps/images/synch_project_github_button.png new file mode 100644 index 00000000000..08e050dc245 Binary files /dev/null and b/pages/bare_metal_cloud/virtual_private_servers/import-lovable-website-on-vps/images/synch_project_github_button.png differ diff --git a/pages/bare_metal_cloud/virtual_private_servers/import-lovable-website-on-vps/meta.yaml b/pages/bare_metal_cloud/virtual_private_servers/import-lovable-website-on-vps/meta.yaml new file mode 100644 index 00000000000..f5712dbf118 --- /dev/null +++ b/pages/bare_metal_cloud/virtual_private_servers/import-lovable-website-on-vps/meta.yaml @@ -0,0 +1,2 @@ +id: 2efa49f8-265f-4e0c-983f-41ace4e42425 +full_slug: vps-import-lovable-website-on-vps \ No newline at end of file