Transcription
1. Introduction: Salut tout le monde. Ce cours porte sur la maîtrise des pipelines
Bitbucket pour une intégration continue et un déploiement continu. Je regardais autour du partage de compétences et j'ai réalisé qu'il
n'y avait pas de cours spécifiquement pour les pipelines Bitbucket. Vous pipelines de poche est à j'utilise essentiellement tous les jours dans le cadre de mon flux de travail de développement. Et maintenant que je l'utilise depuis un moment et fondamentalement accro, ça me fait gagner beaucoup de temps à partir de choses que je faisais manuellement. J' espère pouvoir partager avec vous mon expérience et tout ce que j'ai appris en cours de route. Ainsi, u2 peut gagner beaucoup de temps en automatisant des choses telles que vos tests, votre déploiement et vos processus de construction. Jetons un coup d'oeil à ce que nous allons faire dans ce cours. Avant de travailler directement avec des pipelines, nous allons configurer notre environnement et NodeJS et
commencer à utiliser un simple dépôt chaudron, créera ensuite un fichier YAML de pipelines Bitbucket très basique. Pour commencer notre toute première construction, ajoutera de la complexité à notre facturé en utilisant quelques étapes personnalisées pour construire la source du site, puis utiliser sep pour déployer ce qui sont connus sous le nom d'artefacts notre serveur de choix obtiendra encore plus complexe, en ajoutant des fonctionnalités SSH et des
clés d'accès afin que nous puissions faire un travail automatisé sur le côté serveur, va brancher le référentiel Git dans un développement, mise en scène dans Master System et apprendre à utiliser dynamiquement les variables dans chaque branche intègrent également des notifications Slack personnalisées et tentent même certains mécanismes d'auto-guérison lorsque les choses tournent mal avec le déploiement. À partir de là, le ciel est la limite de ce que vous voulez faire avec vos propres builds, déploiements et tests. J' espère que le cours vous semble intéressant, et j'espère que vous vous joindrez à nous en moins d'un, où nous verrons à quel point il est facile et rapide de commencer avec les pipelines. Je tiens également à mentionner que ce cours s'
adresse davantage aux développeurs intermédiaires et supérieurs. Donc, les développeurs qui ont déjà une certaine expérience avec les dépôts Git et les scripts bash. Nous commencerons simplement et deviendrons plus complexes, mais je veux juste vous le dire. Donc je pense que nous allons nous amuser beaucoup sur ce parcours et j'espère vous y voir.
2. Configuration d'environnement: Avant de commencer à coder, nous devrions nous assurer que nous utilisons tous les mêmes outils. Puisque nous allons utiliser un peu de noeud, allons nous assurer que nos versions de noeud sont les mêmes. Donc, si je vérifie la version de MyNode, j'utilise la dernière version de la dix, qui est 10.19. Et npm est aussi là, 6.13.4. Si vous n'avez pas cette version, vous pouvez installer nvm. Et puis vous exécuteriez nvm install v 10.19. Mon cas, bien sûr, j'ai déjà installé, mais cela installera à la fois le nœud et NPM pour vous. C' est en quelque sorte hors du cadre de ce cours. Mais si vous allez à la page GitHub de NVM, vous pouvez passer à l'installation et à la mise à jour. Ils ont un script bash qui vous obtiendra la dernière version. Si vous utilisez Windows, vous devrez installer le nœud à partir de la source, la version 10.19. Donc, pour ce cours, j'ai déjà préparé un dépôt git simple que nous pouvons utiliser comme exemple pour construire notre premier pipeline. Donc on peut cloner ça maintenant. Et je vais mettre ce lien dans les notes de leçon. Nous allons cd dans ce dossier et l'ouvrir dans le code Visual Studio. On dirait qu'il y a beaucoup de choses ici. Mais vraiment tout ce qu'il est est une copie de HTML5 chaudron, qui est un joli modèle nus où vous pouvez commencer à prototyper et construire un filaire pour un site Web sans avoir à vous soucier choisir un framework comme Réagir ou voir ou quoi que ce soit. Fondamentalement, si vous savez, CSS normalisé, il a cela dedans et quelques autres goodies qui
unifie fondamentalement les styles si vous visitez la page sur n'importe quel navigateur. Donc, quand nous téléchargeons ceci, nous voyons que nous avons juste un fichier zip. Et quand on les décompresse,
on obtient les mêmes dossiers que ceux que j'ai dans mon projet. Donc, si nous revenons au projet, nous voyons le même type de structure. La seule chose que j'ai ajoutée ici, si nous allons dans l'index, j'ai ajouté bootstrap pour certains styles. Et puis à partir d'ici, c'est, c'est à partir de la passe-partout, ajoutez votre site ou votre application coton ici, jusqu'à la balise Google Analytics, qui n'est pas non plus rempli. Mais ce n'est qu'un simple contenu. Et nous pouvons ouvrir ça dans le navigateur. Et nous voyons que nous avons un site de base avec lequel travailler. Pas de JavaScript, pas de framework frontal. Et c'est un peu réactif. Je suis sûr que vous pouvez trouver quelque chose qui n'est pas parfaitement réactif ici, mais c'est assez bon pour commencer. Et ça conviendra à son but pour ce qu'on va faire. Donc, dans cette leçon, la première chose que nous avons fait était assurer que nous utilisions tous la même version de Node, en réutilisant la version de nœud 10.19. Ensuite, nous avons téléchargé un exemple simple dépôt git, que nous allons utiliser tout au long du cours. Comme nous l'avons vu, c'est une simple copie de chaudron HTML5. Et j'ai ajouté du balisage à l'index HTML et aussi aux feuilles de style pour une de bootstrap et une de la mienne. Donc, dans la prochaine leçon, nous allons commencer et enfin construire notre pipeline.
3. Créer votre premier pipeline: Donc, la première chose que nous devrons faire est de créer un dépôt Bitbucket, bien que nous clonons le dépôt initial à partir de GitHub, devra créer un référentiel ici, puis transférer l'URL d'origine du référentiel vers le référentiel créé ici dans Bitbucket. Donc, si vous n'avez pas de compte Bitbucket, vous pouvez en créer un maintenant, ils sont gratuits. Ensuite, une fois que vous avez la page de présentation de votre tableau de bord, vous pouvez accéder à Créer un référentiel. Et je vais prendre le même nom que celui de GitHub. Et nous avons créé. Nous avons donc notre URL. Notez qu'il sera différent en fonction de votre nom d'utilisateur. Et nous voulons tout copier, mais pas inclure la partie clone git de la commande. Nous voulons juste l'URL. Donc, nous pouvons vérifier l'URL actuelle du dépôt que nous venons de cloner avec git distant dash V. Et nous voyons cette URL GitHub. Nous allons le mettre à jour avec notre URL Bitbucket qui vient d'être créée. Autrement dit, vous pouvez vérifier que cela fonctionne en émettant la même commande distante git. Maintenant que notre télécommande est réglée, nous pouvons enfin créer notre fichier de pipeline. Et ce fichier doit être nommé pipelines de compartiment. Yml. Pour autant que je sache, un fichier de pipeline commence toujours par les pipelines de commande. Ensuite, vous définissez des branches. Comme nous le verrons dans d'autres leçons du cours, il est utile d'avoir différents pipelines en fonction de la branche sur laquelle vous êtes. Par exemple, vous pouvez avoir un environnement de test ou de
mise en scène, puis vous avez votre environnement en direct ou de production. Et le pipeline devra être géré différemment en fonction de ces branches. Donc, si certains d'entre vous ont creusé dans le dépôt, vous avez peut-être remarqué que j'ai déjà nommé la branche initiale que nous avons cloné la leçon 1. Et vous pouvez vérifier cela en exécutant la branche git à S V. Et vous pouvez voir si sur moins d'un. Donc, dans notre dossier de pipeline, nous tenons à le noter avec moins d'un. Maintenant, nous pouvons ajouter ce qu'on appelle une étape. Et nous pouvons ajouter un nom à notre étape. Et un script. Maintenant, dans les pipelines, bash est toujours disponible pour vous. Donc pour l'instant, nous allons juste faire un simple écho. Bonjour le monde. Enregistrez ce fichier, ajoutera tout. Git commit avec un message. Juste pour tester le pipeline. Et on va pousser ça. Super. Sur les côtés du dépôt. Si vous allez à l'onglet du pipeline et que vous faites défiler vers le bas, parce que c'était la première fois que nous avons poussé un fichier YAML de seau bit, nous avons ce genre de vue. Dans notre cas, nous l'avons configuré correctement. Et donc Bitbucket nous dit que la configuration semble bonne. Et on peut le tirer ici. Si vous avez manqué une commande ou une indentation, cela pourrait ressembler à ceci. Ça dit que c'est invalide. Et tu auras un point jaune où tu pourras planer. Donc ici, il dit mauvaise indentation, mais parfois il peut dire commande inconnue ou quelque chose n'est pas reconnu. Vraiment 99% du temps c'est à cause de l'indentation. Et en fait, il y a un très bon outil que vous pouvez valider. Si vous êtes vraiment trébuché. Vous pouvez continuellement copier et coller votre fichier
de pipelines ici jusqu'à ce qu'il indique qu'il n'est pas valide. Donc, si nous corrigeons cela juste pour montrer comme un exemple, valide. Et encore une fois, ceux-ci sont invalides. Donc, vous pouvez vous déplacer ici avec votre pipeline jusqu'à ce qu'il soit valide. Et vous pouvez toujours le copier et le coller ici. D' accord, alors allons activer les pipelines. Et tout de suite, notre toute première construction se déclenche. Super. Il a donc été couronné de succès. La chose vraiment agréable avec les pipelines est que vous obtenez un journal de chaque étape qui s'est produite. Ceux-ci sont intégrés dans la configuration et le démontage. Cependant, nous voyons qu'il s'agit de notre commande personnalisée. Nous avons à la fois la commande réelle dans le pipeline et le résultat de cette commande. Donc, nous verrons comment cela est utile plus tard dans le débogage quand il y a des erreurs dans le pipeline ou quelque chose ne va pas sur le serveur. Donc, dans cette leçon, nous avons créé notre premier fichier de pipeline avec juste un simple écho. Nous initialisons cela via l'onglet Pipelines. Nous avons vu les événements de journalisation. Et nous avons également vu comment vous pouvez valider vos pipelines Bitbucket avec ce validateur de pipelines Bitbucket, que je publierai dans les notes de leçon. Maintenant que notre pipeline est connecté à bitbucket, nous pouvons commencer à construire des exemples plus complexes et nous allons passer à cela dans la prochaine leçon.
4. Utiliser SCP pour transporter des objets à partir de la construction: Maintenant, nous allons voir comment déployer ce qu'on appelle des artefacts dans notre pipeline Bitbucket. Et les artefacts ne sont vraiment rien de plus que des fichiers et des
dossiers spécialement définis que Bitbucket sait conserver une copie et que vous pouvez manipuler plus tard. Donc, il y a vraiment deux étapes principales dans ce processus de septembre. Le premier est de produire les artefacts et de dire à Bitbucket que ce sont les artefacts. Et la seconde consiste à copier ces artefacts sur votre serveur cible. Dans ce cas, j'utiliserai une gouttelette Digital Ocean, qui est juste une boîte Linux distante. Ainsi, les artefacts sont particulièrement utiles dans les processus de construction qui ne produisent que du contenu statique. Par exemple, Create React app ou un script type build. Et ils sont également utiles lorsque la construction est particulièrement lourde ou lente sur le plan informatique. Je dois l'utiliser beaucoup, par exemple, parce que la gouttelette que j'ai mentionnée est la plus petite taille. Et je trouve qu'essayer d'exécuter des commandes de construction directement sur le serveur peut entraîner des délais d'attente et le serveur n'a tout simplement pas assez de mémoire pour faire la construction. Donc, avant d'écrire des commandes dans le pipeline, nous voulons créer une nouvelle branche appelée Leçon 2. Si vous voulez suivre, vous pouvez créer la branche maintenant. Ou si vous voulez simplement passer au code de travail final, vous pouvez simplement passer à cette branche à partir de la version de clone GitHub qui a la source complète. Donc on va le faire maintenant. Leçon de paiement Git. Super. Donc, nous pouvons voir des branches juste pour vérifier ou sur moins de deux. D' accord ? Et encore une fois, nous travaillons avec cette base de code standard HTML5 statique. Donc, il peut être servi juste en servant l'index HTML par lui-même. Et pour simuler une sorte de faux processus de construction, nous allons définir un dossier appelé dist. Et comme avec n'importe quel framework où vous auriez un disque ou un dossier de construction, par
exemple, avec un script de type build ou une application Create React, vous voulez ignorer ce fichier. En get. Nous ne voulons pas envoyer les fichiers produits dans notre dépôt. Donc, nous allons également créer un nouveau fichier gitignore et simplement ajouter dist afin que nous puissions retourner à notre pipeline. Et maintenant que nous sommes dans la leçon de branche, nous devons définir que le nom de branche et définir nos artefacts étape. Donc, je vais l'appeler un nom comme un processus de construction un peu faux. Juste pour simuler à nouveau que nous sommes, nous déplaçons quelques fichiers dans notre dossier dist, qui sont la construction réelle. Les fichiers, parce que nous simulons ce projet de loi. Tout ce que nous avons à faire est de copier la base de code entière dans ce dossier dist. Donc, au début, vous pourriez penser à utiliser Cp comme une simple commande bash pour faire cela. Mais nous ne voulons pas réellement copier le dossier dist lui-même dans dist. Et puis vous allez, vous allez entrer dans une boucle essentiellement récursive et cela ne fonctionnera pas. Il y a donc une bonne alternative pour utiliser notre évier où vous pouvez éviter cette boucle récursive. Et donc ce que nous pouvons faire est notre tableau de bord de synchronisation AB, obtenir la barre de progression. Et c'est la source, donc la racine du projet. Et nous voulons le copier dans dist. Mais nous voulons exclure cela. Donc cette commande devrait le faire. Et puis nous devons bien sûr définir les artefacts E, qui seront dist et tous les fichiers et sous-dossiers. Donc double étoile. Donc, généralement dans cette action de script dans un, en utilisant un,
un framework comme Node ou un script de type, vous exécuteriez l'installation de nœud et la construction de nœud, test de nœud. Ces commandes resteraient là. Et puis vous définiriez toujours vos artefacts. Et vous pouvez également définir plusieurs artefacts Si vous avez plus qu'un seul répertoire. Par exemple, si vous aviez un autre fichier TXT de sortie, par
exemple, vous les listeriez continuellement après cet identificateur d'artefacts. Et puis, bien sûr, il y a une deuxième étape qui consiste en fait à déployer ce dossier de disque sur le serveur. Donc, et nous allons nommer ça. Oups. Et le script ici est un peu spécial. Enfin scène a un
SCP intégré dans lequel vous pouvez utiliser c'est ceci. Ensuite, vous devez également définir les variables pour cette commande scp. Oups. Vous avez donc besoin d'un serveur utilisateur. Le chemin distant, que je vais mettre dans la source Web Linux standard sous un dossier appelé Skills share test SEP. Et le chemin local est relatif à cette base de code ou au dépôt lui-même, qui est dist. Et nous voulons aussi tous les fichiers et dossiers. Donc ces deux étapes devraient nous amener avec SEP. La seule chose qui manque maintenant est que nous devons réellement configurer en tant que CP, donc cela fonctionnera. Donc il y a deux choses là-bas. Nous devons d'abord définir l'utilisateur cible et le serveur où nous voulons déployer. Et nous devons également configurer les clés SSH. Bitbucket a donc accès à notre serveur. Alors, revenant à notre page de référentiels, nous voulons aller dans les paramètres du référentiel. Et d'abord, nous allons ajouter ces variables de référentiel, l'utilisateur et le serveur. Et je devrais également mentionner que cela chaque fois que vous avez un signe dollar avec un nom de variable, c'est dire à Bitbucket de regarder dans ces paires de valeurs clés des variables du référentiel. Donc, pour l'instant, nous avons seulement besoin de l'utilisateur et du serveur, mais vous pouvez théoriquement en ajouter autant que vous avez besoin. Et bien sûr, ils sont très utiles pour, pour des choses comme celle-ci, où la sécurité et la confidentialité sont importantes et que vous ne
voulez pas coder ces valeurs directement dans votre pipeline. Donc, pour ma configuration, je suis root. Vous pouvez avoir sécurisé dans le serveur. Je vais aussi coller ici, et je vais aussi le rendre sécurisé. Ok, nous avons nos variables serveur et utilisateur, et maintenant nous devons configurer la clé SSH. La façon la plus simple de le faire est simplement d'avoir le compartiment générer les clés pour vous. Donc nous allons cliquer dessus. Et bitbucket crée une paire de clés publiques privées. Et ils vous disent même ce qu'il faut faire. Copiez cette clé publique sur les clés autorisées SSH sur l'hôte distant. Donc on va le faire maintenant. J' ai donc un alias pour me connecter directement à ma gouttelette. Je ne veux pas révéler mon epi et y accéder, mais au moins vous voyez ici vous pouvez voir root qui était notre utilisateur. Et nous allons aller sur cette voie. Et nous allons ouvrir le fichier des clés autorisées. J' ai donc déjà quelques clés publiques ici, certaines sont pour, donc j'ai déjà quelques clés publiques ici, dont
certaines sont en fait pour d'autres projets de pipeline Bitbucket. J' ai donc déjà quelques clés publiques ici, dont
certaines sont déjà utilisées pour différents pipelines de construction dans différents référentiels. Mais on va coller le nôtre ici maintenant. Appuyez simplement sur Entrée. Regarde, ok. Quittez avec le contrôle X et enregistrez. Même dossier. Ok, super. C' est donc aussi une bonne idée de récupérer et de valider l'empreinte digitale des hôtes connus. Donc, je vais ajouter le mien est la même IP ou URL que vous utiliseriez dans les variables, les variables de référentiel pour le serveur. Et on peut chercher l'empreinte. Et avant d'ajouter l'hôte, nous pouvons simplement sauter rapidement sur le serveur et valider que c'est correct. Donc, pour ce faire, encore une fois, je vais SSH dans ma, ma boîte Linux. Et pour ce faire, nous pouvons écrire un simple bash for-loop pour obtenir le hachage md5 pour tous nos fichiers de clé publique. Ça ressemble à ça. Et je vais poster cette commande dans les notes de cours. Pour qu'on puisse regarder. J' ai ce F9 EC et le 9171 F9 EC. Oui. C' est notre hachage ECDSA MD5. Donc, nous pouvons aller de l'avant et ajouter cet hôte. Une dernière chose que nous devons faire, où que vous utilisiez ces fichiers, c'est de nous assurer que ce répertoire existe. Donc, nous allons cd dans Var www et créer ce répertoire. Donc nous pouvons vérifier que c'est leur parfait. Ok, et ça devrait être assez de travail pour l'instant que nous devons faire sur le serveur distant. Donc maintenant que nous sommes de retour ici dans notre dépôt local, nous devrions être en mesure de pousser le code comme il est maintenant dans la branche moins de deux. Et il devrait exécuter les étapes. Alors essayons-le. Ajoutez nos modifications. Et puis nous nous engagerons avec un message. Premier test de SCP et poussez cela. Nous devons dire à la télécommande que l'origine devrait également avoir moins de deux branches. Donc, si nous passons à nos pipelines, nous pouvons voir que cela a été couronné de succès. Et encore une fois, le bel avantage ici est que nous obtenons le même journal de console. Puisque nous avons passé cet indicateur de progression avec rsync, nous voyons le même journal que nous le ferions si nous exécutons cette commande localement dans le dépôt. Et il a également déployé avec succès le dossier ici. Donc, pour vérifier, revenons sur notre serveur. Et encore une fois, nous les mettons en loin WW compétence partage test SEP. Et listons ce que nous avons ici. Super. Donc, ce processus de construction sous moins de deux branches fonctionne avec succès. On est dans le nuage, pas localement. Nous sommes dans le cloud en copiant tous ces fichiers dans un dossier de disque, qui est défini comme un artefact, et en copiant le contenu dans ce dossier vers ce chemin distant. Et il y a encore une dernière étape que nous devons faire sur le serveur. Et c'est que nous devons réellement servir ces fichiers et vérifier qu'ils sont bien servis. Une fois que nous aurons fait cela, nous aurons une intégration continue complète, quoique simple. Donc, dans la leçon suivante, nous allons examiner comment nous pouvons SSH sur le serveur dans notre pipeline de construction et exécuter les commandes dont nous avons besoin pour nous assurer que index.html est servi.
5. Utiliser SSH pour exécuter des commandes sur le serveur: Donc, dans la dernière leçon, nous avons appris comment déployer des artefacts sur notre serveur de production. Nous devons maintenant exécuter quelques commandes supplémentaires pour servir réellement les artefacts que nous avons déployés afin de pouvoir les afficher sur une URL publique. Donc encore une fois, la première chose que nous devons faire est de nous lancer dans une nouvelle leçon, branche, leçon trois. Et nous pouvons copier les étapes exactes de la leçon 2, les deux premières étapes. Et nous allons ajouter notre troisième étape. Nous voulons donc servir ce contenu statique. Et idéalement, vous auriez un serveur fonctionnant constamment, par
exemple, un serveur Express. Et puis vous configurez un proxy en utilisant un outil comme Apache ou le moteur X pour exposer cela. Nous aborderons ce genre de choses dans les leçons à venir. Mais pour l'instant, nous voulons juste montrer comment émettre des commandes SSH pour pouvoir le faire. Et deux outils qui rendent cela assez facile sont le gestionnaire de service MPM et les paquets n Grob. Et ensemble, il sera en mesure de servir ce contenu statique et aussi l'
exposer à Internet afin que nous puissions voir notre site sur une URL publique. J' ai donc déjà mis en place un simple fichier index.js, que je vais mettre dans les notes de leçon. Comme c'est en quelque sorte hors du cadre de ce projet. Donc nous allons créer ici, et je vais juste copier et coller ça ici. Fondamentalement, ce qui se passe, c'est que nous démarrons un serveur en utilisant le middleware du gestionnaire de service. Et pour ceux qui sont intéressés, gestionnaire de
service est le noyau du service, qui est la façon simple recommandée que vous pouvez servir. Par exemple, une version de l'application Create React. Juste une simple CLI où vous dites servir le nom du dossier dans ce dossier est servi, mais c'est ce qui se passe en arrière-plan. C' est un middleware pour le package HTTP Node standard. Et puis je l'étape deux, je me connecte n grok à ce port et j'ai gardé 5 mille comme Serve. La commande CLI serve utilise 5 000 par défaut. Donc j'ai juste gardé qu'il n'y a pas de raison spéciale. Et fin grok exposera le port local 5 mille à Internet. Donc, avec notre index.js configuré et est prêt à fonctionner, nous pouvons maintenant définir la troisième et dernière étape de ce processus de construction. Encore une fois, oméga pas droit. Et je vais lui donner un nom assez explicite. Servir statiquement le gestionnaire de serveur et l'
exposer à Internet via la colère. Ok. Et il va encore avoir un script ici. Et dans la dernière leçon, puisque nous avons déjà défini l'utilisateur et le serveur, nous pouvons bien sûr les utiliser dans cette étape aussi bien pour notre SSH, juste l'utilisateur SSH au serveur. Et puis nous pouvons penser à la commande que nous devons émettre. Donc, nous devons d'abord arriver à la racine de l'endroit où se trouve notre contenu statique. Test SCP de partage de compétences. Et nous ferons Et, et ce qui signifie en série. Cela signifie donc bash s'assure que cette commande se termine et passe ensuite à la suivante. Alors qu'un seul serait en parallèle. Mais le CD est important pour nous d'être dans le répertoire d'abord avant d'émettre cette commande suivante, qui est npm install. Et nous allons installer les deux outils que nous devons exécuter, notre index.js, qui est serve, handler et grok. Et encore une fois, c'est quelque chose que nous voulons faire en série. Nous voulons attendre qu'elle se termine. Et puis nous pouvons exécuter le nœud index.js. On peut sauver ça. Et si nous regardons index.js, nous pouvons voir que j'ai mis quelques journaux de console ici. Donc, nous serons en mesure de voir cela dans l'interface utilisateur bitbucket. Et à la fin de la journée, nous obtiendrons une URL n grok et nous devrions être en mesure de visiter cette URL. Donc, c'est quelque chose d'une sorte de hachage. Et puis je dois I0. Donc, nous verrons cela dans l'interface utilisateur de poche et nous serons en mesure de visiter cela et de voir notre site. Espérons que nous allons pousser ça. Maintenant. Disons que nous sommes maintenant en mesure d'émettre des commandes via SSH. Et nous allons pousser. Super. Et donc nous voyons que le tunnel de chute est exposé ici. Donc on peut juste cliquer dessus. Et super, et nous avons notre site. Donc, bien que cette troisième étape de notre processus de déploiement continu fonctionne, il y a un léger hoquet dans ce nœud. Index.js ne donne jamais spit bucket un signal à la fin. Et donc le processus de construction ne réalise jamais qu'il se termine. Et c'est bien sûr mauvais si vous avez une limite de minutes dans l' environnement de construction
Bitbucket. Nous allons donc introduire un nouvel outil qui peut exécuter ces processus en arrière-plan et c'est pour toujours. Nous allons donc simplement ajouter cela à notre liste de paquets à installer localement. Et au lieu d'utiliser Node, nous émettons pour toujours démarrer index.js. Mais en éditant cette commande, nous remarquons qu'il y a un problème différent. Et c'est dès que votre application grandit et que vous devez faire commandes
plus complexes et peut-être même envisager des environnements différents. Nous ne pouvons pas écrire une commande en ligne et à notre Build Pipeline pour toujours. Et donc une bonne façon de refactoriser ceci est de collecter ce script dans un script bash. Donc, je vais prendre cela et nous pouvons créer un script bash appelé deploy. Collez ça. Et nous pouvons les mettre sur plusieurs lignes pour plus de lisibilité. Sauver ça. Maintenant, au lieu de cette grande chaîne de commandes, nous pouvons simplement exécuter notre script bash. Mais nous devons nous rappeler que ce script bash sera déplacé dans le dossier dist, qui devient le dossier statique racine. Donc, nous devons d'abord cd à nouveau dans ce dossier de test CP partage de compétences. Et puis nous pouvons appeler Bash Bash déployer SH. Nous allons donc ajouter cette factoring commandes
SSH dans le script de
déploiement. On va pousser. Super. Donc, nous voyons un peu de sortie depuis toujours. Mais il est important de remarquer que nous perdons ça et grok info. Et ce serait également bien si nous n'avions pas toujours besoin de
venir à notre interface utilisateur Bitbucket pour voir les journaux de notre facture. Nous devrions donc chercher une bonne façon de messagerie et le ferons exactement dans la prochaine leçon. Où nous allons raccorder à un mou acheté, où nous pouvons envoyer un message de notre processus de construction.
6. Créer un bot de messagerie d'échappement pour ajouter une fonctionnalité de messagerie: Dans la leçon précédente, nous avons construit notre première construction complète d'intégration continue. Et vers la fin de la leçon, nous avons rappelé quelques commandes Bash dans un script, qui a pu terminer une sortie propre pour Bitbucket. Mais nous avons vu que nous avons perdu des informations de consignation. Mais à long terme, toujours regarder les informations de journalisation pour les informations
critiques telles que l'URL publiée est un peu lourd. C' est pourquoi nous voulons construire un système de messagerie pour accéder à ces informations plus facilement et plus conviviales. Donc nous allons le faire en créant un mou acheté. Donc, j'ai déjà ouvert l'URL, c'est api dot slash.com slash messagerie slash hooks web. Et la toute première étape consiste à créer votre application Slack. Alors je vais cliquer dessus. Et je me suis déjà connecté. J' ai déjà un compte mou. Et j'appellerai ce partage de compétences. Déployer bop. Et je vais créer cette application. Et nous voulons aller dans les hameçons Web entrants, peut les activer. Et le tout premier exemple ici est déjà au format Bash. Alors ajoutons un nouveau crochet Web pour que nous puissions obtenir cette URL. Et je vais rapidement créer une nouvelle chaîne appelée Skill Share test. Je crois que j'en ai besoin. Nous allons l'ajouter au canal de test partagé des compétences, cliquez sur Autoriser. Et génial, nous obtenons une URL de crochet web réelle. Donc, comme je l'ai dit, c'est déjà au format Bash. Nous pouvons donc aller de l'avant et, comme premier exemple, aller directement dans notre script de déploiement. Et nous allons d'abord mettre ceci comme r. Nous pouvons changer le texte en commençant point CI, point, point. Assurez-vous d'ajouter cela. Et, et de continuer les commandes. Et nous allons aussi mettre en place la fin ci complète. Et nous n'avons pas besoin de ce dernier jour et gardons ça. Et je suis déjà allé de l'avant et j'ai créé une leçon pour branche. Nous devons donc ajouter cela. Et la construction elle-même reste exactement la même. Nous avons juste accroché à ce crochet web comme un, comme un effet secondaire. Et donc nous devons signifier la leçon pour, pour cette branche. Et nous devrions être en mesure d'ajouter cela. Et maintenant que nous avons poussé, ça devrait déclencher la construction. Et nous devrions voir nos messages en relâche. Donc on voit l'IC de départ et on voit que je termine. Nous sommes donc liés à notre script de déploiement. Mais notre objectif initial était également d'obtenir le lien grok de fin à partir du script index.js. Et encore une fois, j'essaie de garder ce cours a mis l'accent sur les pipelines que possible. Donc, je vais juste coller le code ici et décrire rapidement ce que j'ai fait. Essentiellement, j'ai écrit une version JS de nœud de cette commande curl. Nous devons définir les en-têtes JSON de l'application et passer les données JSON comme une valeur clé avec du texte et une chaîne. Et bien sûr posté à l'URL donnée. Et donc j'ai demandé le paquet de récupération de noeud et créé une fonction wrapper autour d'elle, où tout ce que vous avez à faire est de passer le message de chaîne. Nous avons donc publié notre en-tête JSON d'application. Et pour le corps, nous stringifions avec la valeur clé, le texte et le message. Et pour illustrer que j'ai configuré la fonction à côté du console.log. En réalité, nous pouvons probablement supprimer ces
lignes console.log ou écrire dans un fichier journal local sur le serveur. Mais pour l'instant, je vais juste le laisser. Donc, nous devrions voir en conséquence encore ces deux messages. Et puis en plus. La course à l'hôte local 5 mille et n grok tunnel. Et nous allons enfin obtenir notre URL sur slack dans parce que j'ai ajouté noeud fetch, nous devrons ajouter cela à notre script de déploiement en tant que paquet. Et ça devrait le faire. Et nous pouvons voir que nous obtenons ceux qui étaient auparavant les journaux de la console maintenant un mou messages. Et même si nous passons cela, tout comme une chaîne normale à relâcher, mlack est assez intelligent pour reconnaître ce sont des URL et les formater pour nous. Vous pouvez même faire d'autres choses comme passer emojis et faire un formatage simple comme gras et italique. Mais je te laisse ça pour regarder dans les quais. Mais vérifions notre lien pour voir si cela fonctionne. Et parfait. Le site est en marche. Pour ceux d'entre vous qui ont codé jusqu'à présent. Vous avez peut-être remarqué qu'il y a un petit problème avec notre script de déploiement et notre index.js. Le problème est que ce script va démarrer un processus de noeud à l'écoute de 5 mille. Et quand nous émettons pour toujours démarrer index.js va essayer de démarrer une nouvelle instance de noeud sur ce script. Et cela va vraiment planter parce qu'il y a déjà un processus à 5 000. Et donc dans ce cas, a
toujours une belle commande au lieu de commencer à utiliser restart. Et la bonne chose ici est qu'il va vérifier si un processus dans ce dossier avec index.js est déjà en cours d'exécution. Si ce n'est pas le cas, il le démarre, mais s'il est en cours d'exécution, il le redémarre. Donc courir pour toujours redémarrer. Nous allons résoudre ce problème pour un dernier nettoyage ici. Nous devrions également déplacer cette URL vers une variable d'environnement. Pas trop de risque pour la sécurité, mais si quelqu'un obtient une mise sur ce lien, il peut spamer votre canal mou, ce qui serait un peu ennuyeux. Donc, dans le cas de Node, nous pouvons supprimer cela. Et cela deviendrait quelque chose comme traité dot n dot Slack URL web. Et nous devrions également faire l'équivalent dans le script de déploiement. Donc ces deux-là, je vais renommer Slack, web hook URL. Et bien sûr cette syntaxe. Nous ramène aux variables du référentiel. Donc, nous pouvons ajouter que Slack web hook URL et coller cela dans et aussi le rendre sécurisé. Et il y a une dernière étape que nous devons faire. Donc, la variable de référentiel n'est pas directement utilisable ici dans ce script, mais elle est plutôt disponible dans le fichier point Gamow des pipelines bitbucket. Donc, nous pouvons le passer en fait comme un argument. Et quand il est passé dans le script. Comme le standard bash est. Le premier paramètre est le signe dollar 1. Et donc d'utiliser le même nom dans ce script ainsi que dans le processus de noeud. Nous pouvons exporter une variable du même nom pour être équivalente à ce périmètre. Et parce que Forever a lui-même ses propres variables d'environnement, nous devons également passer cette même commande devant l'appel pour toujours. Et cette syntaxe ne fonctionnera pas non plus avec le redémarrage. Ça doit être avec le début. Et donc nous allons faire une paire fera d'abord Forever, arrêter index.js et nous allons redémarrer avec le bon paramètre. Maintenant, il y a une dernière chose à faire. Et c'est puisque nous passons la variable de dépôt dans cette chaîne SSH, pour que cela soit évalué correctement à la variable réelle, nous devons utiliser des guillemets doubles. Et ça devrait le faire. Et nous pouvons voir que la construction terminée. Et nous avons réussi à le refactoriser. Et cela fonctionne exactement de la même manière. Vérifions ce dernier message. Super, c'est notre site statique. Et pour être sûr qu'il n'y a pas d'autre processus distinct en cours d'exécution, ce que nous ne nous attendions pas. Cela devrait conduire à une sorte d'erreur. Exactement. Donc n Grok ne fuit plus. À cette URL. Nous avons réussi, j'ai créé un nouvel accès à notre site à cette nouvelle URL. Donc tout semble fonctionner. Donc, dans cette leçon, nous avons refactorisé notre URL de crochet Web Flack codée en dur à une variable de référentiel. Et nous avons vu que pour que cela soit accessible en cours d'exécution sur le serveur, nous devons passer cela en utilisant des guillemets doubles dans la chaîne SSH. Et nous devons également, bien sûr, définir cette variable,
cette paire de valeurs clés dans l'interface utilisateur des variables du référentiel sur le site bitbucket. Même après avoir passé cette variable, qui est le signe du dollar un, nous avons aussi dû la passer pour toujours. Et avec ce type de syntaxe, les paramètres ne peuvent être définis qu'avec éternellement start. Donc, nous faisons une paire de stop pour toujours et pour toujours commencer. Nous pouvons donc voir que ce genre de mise en page est un peu complexe. Et lorsque nous travaillons avec un framework plus complexe comme un script de type, nous pouvons tirer parti de divers n fichiers, tels qu'un environnement de développement, environnement de
transit et un environnement de production. Pour éviter ce type de paires de commandes, tout coulera très proprement à partir d'un fichier JSON d'environnement.
7. Bootstrapping avec l'application Créer React: Dans la dernière leçon, nous avons affiné l'envoi de messages à certains points du pipeline par le biais du mou. Mais nous avons vu combien il est difficile de traiter avec une seule variable de dépôt. Et à quel point c'est difficile quand nous fabriquons notre propre outillage. Et nous ne sommes toujours pas éloignés de ce code de type HTML cinq Chaudron original. Donc, les techniques de pipeline que nous avons utilisées jusqu'à présent sont bonnes et les concepts fonctionneront avec n'importe quel projet. Mais nous devrions examiner ce que nous pouvons faire avec un exemple plus complexe. En utilisant React et tapez script. Nous pouvons tirer parti des outils dont disposent ces langues et des outils qui les entourent pour rendre nos pipelines encore plus propres. Et nous allons enfin concevoir un pipeline avec une vraie construction dans cette leçon. Dans ce cas, la commande npm run build de l'application Create React. Tout d'abord pour cette leçon, je vais créer trois branches pour simuler un flux de travail complet de CD CI, qui sont le développement, le staging et le master. Donc, nous allons d'abord créer une branche complètement vide. Puisque nous ne suivrons pas ou ne prendrons aucun code de notre site HTML5. Nous allons donc créer une branche orpheline. Et nous voulons commencer par une ardoise propre ici. Donc, nous allons supprimer tous ces fichiers. Et génial, que nous sommes restés, mais c'est ignoré de toute façon. Pour que je puisse me débarrasser de ça aussi. Ok, et nous sommes prêts à bootstrap avec l'application Create React. Donc c'est n px. Créer l'application React. Dislocation et grande. Donc, le bootstrap de création du réacteur est terminé. Et nous pouvons pousser tout cela comme notre engagement initial pour ce nouveau projet, pour ainsi dire. Et nous voulons aussi nous assurer que nos branches de mise en scène et de maître avaient la même base de code pour commencer. Ok, alors développez, Maître, et la mise en scène ont tous la même base de code. Et gardez à l'esprit que cette configuration est un peu spéciale puisque je veux garder tout le code du cours pour vous dans le même référentiel dans un projet normal, master est créé par défaut avec git init. Et donc vous n'auriez qu'à créer, développer une branche et une branche de mise en scène.
8. Définir des fichiers d'environnement et l'utiliser dans un composant: Alors, allons entrer dans un code ici. Dans la dernière leçon, nous étions préoccupés par le jonglage et le passage des variables de dépôt autour. Donc, pour le faire d'une manière plus propre, nous pouvons définir des fichiers d'environnement pour chacune de ces branches que nous avons. Donc, d'abord, je vais créer un dossier de fin dans le dossier source. Et je vais mettre dans les fichiers d'environnement, norme EN point JSON et, et développer la mise en scène JSON point de Jason et Esther. Et comme un exemple de départ simple, nous allons mettre une clé de nom de site dans chaque JSON. Donc, pour le développement, dites quelque chose comme penser à cela comme un titre. Juste pour un exemple pour commencer. La mise en scène serait comme et aussi l'appeler le site de test. Dans le maître
serait le site de production. Et pour l'instant, nous allons prendre le développement JSON comme notre JSON de fin. Donc, nous avons ces différents environnements, mais il va BB, le point normal n point JSON que nous
utiliserions dans tous nos composants dans le reste de notre application. Et donc, par exemple, si nous arrivons au fichier TSX de l'application, je peux importer ce fichier JSON, appelez-le
simplement n. Et l'avantage avec Visual Studio Code et Type Script est
que le script de type saura ce que vous avez sur votre AnyObject. Donc, vous pouvez faire quelque chose comme il sait déjà que le nom du site est une propriété là-bas. Donc, pour utiliser notre environnement de développement localement, nous pouvons l'ajouter à la commande pre start dans package.json. Et c'est une convention de nommage npm, qui signifie qu'avant de lancer la commande start, exécutez tout ce qui est dans la commande restart. Et pour cela, nous voulons simplement, c'est Bash. Nous voulons copier pn dot JSON dans le fichier principal. Et maintenant, si nous allumons npm start, pré start se déclenchera. Il copiera ceci développé en N, que nous avons fait, nous l'avons déjà fait manuellement. Mais nous devrions voir dans le titre, le site local de développement. Alors donnons ça un coup de feu. Super. Donc mon titre est le développement site local.
9. Utiliser les environnements dans un fichier pipeline Bitbucket: Ok, mais nous ne sommes pas là pour écrire des scripts package.json. Nous sommes ici pour en apprendre davantage sur les pipelines de bitbucket. Nous allons donc intégrer ces environnements dans notre pipeline. Puisque nous sommes sur une toute nouvelle ardoise, nous devons créer un nouveau fichier de pipelines de seau. Et tout a commencé comme nous l'avons fait dans l'exemple original. Et ici normalement, vous auriez votre mise en scène et votre maître. Et puis vous auriez vos commandes à l'intérieur. Mais parce que nous utilisons cette configuration spéciale basée sur la leçon, nous avons ces noms de branche. Donc, tout comme nous avons ajouté à la commande pré start, qui est pour nous pour le développement local. Nous voulons faire exactement la même chose, mais avec la mise en scène dans les environnements maîtres respectivement. Donc, nous allons dire copie environnement de mise en scène aussi. Jason. Et même script, juste un fichier différent. Et mettre en scène ce Jason à la source et JSON. Et la même chose ici pour Maître et juste aller copier coller et prendre ce fichier maître. Donc, puisque les variables proviennent de ce fichier de fin, il est important que ce soit la première étape ou l'une des premières étapes. Si tu fais d'autres choses. Avant de faire une construction, nous voulons que nos variables soient définies correctement avant de construire ou de tester ou des choses comme ça. Donc maintenant, nous allons réellement définir la construction d'un artefact étapes. Essentiellement les mêmes concepts qu'avec notre site statique simple. Mais c'est un peu plus complexe parce que nous voulons également expédier nos modules Node ainsi que le dossier Build qui réagissent Create, React app crée. Donc, je vais réellement coller dans les étapes que nous avons définies précédemment dans les refactoriser pour ce projet d'application Create React. Donc, au lieu d'un faux processus de construction, nous allons dire un vrai processus de construction. Et ce script est simplement npm run build. Et nous en avons quelques-uns sont des artefacts ici. Nous aurons notre dossier de construction, qui est par défaut celui de l'application Create React. Et le dossier des modules MPM. Et aussi que nous n'avons pas encore créé, un serveur JS d'index.
10. Refactoriser le serveur ngrok du projet React TypeScript: Et ce serveur JS d'index, je vais en fait emprunter aussi bien à l'exemple de site statique HTML5. Juste parce que je pense que n grok rend très facile d'obtenir votre site sur une URL publique très rapidement et c'est génial pour le prototypage. Donc, je vais créer un index.js ici comme fichier de notre serveur. Et je vais aussi copier cela, copier et coller l'exemple dans. Nous pouvons donc déjà tirer parti de nos environnements que nous avons créés ici. Au lieu de définir un port fixe. C' est quelque chose que nous pourrions également ajouter à notre environnement JSON. Donc, je vais remplacer cela partout par le nème port point. Et bien sûr, nous devons importer cela. Et nous devrions bien sûr ajouter la nième clé. On peut commencer à 5,001 pour le développement et ensuite il suffit de monter. Encore une fois. On va juste garder ce maître est de 5,3$ pour la mise en scène 502. Et nous pouvons même, vous pouvez également ajouter comme un indice. Et ces journaux de console. Cette autre modification avant que nous utilisions le gestionnaire de service directement dans le répertoire de travail. Mais comment nous allons définir notre pipeline, nous allons mettre ce fichier serveur à côté du répertoire de construction qui est créé. Et donc il y a un troisième paramètre ici, qui est un objet options. Et cette option est l'option publique, qui est la construction. Et il y a une autre chose que nous pouvons également ajouter,
encore une fois, en tirant parti de ces fichiers JSON d'environnement. Et c'est ça. Nous avons l'avantage maintenant. Si nous voulions créer plusieurs URL de mou pour chacune de nos branches, par exemple, si vous vouliez acheter pour la mise en scène et que vous vouliez un bot pour master, que vous pourriez mettre dans des canaux séparés. Vous pouvez le faire avec cette configuration d'environnement. Et donc, au lieu de passer la valeur réelle, nous passons la clé de la variable d'environnement deux, le point de processus n. Et nous appelons ceci la clé pour signifier que c'est le nom de la clé. Donc, par exemple, vous auriez pour le développement, ou peut-être vous, vous pouvez même pas en avoir un en développement. Je peux laisser ça vide. Copiez ça aussi. En maître. Vous pouvez l'appeler, Appelons ça Skill Share, classeur
maître. Et puis pour la mise en scène, mise en scène, le bateau web Slack. De cette façon, vous pouvez avoir plusieurs URL ou garder le même nom de clé et simplement garder celui que nous avons déjà créé. Je vais sauver tout ça.
11. Refactoring le pipeline pour le projet React TypeScript: Revenons enfin dans le pipeline. Nous avons donc défini nos artefacts. Nous avons refactorisé index.js pour fonctionner avec les variables d'environnement que nous avons. Et maintenant, nous devons déployer chacun de ces artefacts avec SEP. Et il est important que nous ayons un autre dossier ici. Alors maintenant, je vais appeler ceci, aura un script de type. Je l'appellerai la mise en scène de script de type partage de compétences. Et la construction que nous voulons réellement mettre dans le dossier de construction. Dossier de construction. Dans les modules NPM. Trouvons erreur il n'y a pas modules en direct dans le même nom de dossier. Et le index.js. Nous allons juste aller dans la racine de ce dossier sur le serveur. Et ça devrait le faire. Nous pouvons copier ces quatre étapes et les utiliser aussi pour un maître. Le seul changement ici est que nous aurons un autre dossier appelé un ester. Donc, je veux d'abord sauter sur mon serveur et m'assurer que ces dossiers existent. Donc je vais faire le dossier de mise en scène et aussi le dossier maître. Et aussi à l'intérieur de chaque, j'ai besoin de faire le répertoire de construction et aussi le répertoire des modules de noeud. Ça devrait le faire. Je peux sortir du serveur. Et la dernière étape ici consiste à ajouter une image de nœud. Donc, avant de nous en sortir avec juste l'utilisation de scripts bash, parce que nous avions juste à faire une manipulation de dossiers avec ces fichiers statiques. Mais ici, nous exécutons la reconstruction de NPM dans le cloud. Donc Bitbucket doit savoir, eh bien, quelle version de nœud voulez-vous utiliser ? Sinon, il utilisera sa valeur par défaut. Donc, comme je l'ai dit au début du cours, nous utilisons le nœud 10.19. C' est la directive image dans le fichier YAML de pipelines. Et nous pouvons également ajouter dans le processus de construction sous le nom d'une directive de cache et en spécifiant le noeud. Et cela signifie que si nous avons déjà téléchargé cette image pour Node, et que bitbucket voit cela, alors il utilisera cette image. Il ne se télécharge pas à chaque fois. Cela accélère donc votre processus de construction et vous permet d'économiser des minutes de construction. Donc je vais aussi ajouter ça au maître. Et une étape que j'ai presque oublié dans le processus de construction est d' installer
réellement les modules NPM avec l'installation de npm. Ajoutez donc cela à la fois au staging et à la construction de branche maître. Donc j'ai aussi réalisé que j'écrivais la peur de fin. Cela devrait être le port comme le nème port point, pas n point n. Alors laissez-moi corriger cela rapidement. Et j'ai également changé l'environnement Web hook Key à la mise en scène pour le développement que juste pour que nous puissions exécuter ceci localement pour illustrer ce qu'il va faire sur le serveur. Nous ne pouvons pas oublier d'installer les dépendances dont nous avons besoin ici pour exécuter notre serveur. Donc, nous allons le faire maintenant. Sauvegardez. Nous devons donc servir le gestionnaire. Http est intégré, donc nous n'avons pas besoin de cela. Et le noeud récupère. Et ceux-ci seront sauvegardés dans le package.json. Ainsi, BitBucket verra le même package.json et les installera de la même manière. Et comme un test, nous pouvons exécuter le serveur dès maintenant. Super, donc nous obtenons les journaux de la console. Et nous devrions voir les mêmes messages de notre côté. Oui. Ce B32 et Grok. Ça devrait être le même que oui, exactement, exactement. Parce que notre serveur nécessite ce fichier d'environnement, nous devons également le transférer. Donc, nous pouvons essentiellement copier ceci. Juste un autre sep. On peut juste le définir comme un artefact. Si nous voulons maintenir la même structure. Et on peut le faire comme ça. Et la même chose. Encore une fois, pour le maître. Ce support est différent. Donc, bien sûr, quand nous pousserons à moins de cinq développer, rien ne se passera avec notre construction parce que nous avons seulement défini un pipeline pour la branche intermédiaire et maître. Alors fusionnons ça maintenant et voyons ce qui se passe. Nous allons passer à la scène en
scène
et fusionner, développer et pousser cela. Donc, notre processus de construction a fonctionné jusqu'à présent. L' étape d'installation et de construction prend environ trois minutes. Cela sera un peu plus rapide cependant. Comme vous pouvez le voir, ce Bitbucket est en train d'assembler un nouvel argent pour le nœud comme nous l'avons spécifié. Mais ici, la commande scp pour les modules
Node est en cours d'exécution depuis quelques minutes et c'est trop long. Donc, dans la leçon suivante, nous allons apprendre comment nous pouvons accélérer la copie tous ces fichiers dans le processus SEP à l'aide d'une archive.
12. Utiliser des tarballs pour transférer les modules de nobles en plus rapidement: Donc, ce que nous pouvons faire pour améliorer la vitesse SEP est en fait créer une boule de goudron avant de la transférer. Donc je vais arrêter ce pipeline. Et nous allons retourner à notre dossier de pipeline. Je vais m'assurer qu'on est sur la bonne branche. Et nous allons faire ici est après la commande de construction, créer une archive
du même nom à partir des modules Node. Et les artefacts. Maintenant, nous n'avons pas besoin de modules Node, mais plutôt de la boule de goudron créée. Et nous allons aussi renommer cela. Au lieu d'un dossier. On a juste besoin de frapper ce répertoire avec ce fichier. Et nous ferons la même chose pour la branche maîtresse. Ensuite, pour être complet, nous devons ajouter une étape supplémentaire pour décompresser cette boule de goudron côté serveur. Et nous sommes encore une fois, vous allez utiliser une commande SSH pour pouvoir exécuter des commandes sur le serveur. On va copier ça au maître. Il suffit de changer le nom du dossier. Cela devrait donc accélérer considérablement le processus de construction et sera également en mesure de voir combien ce processus de mise en cache enregistre également. Donc, nous pouvons voir avec ce nouveau processus de construction avec le tarball, tout d'
abord, il finit le plus important. Mais le noeud modules tarball se déploie beaucoup, beaucoup plus vite. Il s'agissait donc d'une période indéterminée. Je ne sais pas. J' ai attendu environ quatre ou cinq minutes et je l'ai arrêté, mais maintenant c'est seulement dix secondes. Et en outre, nous voyons que le processus de mise en cache
interne des compartiments de bits réduit ce temps d'installation initial. Et le nœud ImageDownloader, qui était d'environ trois minutes à seulement une minute. C' est donc aussi trois fois plus rapide. Maintenant, en gros, restez ce temps. Cela peut être un peu plus long si vous ajoutez quelques paquets au nœud. Et puis ce serait aussi le temps très long si vous changez ou mettez à niveau votre image de nœud qu'il aurait à remonter la nouvelle image. Mais sinon cela a l'air bien. Qu' est-ce qui saute sur le serveur pour s'assurer que tout semble bien. Super, donc on a tout ici. Nous pourrions ajouter une étape supplémentaire pour enlever la boule de goudron qui est transférée. Mais je vous laisse ça pour l'ajouter.
13. Définir le mode « observer » sur serveur: Tout comme dans l'exemple de site statique, nous avons créé un déploiement continu réussi, mais nous ne servons toujours rien. Donc, pour nous assurer que nous avons déployé tous les fichiers dont nous avons besoin, une bonne première vérification est juste d'exécuter simplement l'index de noeud j s ici sur le serveur. Et nous nous attendons à les amener dans les journaux de console et à les voir
également en mou avec les variables de mise en attente. Puisque nous sommes dans le dossier de transit, c'est là
que notre pipeline de transit déploie deux. Et nous obtenons ces journaux de console ainsi que les journaux de mou identiques. Et nous pouvons même vérifier ici pour nous assurer que les variables sont correctes. Et oui, il dit Bonjour MyTitle site de test de mise en scène. Donc ça a l'air génial. Donc, bien sûr, nous ne pouvons pas venir ici manuellement et émettre le nœud index.js à chaque fois. Et nous avons vu à partir du site statique, même si c'était un bon exemple de la façon d'utiliser une commande SSH. C' était aussi un idéal pour toujours démarrer le serveur de cette façon. Et la façon de le faire serait avec l'index pour toujours regarder JS. Mais le problème est là. Toujours serait regarder trop de fichiers. Parce que nous avons les modules de noeud ici. Vraiment tout ce que nous voulons regarder est source et construire. Il y a donc une étape supplémentaire que nous devons faire. Et c'est de créer un fichier pour toujours ignorer, ce qui est tout comme le fichier gitignore. Et donc ici, nous voulons ignorer les modules de noeud. Et bien sûr, nous devons ajouter cela à notre pipeline. Et en fait, dans le script de construction, nous avons juste besoin de le définir comme un artefact. Et puis nous pouvons utiliser SEP. Super. J' ai eu la même chose pour le maître. Encore une fois, assurez-vous que c'est le bon dossier. Et l'ajouter comme artefact. Très bien, donc le déploiement de notre fichier pour toujours ignorer a fonctionné correctement. Et maintenant, nous pouvons démarrer pour toujours sans qu'il ait problèmes puisque nous avons ignoré le dossier des modules de nœud volumineux. Donc, la commande est pour toujours tiret W, Démarrer index.js. Et bien sûr, cela commence en arrière-plan, mais nous recevons toujours des messages. C' est notre mise en scène en direct. Et juste pour simuler un changement, nous pouvons simplement toucher un nouveau fichier. Appelons ça un nouveau fichier, TXT. Et dès que je le fais, pour toujours, remarque ce changement et le site redémarre. Donc c'est génial. Chaque fois que nous SCP fichiers ici au serveur, pour toujours redémarrer et refléterait ces changements dans le site.
14. Le grand avantage des tests des pipelines dans la composition, la fusions à maitris.: Alors maintenant, il est enfin temps que tout notre travail acharné sur ce processus de construction porte ses fruits. Et c'est le scénario où vous voulez fusionner au maître. Donc, vous pouvez penser à tout le travail et les changements que nous avons fait ici sur la mise en scène. Une demi-douzaine de solaire s'engage comme test. Et nous nous sommes assurés que tout fonctionne et maintenant sont très satisfaits de la façon dont le site fonctionne. Parce que nous avons suivi le long dans les branches staging et master avec les mêmes étapes exactes. Sauf pour nos dossiers et environnements personnalisés. Nous nous attendons à ce que le processus de construction fonctionne exactement de la même manière. Donc, tout ce que nous avons à faire pour migrer les modifications approuvées et complètes de staging est de fusionner le staging vers master et de le pousser vers notre télécommande. Et puis BitBucket fera le reste pour nous. Alors donnons-lui un coup de feu. Donc, ici maintenant sur le serveur, pas dans le dossier intermédiaire, mais dans le dossier maître. Et il semble que notre script de construction a fonctionné exactement comme il aurait dû l'avoir. Et nous pouvons même effectuer des IA. Et nous devrions voir le maître exactement les variables maîtresses. Et comme un test initial comme nous l'avons fait avec la mise en scène, nous pouvons exécuter le nœud index.js. Super. La messagerie d'indicateur fonctionne. Console consigne le port correct et saisit. Et maintenant, je peux passer la même commande exacte que nous l'avons fait dans la mise en scène. Super. Et pour obtenir cet aperçu en direct, nous avons le site principal et la dernière mise en scène est ici. C' est le site de transit. Super. Nous avons donc deux applications web côte à côte. Ils sont exposés avec n grok. Le staging est en cours d'exécution au port 5,002 sur notre serveur et la branche principale est en cours d'exécution à 5,003.
15. BONUS : Configuration de NGINX et en Proxy et variables d'environnement PUBLIC React: Ainsi, dans la dernière leçon, nous avons construit un déploiement
continu et une intégration continue pour deux branches l'une à côté de l'autre, une branche intermédiaire et une branche maître. Et pour cette tâche, nous utilisions toujours et grok comme un outil simple pour
proxy rapidement le site et l'obtenir à une URL publique sur Internet. Mais comme je l'ai mentionné quelques cours en arrière, je montrerais comment je le fais en utilisant un outil comme moteur X. Et donc j'ai déjà mon fichier de configuration d'ingénieurs ouvert ici pour Chris via DOT IN, qui est mon blog. Donc, la racine est mon blog ici. Mais si vous frappez ces sous-domaines, vous obtenez ce qui est réellement en arrière-plan, une application de nœud totalement différente. Et j'ai aussi mon portefeuille, qui est une autre application. Nous pouvons donc faire de même pour les deux applications que nous venons de créer. Et je vais les mettre fondamentalement comme le même chemin que nous avons utilisé. Donc nous avons cette mise en scène et nous passons 25 002 par proxy. Et nous avons aussi le maître. Et c'est au port 5 003. Nous formons juste cette petite faute de frappe ici. Et nous pouvons redémarrer et la génétique. Il y a une petite étape que j'ai oublié de configurer quand il s'agit de Create React app. Et nous pouvons voir quand nous lançons NPM build, ils vous donnent une sorte d'avertissement. Le projet a été construit en supposant qu'il est hébergé à la racine. Vous pouvez contrôler cela avec le champ de page d'accueil de votre package.json. Et bien sûr, avec la configuration de nos nouveaux ingénieurs, nous sommes au dossier intermédiaire Type Script de partage de compétences
et au dossier maître Type Script de partage de compétences, pas à la racine. Et nous ne voulons pas non plus définir une page d'accueil statique dans le package.json parce que nous l'
utilisons pour brancher le système localement dans le dépôt GitHub de l'application Create React. J' ai été en mesure de trouver un moyen de définir cette variable d'environnement d'URL publique, qui est parfait pour notre cas d'utilisation. Donc, nous pouvons ajouter cela juste avant la commande run build. Nous allons définir la variable d'environnement. Et puis notre configuration devrait bien fonctionner avec notre proxy moteur X. Nous utilisons donc simplement la syntaxe bash standard, exporter l'URL publique. Et c'est HTTPS est enraciné dans la mise en scène de script de type partage de compétences. C' est pour la branche de mise en scène ou la branche principale. Maître. Mais bien sûr, cela signifie que nous devrions supprimer ce code n grok. Donc, nous pouvons réellement simplement supprimer la fonction complètement. Et nous savons que l'URL sera disponible à froude, AT IN slash, Skill Share, type, script, staging et master. Donc, nous allons juste pousser ce code à travers la chaîne typique en commençant par dev Ben à la mise en scène puis à la maîtrise, obtiendra toujours notre message mou juste ici. Et ça devrait aller. Donc on va pousser ça et voir comment ça se passe. Donc, si nous creusons dans le dernier processus de construction, nous passons à l'étape de construction. Nous pouvons voir dans la commande run build que Create React app comprend ce que nous faisons ici. Et ils disent que c'est supposé que c'est hébergé ici à l'URL que nous avons fournie. Et en termes de configuration du serveur, cela fonctionne parfaitement. Et nous pouvons voir que la variable d'environnement pour le titre du site est également remplie dynamiquement et nous attendons la même chose pour le site intermédiaire. Oui, parfait. est ainsi que vous servez pour créer des applications React sur des branches distinctes via le moteur X, proxies.
16. BONUS : utiliser Docker comme alternative à un serveur Linux: J' ai écrit dans la description du cours que si vous n'avez aucune sorte de serveur Linux distant ou basé sur le cloud, vous seriez en mesure d'utiliser une instance Docker Linux locale à la place comme un substitut. Donc, cette leçon décrit et montre comment vous pouvez configurer cela. Donc, après avoir installé Docker sur votre système, vous pouvez utiliser ce fichier Docker pour créer une instance Ubuntu avec toutes les exigences dont vous aurez besoin. Donc je vais, je vais poster ceci sur les notes de leçon. Il inclut des choses comme curl, get, et il installe la version de nœud dont nous avons besoin pour ce cours. Donc, une fois que vous obtenez ce fichier, vous pouvez le construire. Et vous noterez que je suis déjà directement dans ce dossier ou ce fichier Docker est. Donc, nous pouvons le construire avec cette commande. Et maintenant, nous pouvons exécuter cette image avec Doctor Run interactif. Et nous allons le lier à un port. Donc, je viens de choisir 777 arbitrairement parce que c'est plus facile à retenir et je ne pense pas qu'il devrait entrer en conflit avec d'autres ports. Et nous devons lier cela à 22 du côté plus sombre, qui est le port par défaut pour SSH. Et nous référons à notre ID d'image copiée. Et nous y sommes. Donc, maintenant que nous sommes sur notre instance Ubuntu, nous devons nous assurer que les services SSH sont en place. Nous émettrons donc cette commande. Ça a l'air OK. Et nous devrions également définir un mot de passe pour cet utilisateur. Et c'est ce que le passé WD commande. Donc, si vous envisagez d'utiliser ceci pour tout le cours, et que vous y accéderez à partir du public, par exemple, à partir de Bitbucket, à partir d'une source externe, vous devriez définir un mot de passe très fort ici, puisque je ne l'utilise que pour un exemple en ce moment, je vais définir un mot de passe assez simple. Et puis vous devez le confirmer. Et les mots de passe mis à jour avec succès. Il est donc important de garder cette instance de terminal en cours d'exécution. Ceci est notre image Ubuntu qui est en cours d'exécution et Docker. On va ouvrir un terminal séparé. Et nous pouvons vérifier si nous pouvons nous connecter localement via SSH. Donc, ce sera l'utilisateur root. Juste que notre propre localhost, un à sept, 0.0.0, 0.1. Et le port arbitraire que nous avons spécifié, qui est 7777. Et indiquez le mot de passe que vous avez défini avec la commande password. Et on dirait qu'on y est. Maintenant, pour avoir un accès source externe, cette image comme les pipelines bitbucket devra ouvrir port 777 pour accepter les connexions SSH du monde entier. Donc, pour ce faire, nous devons d'abord connaître cette machine locale. Dans mon cas, mon ordinateur portable, ce que c'est l'adresse IP est sur mon propre réseau Wi-Fi. Et pour que nous puissions sortir de SSH ici. Et pour obtenir cela, vous pouvez émettre IF Config et grep pour ion à 19 deux et cela devrait être en mesure de trouver votre adresse. Si rien n'arrive ici, vous devrez peut-être émettre la configuration IF complète et regarder à travers l'ensemble de la liste là-bas. Mais nous voyons que l'adresse locale de cet ordinateur portable sur mon réseau est la suivante. Donc on peut copier ça maintenant. Et nous allons créer une règle de transfert de port sur notre routeur. Donc, généralement, vous pouvez accéder à l'interface graphique de votre routeur Wi-Fi avec juste mettre dans n'importe quel navigateur, 19 2.168.1. Et vous devrez peut-être examiner les spécifications techniques
de votre routeur pour obtenir les informations d'identification pour vous connecter. Mais une fois que vous êtes dans, presque tous les routeurs ont cette disposition générale. Et ce que vous voulez trouver est soit en transfert avancé ou directement. Cela dépend du fabricant. Typiquement, vous devez aller à un onglet avancé, puis trouver le transfert. Et vous pouvez configurer ces règles. Nous allons donc créer une règle de transfert IP v4. Et donc ignorer l'adder de règle connue. Et nous allons juste descendre ici. Donc, nous savons quelles sont nos adresses IP locales, nous venons de le copier. Et nous voulons que ce début et fin local soit le port que nous avons spécifié. L' adresse IP externe. Dans mon cas, pour ce routeur, vous pouvez le laisser comme ceci 0, tout cela zéros. Certains routeurs, vous devez le laisser vide. Encore une fois, vous devez lire dans la documentation de votre routeur ce qu'est la règle. Mais juste pour nous en souvenir pour notre propre axe, nous allons définir le port externe sur tous les sept aussi. Et vous pouvez également fournir une description. Je vais juste dire SSH à Docker et nous voulons l'activer. Et cliquez sur Appliquer. Super, nous voyons notre entrée ici. Donc, cela semble bon d'aller maintenant pour pouvoir
accéder à cela à partir d'un site externe ou du public, vous avez besoin de votre adresse IP publique, pas cette adresse locale, mais plutôt celle que votre fournisseur de services Internet voit ou que vous êtes. Le routeur affiche Internet. La façon la plus simple de le faire est simplement de sauter sur Google et de rechercher ce que mes adresses IP. Donc, pour un exemple simple, disons que votre adresse IP publique est 1.5.2, 1.5.2, 1.5.2, 1.5.2, 1.5.2. La façon dont vous pouvez tester si votre transfert de port a fonctionné est presque la même commande que nous avons émise pour le test local. Donc c'est la racine SSH. Et si nous supposons que c'est votre adresse IP publique, toujours le port 7777. Ça devrait marcher. Donc, ce qui se passe réellement en arrière-plan c'est que vous frappez votre routeur à cette adresse. Le routeur recherche la règle. Il est dit, ah, il demande au 7777 et puis le transmet à votre machine locale. Dans mon cas, cette machine et Docker transmettent ensuite le port 77772 22 comme nous l'avons configuré à notre image. Et vous serez en mesure d'accéder à votre SSH, ou vous serez en mesure d'accéder à l'image via SSH. Donc, si cette commande fonctionne et vous pouvez accéder à votre image à partir d'un endroit public ou externe sur Internet. Vous êtes tous prêts et vous pouvez utiliser l'image Docker pour ce cours. Il est important que chaque fois que vous exécutez quelque chose ou que vous attendiez un bitbucket, par
exemple, à vous connecter, que cela soit toujours en cours d'exécution. Et lorsque vous avez terminé avec cette image, vous pouvez simplement mettre fin à son exécution avec la commande exit et vous déconnecter du même terminal où vous avez commencé, il sera automatiquement et son exécution. Et nous pouvons vérifier cela en émettant docker ps. Et on voit qu'il n'y a pas d'images en cours d'exécution. Gardez à l'esprit que si vous allez utiliser cette méthode Docker, vous devrez également mettre à jour la valeur du serveur dans vos variables de référentiel. Ainsi, l'utilisateur peut rester aussi root que nous l'avons dit dans le cours. Mais le serveur devra être cette adresse IP publique que vous avez recherchée, par
exemple, sur Google. Et puis vos règles de transfert de port devraient faire tout le reste du travail pour vous. Et vous devriez pouvoir accéder à votre instance Linux locale dans Docker, comme vous le feriez pour n'importe quel autre type de boîte Linux distante. Vous devrez également refaire les étapes SSH, ce que nous avons fait dans la leçon 4 avec la clé publique et privée. Pour que votre instance Ubuntu locale fasse confiance à l'accès SSH à partir de Bitbucket. Donc, dans cette leçon bonus, nous avons appris comment nous pouvons rapidement configurer une instance Ubuntu en cours d'exécution locale en utilisant Docker. Nous avons ouvert un port de notre choix. Dans ce cas, dans cet exemple, il était 7777 à Internet en créant une règle de transfert de port sur notre routeur. Transfert du port externe 777 vers le port local 777 sur notre machine locale.