Mettre une application en production avec Angular 2

Passer en mode de production

Testez gratuitement nos 1324 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Pour passer une application en production, il faudra utiliser un script. Vous apprendrez à compiler les sources et à les servir sur un serveur HTTP classique.
05:47

Transcription

Alors maintenant, comment on va s'en sortir pour faire tourner notre serveur de production ? Vous voyez qu'ici dans notre package json, on a plusieurs commandes. Qu'est-ce qui se passe si je lui demande de démarrer le serveur avec un npm start ? Si on va chercher la commande start, on verra qu'effectivement celle-ci va jouer server:dev et server:dev, ça va jouer webpack-dev-server qui en l'occurrence est également un plug-in. Alors, on peut essayer, pour voir ce que ça donne. On va faire un npm start, et vous allez voir qu'effectivement tous les scripts qui sont des scripts qui proviennent de WebPack vont se mettre en marche, ils vont compiler, ils vont lire les informations, ils vont les servir, et à la fin on va se retrouver avec un serveur qui va fonctionner, que l'on va pouvoir utiliser directement. Alors, si je me rends sur la page, ici, qui sera sur le port 3 000, je vais charger la page et je vais me retrouver avec mon contenu. Alors, on pourrait regarder un petit peu ce qui se passe au niveau du network, quand je vais recharger. Je vais charger quelques informations dans le network, et notamment, je vais avoir un main.bundle.js. Donc, on voit bien qu'ici il y a bien eu à cet endroit-là une compression qui a été effectuée. Ce ne sont pas des compressions complètes, attention. Quand on va vouloir jouer le serveur de production, il va falloir faire un tout petit peu différemment. D'abord, il va falloir utiliser le script de production qui, comme vous pouvez le voir ici, va démarrer http-server sur le dossier dist. Donc, ça veut dire qu'en fait on va juste démarrer un serveur http, ce qui veut dire qu'on pourrait se servir au travers d'un vrai serveur http. Ici, si j'utilise la commande build:prod qui va permettre donc de créer les fichiers de production, je vais utiliser run et build:prod. Et on va voir que ça va se mettre en route également, ça va nous compresser toutes les informations, ça va nous faire un seul package, mais surtout il va se passer quelque chose, c'est que plutôt que de servir les fichiers directement comme ça, il va venir écraser ces fichiers-là et les stocker à un endroit bien particulier dans le dossier dist, et notre dossier dist, bien sûr on l'a déjà parce que je l'ai fait juste avant, on va se retrouver ici avec des informations, c'est-à-dire que ces informations seront tous les fichiers qui ont été créés et vous verrez qu'à l'intérieur de dist, une fois que le processus de compression sera terminé, on se retrouvera bien avec des fichiers à l'intérieur de dist, et ces fichiers-là, regardez, ils sont hashés, à chaque fois on a un hash comme ça, et ils vont être chargés. On va pouvoir relier n'importe quel serveur Web directement sur le dossier dist. Alors, pour le petit exemple, j'ai utilisé Mamp Pro, et puis j'ai relié monapp.com au travers de Nginx. Donc là, j'utilise la dernière version, et je l'ai relié sur le dossier dist directement. Vous voyez qu'ici, ça pointe vers dist, ce qui veut dire que si je me rends sur ce dossier, ici, je ne suis plus sur un serveur qui va tourner sur du port 3 000 ou autre. Non, je suis directement sur un serveur qui va être uniquement un serveur qui va servir mes fichiers, et mes fichiers sont stockés, c'est-à-dire que mes fichiers sont chargés par le serveur sans aucun problème. Et on se rend compte également qu'on a ici plus que trois fichiers qui ont été créés, et ces fichiers contiennent absolument l'intégralité de tout ce dont on a besoin, par exemple, vendor, il n'arrive pas à le charger et ça plante quasiment parce que c'est très épais. Ça contient toutes les librairies, toutes les bibliothèques, et on a juste ça à charger dans le navigateur pour que l'application fonctionne parfaitement. On n'a aucun souci avec ça. Alors, vous voyez un petit peu comment on peut aller très vite pour mettre en production. Ce sont des fichiers que vous pourrez poser, donc faire tous ces fichiers sur un serveur pour les héberger. Vous avez ici une distribution de votre application. Ça veut dire que ça, on n'a pas besoin de le poser. Tout ce qui se trouve dans src, etc., c'est vraiment le code source du projet, et ce que vous avez dans dist, c'est vraiment la version exploitable en production de votre site Internet. Donc, c'est vraiment bien d'utiliser WebPack pour faire une mise en production parce que c'est très rapide. Alors, je vais vous montrer une dernière chose, parce que de temps en temps peut-être que vous allez non pas lancer comme ça votre serveur avec un http-server très simple, vous allez peut-être vouloir tourner également sur un dev-server, mais le voir en production, c'est-à-dire utiliser le dev-server qui va tourner sur un port particulier, qui va en fait utiliser du npm et pouvoir avoir un reverse. Alors, on a la possibilité de faire ça, je vous montre ici un petit template que j'utilise très souvent. En fait, ce template, c'est un template pour Nginx, donc vous pourrez renseigner les mêmes informations que moi, à savoir une écoute sur le port 80 pour être en direct, un nom de serveur qui correspondra à votre vrai nom de domaine, et utiliser ensuite ce qui se trouve ici dans location / pour avoir les bonnes infos, et notamment vous allez utiliser un proxy pass vers un port particulier. Ça peut vous aider à mettre en production ou alors à avoir un serveur de préproduction qui fera tourné non pas l'application de prod, mais l'application de dev. C'est jouable aussi, donc n'hésitez pas à utiliser cette technique si vous avez besoin de faire ça. Donc voilà, un petit peu ce que l'on peut faire avec WebPack pour faire une mise en production, et vous voyez qu'une fois qu'on a les bons scripts et qu'on a de la config, ça va très vite. Alors, vous remarquerez qu'on a énormément de commandes qui existent également ici, qui sont des commandes d'exemple. Vous pourrez aller les regarder un petit peu et voir ce que cela donne, notamment on a le très bon watch qui est extrêmement intéressant parce qu'il va permettre de faire tourner un processus et d'attendre que les fichiers soient modifiés. À utiliser quand vous êtes en train de faire du développement pour voir un peu ce qui se passe. On va maintenant passer à autre chose, parce que là on vient de voir effectivement comment on utilise WebPack pour mettre une application en production, etc., mais ça implique quand même à chaque fois, quand on va charger la page, d'attendre que tout soit chargé pour afficher à l'utilisateur quelque chose, et vous remarquez que ce qu'on a en fait au tout début, c'est uniquement loading. Alors, pour de grosses applications, on fait appel à des Webservices, etc. Ça peut être embêtant, il y a d'autres solutions qui existent, et notamment, on va parler d'Angular universal.

Mettre une application en production avec Angular 2

Optimisez la mise en production de votre application AngularJS. Réduisez le temps de chargement et d’affichage, gérez les tâches répétitives avec des scripts, etc.

1h05 (20 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :13 déc. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !