11. Déploiement

En développement, deux serveurs travaillent ensemble : le serveur de développement de [Vite] (le client) et le serveur JSON (l'API). En production, il n'y en a plus qu'un :

1. Construire le client. Dans le dossier [rdvmedecins-react] :

npm run build

La console affiche :

> rdvmedecins-react@1.0.0 build
> tsc --noEmit && vite build

vite v8.3.1 building client environment for production...
transforming...
✓ 205 modules transformed.
rendering chunks...
computing gzip size...
dist/index.html                               1.14 kB │ gzip:   0.60 kB
dist/assets/index-CMDWaW-Y.css                0.49 kB │ gzip:   0.29 kB
dist/assets/bibliotheques-CqLr8KVv.css      230.06 kB │ gzip:  30.68 kB
dist/assets/personnes.config-CwIZX_RT.js      0.54 kB │ gzip:   0.26 kB
dist/assets/rolldown-runtime-CbXtAM7H.js      0.58 kB │ gzip:   0.36 kB
dist/assets/ChampsPersonne-Ci3eLvgx.js        1.68 kB │ gzip:   0.71 kB
dist/assets/Personnes-Cnfa5bDw.js             2.03 kB │ gzip:   0.83 kB
dist/assets/EspacePatient-CJaqGM9p.js         2.38 kB │ gzip:   0.98 kB
dist/assets/Inscription-CsY1sB3V.js           2.47 kB │ gzip:   1.09 kB
dist/assets/PersonneFormulaire-DkPyjstx.js    2.85 kB │ gzip:   1.35 kB
dist/assets/MonCompte-C14hUh6b.js             3.86 kB │ gzip:   1.39 kB
dist/assets/index-C7BOzjUE.js                38.38 kB │ gzip:  12.16 kB
dist/assets/bibliotheques-B3ai-pW0.js       394.23 kB │ gzip: 123.37 kB

✓ built in 565ms

D'abord, [tsc --noEmit] vérifie les types de tout le projet : [Vite] ne le fait pas, il se contente d'effacer la syntaxe de [TypeScript]. Une erreur de type arrête la construction. Puis [Vite] construit, dans le dossier [dist/], toute l'application : une page [index.html], des feuilles de style, et des fichiers [JavaScript] optimisés :

[bibliotheques-....js] : le code des bibliothèques ([React], [React Router], [TanStack Query], [i18next]...), rangé dans un fichier à part par la configuration de [vite.config.ts]. Il change rarement : d'une version de l'application à l'autre, le navigateur le garde en cache. [bibliotheques-....css] : la feuille de style de [Bootstrap] ;
[index-....js] : NOTRE code, celui des pages chargées tout de suite (connexion, agenda) et du reste de l'application ;
chaque page chargée à la demande ([lazy], cf. [routes.tsx]) a son propre fichier ([MonCompte-....js]...), téléchargé à la première visite ; [ChampsPersonne-....js] et [personnes.config-....js] contiennent du code commun à plusieurs de ces pages ;
au démarrage, le navigateur télécharge environ 170 ko une fois compressés par le serveur (colonne gzip), dont 150 ko pour les bibliothèques ;
le nom de chaque fichier contient une empreinte de son contenu ([index-C7BOzjUE.js]) : une nouvelle version aura un autre nom, et un navigateur ne pourra jamais garder en cache une version périmée. Seul [index.html] garde son nom : c'est lui qui désigne les autres fichiers.

On peut essayer la version construite avec [npm run preview] (http://localhost:4173, avec le même proxy vers le serveur JSON).

2. La déposer dans le serveur. On copie le CONTENU du dossier [dist/] dans un dossier [client/] à la racine du serveur JSON ([rdvmedecins-nestjs-json/client/index.html], [rdvmedecins-nestjs-json/client/assets/...]), puis on relance le serveur. Il affiche :

1 2	`[Nest] LOG [RdvMedecins] client React servi depuis .../rdvmedecins-nestjs-json/client [Nest] LOG [RdvMedecins] serveur JSON démarré : http://localhost:8080/api`

L'application complète est alors à l'adresse http://localhost:8080. Le serveur sert les fichiers du client, et renvoie [index.html] pour toute autre adresse hors de /api : recharger la page /agenda fonctionne (c'est le routeur du client qui l'affiche). Pour le lecteur curieux, c'est le fichier [src/web/client-spa.ts] du serveur qui fait ce travail.

3. En production réelle, on n'oubliera pas le fichier [.env] du serveur :

un [JWT_SECRET] long et aléatoire ;
[CAPTCHA_TEST] vide ;
[COOKIE_SECURE=true] si le site est servi en HTTPS (il doit l'être : les mots de passe circulent) ;
[TRUST_PROXY=true] si le serveur est placé derrière un proxy ([nginx]...), pour que la limitation des tentatives voie l'adresse IP réelle des clients.

On lance alors le serveur compilé : [npm run build], puis [npm run start:prod].