‫- : Nous sommes presque prêts à déployer notre application maintenant.
‫Mais avant de faire
‫cela, il y a en fait quelques
‫choses dont nous devons nous occuper.
‫Et alors faisons-le maintenant.
‫Et la première chose que
‫je veux faire
‫est d'installer un package qui va compresser toutes nos réponses.
‫Donc, fondamentalement, chaque fois que nous envoyons une réponse texte à un
‫client, peu importe qu'il s'agisse de code JSON ou HTML.
‫Avec le package
‫de compression, ce texte sera alors considérablement compressé.
‫Très bien, alors installons-nous ici.
‫Npm install, et simplement, compression.
‫Très bien.
‫Alors incluons cela ici.
‫Maintenant, cela exposera alors une fonction
‫de couche intermédiaire très
‫simple que nous devons simplement
‫connecter à notre pile de couche intermédiaire.
‫Alors faisons-le quelque part ici.
‫Près de la fin, ça n'a pas vraiment d'importance.
‫Donc appli. utiliser,
‫entrez là compression d'appel.
‫Donc, ceci ici renverra alors une fonction au milieu
‫à gauche qui va ensuite à
‫nouveau compresser tout le texte envoyé aux clients.
‫Cela ne fonctionnera donc pas pour
‫les images car elles sont généralement déjà compressées.
‫Ainsi, par exemple, un format JPEG est déjà compressé.
‫Donc, cela ne fonctionnera que pour le texte.
‫Ainsi, une fois notre site Web
‫réellement déployé, nous testerons ensuite si cette compression est réellement active.
‫Quoi qu'il en soit, la prochaine étape avant de déployer notre application est de se
‫débarrasser de la majeure partie de la console. logs que nous avons
‫encore dans notre code.
‫Et c'est simplement parce que ces connexions se retrouveront dans
‫les journaux de notre plate-forme d'hébergement.
‫Et donc nous ne voulons pas polluer ces grumes en production.
‫D'accord.
‫Alors cherchons rapidement ici pour console.
‫Et comme vous pouvez le voir, il y en a beaucoup.
‫Celui-ci est donc déjà commenté.
‫Je ne vais donc pas travailler sur celui-là.
‫Mais celui-ci ici, débarrassons-nous en fait.
‫Et donc maintenant,
‫un par un, nous les examinerons
‫tous et ceux qui ne
‫sont pas pertinents, nous les commenterons simplement.
‫Très bien.
‫Ici, dans le contrôleur d'erreur, nous en avons également une tonne, mais
‫certains sont en fait pertinents.
‫Maintenant, pas celui-ci.
‫En fait, débarrassons-nous-en complètement.
‫Pas celui-ci non
‫plus, mais ici, nous avons ces
‫trois que nous avons créés exprès
‫pour qu'ils se retrouvent dans les journaux de notre plate-forme d'hébergement.
‫D'accord.
‫N'oubliez donc pas que nous l'avons configuré de manière à
‫ce que, lorsqu'il y a une erreur sur le site Web
‫de rendu, nous obtenions un
‫journal de l'erreur qui s'est réellement produite.
‫Avec cet emoji ici.
‫Et donc chaque fois que nous
‫voyons cela, nous pouvons alors facilement identifier dans nos
‫journaux que quelque chose de mal s'est passé de notre côté.
‫D'accord, et nous en avons donc quelques autres ici.
‫Par exemple, pour d'autres erreurs inconnues pour lesquelles
‫nous ne voulons pas divulguer les détails de l'erreur au client.
‫Et donc ceux-ci sont d'accord pour les garder.
‫Celui-ci que nous souhaitons également conserver
‫afin de nous informer dans les journaux que
‫la connexion à la base de données a réussi.
‫Ceux là aussi.
‫Celui-ci ici est en fait dans import-dev-data, donc ils ne sont
‫pas du tout importants.
‫Quoi qu'il en soit, tous les journaux ici, gardons-les.
‫Alors ici, nous avons celui-ci ici, que
‫nous n'avons vraiment fait que pour utiliser cette couche intermédiaire.
‫Désactivons donc cette couche intermédiaire.
‫Encore une fois, nous n'avons
‫vraiment utilisé que pour tester cette couche intermédiaire.
‫Ensuite, dans le modèle utilisateur.
‫Eh bien, celui-ci nous ne voulons pas non plus.
‫C'était juste une fois de plus à des fins de test.
‫Ensuite, nous avons le package JSON, donc
‫ceux-ci ne sont même pas entrés dans les journaux.
‫Ensuite, nous devons
‫regrouper où nous n'allons rien changer.
‫Ensuite, nous avons index. js.
‫Voilà donc notre JavaScript côté client.
‫Alors débarrassons-nous de cette console. connectez-vous ici.
‫Ensuite, nous en avons aussi d'autres ici en déconnexion,
‫mais celui-ci gardons-le en fait.
‫D'autres en rayures.
‫Et nous ne sommes pas intéressés ici par la session.
‫Mais celui-ci ici quand il y a une erreur
‫est en fait correct.
‫Et puis en serveur. js, nous
‫les avons ici, ce
‫que nous avons fait, encore une fois, exprès.
‫Pour qu'ils finissent vraiment par apparaître dans nos fichiers journaux.
‫Et ne vous inquiétez pas si vous ne savez pas vraiment
‫ce que je veux dire avec les fichiers journaux.
‫Vous verrez une fois
‫que nous aurons mis notre application sur Heroku.
‫Je vais donc vous montrer les fichiers journaux d'ici là, d'accord.
‫Quoi qu'il en soit, toutes ces consoles. les journaux ici sont
‫exprès.
‫Et celui-ci concerne également
‫la connexion réussie à la base de données.
‫Celui-ci nous
‫informe également du port sur lequel l'application est en cours d'exécution.
‫Et celui-ci, et celui-ci sont également importants.
‫Très bien.
‫Et donc avec cela, nous nous sommes occupés de
‫toute la console inutile. journaux que nous ne
‫faisons que polluer nos sorties de journaux.
‫D'accord, fermons tous ces fichiers ici.
‫Très bien.
‫Et maintenant,
‫étape suivante, modifions les URL ou les codes
‫API du côté client, JavaScript.
‫Donc par exemple ici dans login. js, en ce
‫moment nous faisons ces codes d'API
‫à cette API de développement.
‫Donc ici, nous avons bien sûr notre URL de développement.
‫Et donc
‫comme ça, ça ne va pas
‫fonctionner en production car évidemment
‫à partir de là, nous ne pourrons accéder à aucune URL de développement.
‫Et la même chose ici.
‫Mais heureusement, il existe une solution très simple.
‫Donc tout ce que nous devons faire est de vraiment nous débarrasser de cette partie.
‫Donc, si nous le supprimons comme
‫ceci, nous allons nous retrouver avec cette URL relative.
‫Et comme l'API et
‫le site Web sont hébergés sur
‫le même serveur, cela fonctionnera parfaitement.
‫Donc, faire comme ça, c'est
‫un peu comme spécifier le chemin d'accès aux images dans le code HTML.
‫Par exemple, ici, dans la page d'aperçu,
‫où nous avons
‫ces images, nous disons simplement "/img"
‫et cela ira ensuite à
‫l'URL actuelle et ajoutera ensuite ce chemin à cela.
‫D'accord.
‫Et donc la même chose va se passer ici.
‫D'accord.
‫Encore une fois, cela ne fonctionne que parce que l'API et
‫le site Web utilisent essentiellement la même URL.
‫Nous les hébergeons donc au même endroit.
‫Mais si vous hébergez votre
‫site Web ou votre front-end sur
‫une URL, puis votre API sur une
‫autre URL, cela ne fonctionnera pas comme ça, d'accord.
‫Mais dans cette application simple, nous pouvons simplement le faire comme ceci
‫car nous avons cette configuration très simple.
‫Alors supprimons-le ici dans la connexion.
‫Dans l'index, je crois que nous n'avons pas d'URL.
‫Oui c'est vrai.
‫Pas non plus dans les alertes.
‫Pas dans Mapbox je crois.
‫Non.
‫Mais certainement en rayure.
‫Alors pour avoir notre séance.
‫Nous pouvons donc faire exactement la même chose ici.
‫Et aussi dans updateSettings.
‫D'accord.
‫Donnez-lui une sauvegarde.
‫Et tous.
‫Et pour que celui-ci soit également corrigé.
‫Et maintenant, enfin, et en continuant à travailler sur
‫JavaScript côté client,
‫nous devons créer notre bundle final.
‫Très bien.
‫Alors maintenant, voici notre fichier JavaScript groupé.
‫Mais rappelez-vous que cela vient d'être créé à
‫l'aide de la fonction montre.
‫Donc dans notre colis. json
‫nous avons cette montre. js qui créera simplement un
‫nouveau bundle chaque fois que nous modifions l'un des fichiers.
‫Mais sans aucune
‫compression, ou sans aucune optimisation des performances.
‫Mais maintenant que nous avons vraiment terminé avec tout notre
‫JavaScript, nous sommes prêts à réellement construire notre
‫JavaScript dans un bundle final.
‫Et ici, nous devons remplacer cette montre par build,
‫ce qui créera
‫ensuite notre package JavaScript compressé final.
‫Très bien.
‫Alors essayons ça ici maintenant.
‫Avec npm exécuté.
‫Et encore une fois avec l'onglet pour compléter automatiquement.
‫Voyons donc si...
‫Et c'est fait.
‫Et donc jetons un coup d'œil à notre paquet maintenant.
‫Et pour voir ça maintenant, c'est vraiment
‫si joliment compressé.
‫Très bien.
‫Maintenant, vous voyez également que nous avons une tonne de ces nouveaux fichiers
‫ici et c'est parce que vous êtes dans notre arborescence de fichiers.
‫Parcel crée en fait ce dossier de cache.
‫Mais nous ne voulons pas de ce dossier dans notre dépôt git.
‫À droite.
‫Ajoutons donc cela ici.
‫Et maintenant,
‫vous voyez automatiquement que dès que nous
‫l'aurons enregistré, il reviendra aux
‫fichiers d'origine qui ont été mis à jour.
‫D'accord.
‫Donc, une fois de plus, VS Code
‫est vraiment intelligent pour tout ce qui concerne git.
‫Très bien.
‫D'accord.
‫Et je pense que c'est effectivement ça.
‫Notre application est donc maintenant prête à être réellement déployée.
‫Et maintenant, la dernière étape consiste
‫à valider tous ces fichiers modifiés dans notre référentiel.
‫N'oubliez donc pas que la première étape consiste à ajouter tous les fichiers à
‫la zone de transfert.
‫Alors git add, et dans ce cas, tous les fichiers.
‫Très bien.
‫Et maintenant, tout ce que nous avons à faire
‫est de git commit, puis
‫le message, et disons : "Application préparée pour le déploiement".
‫Super!
‫Vous voyez donc que toutes nos modifications ont disparu.
‫Aussi d'ici.
‫Ce qui signifie que la branche de travail
‫actuelle est dite propre.
‫Et donc oui, nous sommes maintenant prêts à déployer notre application dans
‫la prochaine vidéo.