Aller au contenu

Mettre en ligne chez OVH

Temps 1 · séance 5 · ~45 min

Les slides du chapitre (PDF)PDF

  • Préparer le portfolio pour la production : dépendances sans les outils de développement, assets compilés en local.
  • Envoyer le projet par FTP, dossier public/build compris.
  • Configurer l'hébergement OVH : domaine, version de PHP, .env, certificat SSL.
  • Servir les images de couverture sans lien symbolique.
  • Vérifier en ligne une page, une image et l'envoi d'un vrai e-mail de contact.

Votre portfolio tourne sur votre machine. Ce chapitre le met à son adresse publique, sur un hébergement mutualisé d'OVH. Un hébergement mutualisé exécute PHP et sert des fichiers, rien d'autre : pas de Node, pas de Composer, pas de terminal. Tout ce qui demande ces outils se fait donc sur votre machine, avant l'envoi.

1. Préparer le projet

1.1. La base de données part avec le code

Votre portfolio utilise SQLite depuis le chapitre 1.04. Sa base est un seul fichier, database/database.sqlite, qui contient vos projets, vos étiquettes, votre compte du back-office et les messages de contact. Il part avec le reste du code : rien à exporter, rien à importer.

Le seeder ne tourne donc pas en ligne. La base part déjà remplie, et les images du disque public, captures du seeder comme images téléversées, partent elles aussi par FTP (section 6).

Attention

Les projets que vous avez encodés dans le back-office n'existent que dans database/database.sqlite. Ne lancez pas php artisan migrate:fresh --seed avant l'envoi : la commande vide toutes les tables, puis les remplit avec le seeder.

Un projet qui tourne sur MySQL ne peut pas envoyer sa base par FTP. Elle s'exporte depuis votre machine, puis s'importe dans la base MySQL de l'hébergement.

  1. Un préfixe pour les tables. Dans config/database.php, la clé prefix de la connexion MySQL ajoute un préfixe au nom de chaque table, par exemple portfolio_. Il évite les collisions quand plusieurs projets partagent la même base chez OVH. Le fichier config/database.php ouvert dans l'éditeur, avec la clé prefix de la connexion MySQL remplie

  2. Une base à jour. Lancez php artisan migrate --seed pour que la base locale contienne toutes les tables et les données de départ.

  3. L'export. La commande mysqldump écrit la structure et les données dans un fichier :

    mysqldump -u utilisateur -p nom_de_la_base > base.sql

  4. L'import. Dans l'interface OVH, ouvrez phpMyAdmin depuis le tableau de bord de l'hébergement. Sélectionnez la base créée chez OVH, puis l'onglet « Importer », et chargez base.sql.

  5. Le .env du serveur reçoit les accès de cette base :

    DB_CONNECTION=mysql
DB_HOST=adresse_donnee_par_ovh
DB_PORT=3306
DB_DATABASE=nom_de_la_base
DB_USERNAME=utilisateur
DB_PASSWORD=mot_de_passe

1.2. Les dépendances PHP sans les outils de développement

Le dossier vendor/ part lui aussi par FTP, puisque le serveur n'a pas Composer. Avant l'envoi, réinstallez-le sans les paquets de développement :

composer install --no-dev

Pest, Pint et les autres outils de développement sont retirés. Ils ne servent à rien sur le serveur, et le dossier à envoyer est plus petit. Après la mise en ligne, relancez composer install sans option sur votre machine : vos tests en ont besoin.

1.3. Les assets compilés

Vite compile vos pages Vue, le CSS de Tailwind et les polices. Le serveur d'OVH ne peut pas le faire à votre place. Arrêtez composer run dev avec Ctrl+C, puis compilez :

npm run build

✓ 3552 modules transformed.
✓ built in 3.07s

Le résultat est dans public/build : un fichier manifest.json, qui dit à Laravel quel fichier charger pour chaque page, le JavaScript et le CSS compilés, et les polices du chapitre 1.18. La commande régénère aussi les fichiers de Wayfinder (chapitre 1.08).

Ce dossier est ignoré par Git, et c'est voulu : on ne versionne pas un fichier qu'une commande produit. Un client FTP, lui, envoie ce qui est sur votre disque, Git ou pas. Après chaque modification d'une page, d'un composant ou de app.css, relancez npm run build et renvoyez public/build.

2. Envoyer les fichiers par FTP

Un client FTP comme FileZilla se connecte à l'espace d'hébergement avec l'adresse du serveur FTP, un nom d'utilisateur et un mot de passe. OVH les donne à la création de l'hébergement, et son interface permet de les retrouver ou de les changer.

Une fois connecté, envoyez le dossier du projet entier, sauf node_modules. Ce dossier contient les paquets JavaScript qui ont servi à compiler : plusieurs centaines de mégaoctets qui n'ont aucun rôle sur le serveur. Vérifiez que le fichier .env et les dossiers vendor et storage sont bien partis. Certains clients FTP cachent les fichiers dont le nom commence par un point.

Attention

Dans le dossier public, supprimez le fichier hot s'il existe. composer run dev le crée au démarrage de Vite, et ne le supprime pas toujours à l'arrêt. Tant qu'il est sur le serveur, Laravel demande les assets au serveur de Vite de votre machine, et la page reste blanche.

Le dossier public dans un client FTP, avec le fichier hot sélectionné pour suppression

Après le transfert, vérifiez l'arborescence sur le serveur.

  • public/index.php est présent : c'est le point d'entrée de l'application.
  • bootstrap, config et storage sont présents et contiennent leurs fichiers.
  • public/build contient manifest.json et le dossier assets. Sans lui, le site répond par une erreur 500, et le journal storage/logs/laravel.log du serveur contient Vite manifest not found at: suivi du chemin du fichier.
  • database/database.sqlite est présent.

3. Configurer l'hébergement

3.1. Le domaine pointe vers public

Dans l'interface OVH, ouvrez votre hébergement, puis la section « Multisite ». Elle liste les domaines et sous-domaines servis par l'hébergement, et le dossier que chacun sert.

La section Multisite de l'interface OVH, avec la liste des domaines de l'hébergement

Ajoutez votre domaine ou votre sous-domaine, ou modifiez celui qui existe. Le dossier racine doit être le dossier public de votre projet : c'est le seul dossier qu'un visiteur peut atteindre. Le reste du projet, .env et database.sqlite compris, reste hors de portée.

Le formulaire d'ajout d'un domaine dans Multisite

Le champ dossier racine du domaine, réglé sur le dossier public du projet

3.2. La version de PHP

L'interface OVH règle aussi la version de PHP de l'hébergement. Laravel 13 demande PHP 8.3 au moins, et les paquets installés dans votre portfolio demandent PHP 8.4.1 ou plus. Choisissez PHP 8.4, ou une version plus récente.

Composer vérifie la version au démarrage, dans vendor/composer/platform_check.php. Avec un PHP trop ancien, l'application refuse de démarrer, avec le message Your Composer dependencies require a PHP version ">= 8.4.1".

4. Le .env de production

Le fichier .env du serveur n'est pas celui de votre machine. Ouvrez-le avec votre client FTP et modifiez ces lignes :

APP_NAME="Nora Benali"
APP_ENV=production
APP_DEBUG=false
APP_URL=https://votre-adresse.be

MAIL_MAILER=smtp
MAIL_SCHEME=null
MAIL_HOST=ssl0.ovh.net
MAIL_PORT=465
MAIL_USERNAME=contact@votre-adresse.be
MAIL_PASSWORD=mot_de_passe_du_compte_e-mail
MAIL_FROM_ADDRESS="contact@votre-adresse.be"
MAIL_FROM_NAME="${APP_NAME}"

Remplacez le nom, l'adresse du site et le compte e-mail par les vôtres. Ligne par ligne :

  • APP_ENV=production et APP_DEBUG=false. Une erreur n'affiche plus sa pile d'appels au visiteur, avec vos chemins et vos variables. Elle reste écrite dans storage/logs/laravel.log.
  • APP_KEY garde la valeur de votre machine. Laravel chiffre avec elle les sessions et les cookies. Si la ligne est vide, générez-la en local avec php artisan key:generate et recopiez-la.
  • APP_URL est l'adresse publique du site, en https. Laravel construit avec elle l'adresse de chaque image de couverture (chapitre 1.14) et la balise og:image (chapitre 1.19). Avec portfolio.test resté ici, chaque image pointe vers votre machine.
  • MAIL_MAILER=smtp remplace log : l'e-mail de contact du chapitre 1.20 part pour de vrai, par le serveur d'e-mail d'OVH. MAIL_HOST et MAIL_PORT sont ceux d'un compte e-mail d'hébergement mutualisé OVH, ssl0.ovh.net sur le port 465 en SSL. L'interface OVH les affiche dans la fiche de votre compte e-mail : relisez-les là. MAIL_USERNAME est l'adresse complète du compte, MAIL_PASSWORD son mot de passe.
  • MAIL_SCHEME=null reste tel quel. Avec le port 465 et aucun schéma, Laravel choisit lui-même une connexion chiffrée, smtps.
  • MAIL_FROM_ADDRESS sert deux fois : c'est l'expéditeur de l'e-mail, et son destinataire, puisque ContactController envoie le message à cette adresse. Utilisez une adresse du compte OVH. Un serveur d'e-mail refuse souvent d'envoyer au nom d'une adresse qui n'est pas la sienne.

Avec SQLite, la ligne DB_CONNECTION=sqlite du kit ne change pas : Laravel trouve database/database.sqlite sans autre réglage.

5. Le certificat SSL

Un certificat SSL chiffre ce qui passe entre le visiteur et le serveur, et donne le cadenas de la barre d'adresse. Sans lui, le navigateur affiche « Non sécurisé » devant votre portfolio, et le formulaire de contact envoie le message du visiteur en clair.

Dans l'interface OVH, ouvrez l'hébergement, puis sa gestion du SSL. OVH fournit un certificat gratuit, Let's Encrypt. Activez-le, ou régénérez-le si vous venez d'ajouter un domaine. L'installation prend de quelques minutes à quelques heures.

L'écran de gestion du certificat SSL d'un hébergement OVH

6. Les images sans lien symbolique

La bonne pratique est celle de votre machine. Le disque public écrit dans storage/app/public, hors du dossier que le serveur web sert. Le lien symbolique public/storage, créé par php artisan storage:link au chapitre 1.06, rend ce dossier visible au navigateur. Sur un serveur où vous avez un terminal, vous lancez la même commande une fois, et rien d'autre ne change.

OVH est une exception. Son hébergement mutualisé ne suit pas les liens symboliques, et vous n'y avez pas de terminal. Là seulement, le disque public écrit directement dans public/storage.

Ce qui change entre votre machine et le serveur se règle dans .env, jamais dans le code : c'est ce que vous avez fait pour APP_URL et pour l'e-mail. La racine du disque suit la même règle. Dans config/filesystems.php, dans la section disks, une seule ligne du disque public change, root. Elle valait storage_path('app/public') :

'public' => [
    'driver' => 'local',
    'root' => env('FILESYSTEM_PUBLIC_ROOT') === 'public'
        ? public_path('storage')
        : storage_path('app/public'),
    'url' => rtrim((string) env('APP_URL', 'http://localhost'), '/').'/storage',
    'visibility' => 'public',
    'throw' => false,
    'report' => false,
],

Sans la variable, le disque garde storage/app/public : rien ne change sur votre machine, et vos captures restent dans le dossier versionné. Dans le .env du serveur, celui de la section 4, ajoutez la ligne qui déclenche l'exception :

FILESYSTEM_PUBLIC_ROOT=public

Le fichier config/filesystems.php modifié part avec le code, comme n'importe quel autre fichier.

Sur le serveur, supprimez le dossier ou le lien public/storage que le transfert a pu créer, puis créez un vrai dossier public/storage. Envoyez-y tout le contenu de votre storage/app/public local : le dossier images, avec les captures du seeder, et le dossier projects, avec les images téléversées depuis votre back-office. La colonne cover_path de chaque projet contient un chemin relatif au disque, comme images/meteo-wavre.jpg ou projects/4ayJrdZUcgdYpkLWFkKDnh9KJ9rxhzsP2pfcjaGy.jpg. Avec la nouvelle racine, images/meteo-wavre.jpg désigne public/storage/images/meteo-wavre.jpg, et son adresse reste /storage/images/meteo-wavre.jpg.

Testez ensuite depuis le back-office en ligne : téléversez une nouvelle image pour un projet. Elle arrive dans public/storage/projects, et sa fiche l'affiche.

7. Vérifier le portfolio en ligne

Ouvrez votre site à son adresse publique, en https, dans une fenêtre de navigation privée.

  1. Une page. L'accueil s'affiche avec vos couleurs et vos polices, sans erreur dans la console du navigateur. Le cadenas est présent.
  2. Une image. Une fiche de projet montre son image de couverture. Clic droit sur l'image, « Ouvrir l'image dans un nouvel onglet » : son adresse commence par votre APP_URL, suivie de /storage/images/ pour un projet du seeder, ou de /storage/projects/ pour une image téléversée depuis le back-office.
  3. Le formulaire de contact. Envoyez-vous un message depuis le site. Le message de confirmation s'affiche, et un vrai e-mail arrive dans la boîte de MAIL_FROM_ADDRESS. « Répondre » écrit à l'adresse saisie dans le formulaire.
  4. Le back-office. /login accepte votre compte, et /admin/projets liste vos projets. Changez le mot de passe password du seeder dans les réglages du compte : en production, le kit exige au moins douze caractères.
  5. L'aperçu Open Graph. Collez l'adresse d'une fiche dans un outil d'aperçu, comme le débogueur de partage de Facebook ou opengraph.xyz. La carte montre le titre, le résumé et l'image du projet (chapitre 1.19).

Si une page répond par une erreur 500, lisez la fin de storage/logs/laravel.log sur le serveur, avec votre client FTP. APP_DEBUG=false cache le détail aux visiteurs, mais Laravel l'écrit toujours dans ce journal.

Pratique : votre portfolio en ligne (25 min)

Temps annoncé : 25 minutes.

  • Le dossier public/build est sur le serveur, et le fichier public/hot n'y est pas.
  • La version de PHP de l'hébergement est 8.4 ou plus.
  • Le .env du serveur a APP_ENV=production, APP_DEBUG=false et l'adresse publique du site dans APP_URL.
  • L'accueil s'affiche en https, avec vos couleurs et vos polices.
  • Une fiche de projet montre son image de couverture, servie depuis /storage/images/ ou /storage/projects/.
  • Un message envoyé par le formulaire de contact arrive dans votre boîte e-mail.
  • Le mot de passe du seeder est remplacé.
  • Un outil d'aperçu montre l'image et le résumé d'une fiche.

Ce que votre portfolio contient maintenant

Une adresse publique en https, chez OVH. Le site compilé sert vos pages, vos polices et vos images, et le formulaire de contact envoie un vrai e-mail. Un lien vers une fiche, partagé sur un réseau, montre son titre, son résumé et son image.

À retenir

  • Le serveur n'exécute que PHP, donc composer install --no-dev et npm run build se font en local, et vendor comme public/build partent par FTP.
  • Le fichier public/hot ne doit jamais être sur le serveur, sinon la page reste blanche.
  • Le portfolio demande PHP 8.4.1 ou plus, à régler dans l'interface d'OVH, et le domaine pointe vers le dossier public.
  • En ligne, APP_URL est l'adresse publique en https, APP_DEBUG vaut false, et MAIL_MAILER=smtp envoie l'e-mail de contact par le serveur d'OVH.
  • Le disque storage/app/public et son lien symbolique restent la bonne pratique. OVH est l'exception : FILESYSTEM_PUBLIC_ROOT=public dans le .env du serveur fait écrire le disque dans public/storage, où vous envoyez tout storage/app/public, images/ et projects/, puisque le seeder ne tourne pas en ligne.