11. Déploiement

En développement, deux serveurs travaillent ensemble : le serveur de développement d'[Angular] (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-angular] :

npm run build

La console affiche :

> rdvmedecins-angular@1.0.0 build
> ng build

✔ Building...
Initial chunk files | Names               |  Raw size | Estimated transfer size
chunk-BruCX3rK.js   | -                   | 296.78 kB |                80.48 kB
styles-ESMYSIMF.css | styles              | 231.34 kB |                22.65 kB
main-ZNWESYGE.js    | main                | 127.41 kB |                31.39 kB

                    | Initial total       | 655.53 kB |               134.52 kB

Lazy chunk files    | Names               |  Raw size | Estimated transfer size
chunk-Bqr4p6qO.js   | mon-compte          |   4.67 kB |                 1.63 kB
chunk-C49XOFB2.js   | -                   |   3.57 kB |                 1.35 kB
chunk-CWV4x81-.js   | personne-formulaire |   3.41 kB |                 1.45 kB
chunk-as-RKsXq.js   | espace-patient      |   3.40 kB |                 1.44 kB
chunk-CjiMzAsS.js   | personnes           |   3.26 kB |                 1.34 kB
chunk-DdMjXUoQ.js   | inscription         |   3.10 kB |                 1.31 kB
chunk-v1pH7ChH.js   | erreur              | 842 bytes |               842 bytes
chunk-9nUFW6Uu.js   | -                   | 548 bytes |               548 bytes

Application bundle generation complete. [3.938 seconds]

Output location: .../rdvmedecins-angular/dist/rdvmedecins-angular

Le dossier [dist/rdvmedecins-angular/browser/] contient toute l'application : une page [index.html], une feuille de style, et des fichiers [JavaScript] optimisés (le code d'[Angular], du routeur, de [ngx-translate]... et le nôtre) :

les fichiers initiaux sont téléchargés au démarrage : environ 135 ko une fois compressés par le serveur ;
chaque page chargée à la demande ([loadComponent]) a son propre fichier, téléchargé à la première visite ;
le nom de chaque fichier contient une empreinte de son contenu ([main-ZNWESYGE.js]) : une nouvelle version aura un autre nom, et un navigateur ne pourra jamais garder en cache une version périmée ;
le compilateur a vérifié les budgets fixés dans [angular.json] : un avertissement signalerait une application devenue trop lourde.

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

1 2	`[Nest] LOG [RdvMedecins] client Angular 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].