Hébergement de sites Web statiques sur un pipeline AWS + CI/CD - DevOps

1. Introduction: Bonjour, c'est Valentine. Aujourd'hui, je voulais passer en revue le processus d'hébergement d'un site Web avec AWS. Je viens d'apporter un nouveau nom de domaine. Et je vais vous montrer étape par étape comment héberger un simple site Web HTML et JavaScript avec AWS S3, ou suivre le processus d'hébergement d'un domaine réel. Et ensemble, nous allons configurer un compartiment AWS S3, charger certains fichiers et tout configurer pour qu'il fonctionne correctement. Dans la deuxième partie du tutoriel, je vais vous montrer comment automatiser l'ensemble du processus avec GitLab CI. Et ensemble, nous allons construire un pipeline CICD simple. Croyez-moi, c'est plus facile que vous ne le pensez et l'automatisation est si importante. Aujourd'hui. Nous travaillerons à partir d'un référentiel Git et toutes les modifications que nous effectuons seront automatiquement déployées sur le site Web. Mais tout d'abord, veillons à ce que nous soyons sur la même longueur d'onde dès le début de ce tutoriel, supposant que vous disposez d'un compte AWS hébergeant vos fichiers avec AWS. S3 ne fonctionne pas si votre site Web est plus complexe et nécessite une base de données dans laquelle vous devez exécuter un langage de programmation tel que PHP, SPX ou quoi que ce soit similaire. Cela ne fonctionnera pas non plus si vous essayez d'héberger un site Web WordPress. Cela fonctionnera très bien pour le projet Angular ou React. En hébergeant un site Web sur AWS, S3 ne prend pas en charge HTTPS. Si vous en avez besoin, vous devez configurer AWS Cloudfront en plus de ce que je vous montre ici. Cela étant dit, passons directement dans le tutoriel. 2. Créer un compte AWS: Amazon Web Services, ou simplement AWS, est une plateforme cloud offrant plus de 170 services disponibles dans les centres de données du monde entier. Ces services incluent les serveurs virtuels, les bases de données gérées, le stockage de fichiers, diffusion de contenu et bien d'autres. Si vous ne possédez pas déjà de compte AWS, il est très facile d'en créer 10. Saisissez vos informations personnelles et cliquez sur Continuer. Si vous utilisez ce compte à des fins professionnelles, comme au sein votre organisation, ou si vous prévoyez d'effectuer des déploiements ou d'utiliser AWS au sein de votre organisation. Professionnel. Sinon, si vous apprenez simplement AWS et que vous l'expérimentez, il est tout à fait normal de commencer par un compte personnel. Et nous est un service payant. Et même si, au début, il existe un niveau gratuit qui a des limites et qu'il est idéal pour apprendre AWS et expérimenter cette carte théorique, une carte de crédit ou une carte de débit de votre part juste au cas où vous dépassez la limite gratuite. Donc oui, AWS est finalement une entreprise, donc ils essaient de gagner de l'argent. C'est pourquoi vous devez entrer les informations de votre carte de crédit ici. Sinon, vous ne pourrez pas utiliser AWS. Et je vais ajouter ces informations de carte de crédit. De plus, je dois également vérifier mon numéro de téléphone. Maintenant, mon identité a été vérifiée et je peux commencer à utiliser mon compte AWS. Aws dispose également d'un système de support et vous pouvez sélectionner le plan de support. Personnellement, je pense que leur soutien est très, très bon. Mais vous n'aurez besoin d'assistance de leur part que si vous déployez AWS au sein de votre organisation. Par conséquent, à des fins d'apprentissage et de démarrage, vous n'avez besoin d'aucun soutien de leur part. Vous bénéficierez de tout le soutien de mon côté en ce qui concerne le contenu de ce cours. Nous allons donc simplement cliquer sur gratuit et continuer avec un forfait de base gratuit. Nous avons maintenant un compte AWS vérifié. Il dispose d'un mode de paiement. Et ce que nous devons faire ensuite, c'est de vous connecter à la console, car à partir de la console, nous pouvons accéder à tous les services d'AWS. Vous pensez que la console de gestion AWS signifie que vous avez tout configuré correctement et que vous pouvez continuer le reste du cours et commencer à utiliser AWS immédiatement. Aws est distribué dans plusieurs centres de données. Et vous avez la possibilité de sélectionner le centre de données que vous souhaitez utiliser ici à droite, en haut du menu. Actuellement, dans mon cas, j'ai l'Ohio Est des États-Unis. En règle générale, les centres de données américains aux États-Unis ont un coût inférieur à celui d'ailleurs dans le monde. Mais vous voudrez peut-être vérifier pour votre raison spécifique si vous souhaitez en avoir dans vos régions spécifiques. Par exemple, pour des raisons de sécurité des données, de nombreuses entreprises européennes ont préféré que leurs centres de données et leurs données provenant d'AWS soient physiquement situés en Europe. C'est pourquoi AWS propose ce service, mais il est beaucoup plus cher que les centres de données situés aux États-Unis. 3. Créer le panier AWS S3: Pourquoi je suis ici chez Chip.com. C'est ce que j'utilise pour enregistrer et gérer des domaines. Généralement, ils ont de très, très bons prix et l'interface pour gérer les domaines, c'est correct. C'est pourquoi c'est ce que j'utilise et vous n'avez pas besoin de les utiliser. Ce tutoriel fonctionne avec n'importe quel domaine quel que soit l'endroit où vous vous êtes inscrit auprès de GoDaddy, des domaines Google, quels que soient les principes, absolument l'équipe. Donc, le domaine que j'essaie d'utiliser aujourd'hui est celui-ci. Apprenez le lien à points DevOps. Ouvrez un nouvel onglet et affichez le contenu de ce site Web. Vous verrez qu'il est actuellement hébergé ici sur cette page de destination du navire nommé. Rien de spécial là-dedans. Alors, que dois-je faire ? J'essaie ensuite de créer un compartiment AWS S3 pour ce nom de domaine. Je suis ici dans ma console de gestion AWS. Et le service que j'essaie d'utiliser est S3. Je vais donc regarder ici sous le stockage et vous verrez S3. Et je vais cliquer ici sur le bouton Créer un compartiment. Nous voulons maintenant nous assurer que le nom du compartiment est approprié. Donc, tapez ici, www dot a appris DevOps, ce lien. C'est donc le nom de domaine que j'essaie d'enregistrer. Sélectionnez une région qui convient le mieux à votre cas et assurez-vous de vous souvenir de cette région, en particulier de cette partie. Donc le nom technique de la région. Et après cela, vous pouvez simplement écrire ici, parcourir différents paramètres, mais simplement créer un compartiment à partir de la liste des compartiments disponibles, vous devriez pouvoir cliquer dessus. Et bien sûr, vous verrez qu'il est vide. Maintenant, juste une remarque générale, AWS a beaucoup changé. L'interface de S3 de cette partie de gestion ici. Si vous regardez ce tutoriel un peu plus tard, il peut sembler un peu différent, mais les principes doivent être automatiquement les mêmes. Juste une tête dans cette direction. Comme vous pouvez le constater normalement à ce stade, nous n'avons pas de fichiers ici. Donc ce que je vais faire ici, c'est d'abord d'aller de l'avant et de télécharger le fichier simple. Je vais cliquer ici sur Ajouter des fichiers. Et je vais commencer par un simple fichier HTML qui contient juste quelque chose comme Hello World. Il suffit donc de tester les choses et de s'assurer que tout fonctionne correctement. Va télécharger, devrait fonctionner dans une seconde. De plus, ce que nous allons faire, c'est regarder ici les propriétés. Et quelque part ici, vous devriez voir un hébergement statique de site Web. Je vais donc cliquer ici sur Modifier car maintenant il est désactivé. Je vais donc l'activer, préciser quel est le document. Quel est donc le document d'index ? Dans mon cas, le document d'index est index.html. Et je vais spécifier exactement la même page également pour le document d'erreur est également utile si vous n'avez pas de document d'erreur et que vous essayez héberger un site Web angulaire ou de réagir. Le document d'index doit être identique au document flèche. Nous avons tout configuré ici. C'est exactement le nom que nous avons. Et je cliquerai ici pour enregistrer les modifications. En plus d'accéder aux autorisations, vous verrez ici que l'accès public est bloqué pour le moment. Nous pouvons donc tout débloquer, enregistrer les modifications, confirmer. Si vous essayez d'obtenir le lien vers cela ou que nous devons le faire, accédez aux propriétés. Les propriétés sont donc ici. Et dans une section avec hébergement statique de site Web, il s'agit de l'adresse temporaire que nous aurons pour le site Web. Cliquons dessus et voyons notre site Web. Oh, ça n'a pas l'air bien. Que s'est-il passé ? Eh bien, ce qui s'est passé, c'est que nous devons encore trouver quelques autorisations. Il ne suffit donc pas de simplement rendre cet accès public ici. Mais en outre, quand spécifier une stratégie. Afin de spécifier cette stratégie qui sera écrite en JSON. Cliquez ici sur la stratégie de compartiment sur Modifier. Et nous allons jeter un coup d'œil à quelques exemples de politiques. La politique que nous souhaitons adapter est quelque chose comme cette autorisation de démarrage en lecture seule à un utilisateur anonyme car nous ne savons pas qui visite ou qui essaie d'obtenir ces informations. Nous allons donc simplement copier cette autorisation à partir d'ici. Retournez un peu à la console de gestion. Je vais le coller ici. À l'origine, ce qui nous intéresse, c'est d'obtenir ce nom de ressource, n'est-ce pas ? Vous verrez donc ici qu'AWS nous simplifie un peu la vie. Donc, en fournissant ici le nom exact de la ressource du compartiment. Nous pouvons donc simplement copier cela et nous assurer que nous ne remplaçons pas tout. C'est comme ça que ça devrait ressembler. Vous devez donc l'adapter pratiquement à votre propre nom de domaine à ce stade. Nous allons donc sauvegarder les modifications. Et vous verrez ici maintenant que l'accès est en rouge, c'est juste essayer de vous avertir que, au fait, tout ce que vous avez dans ce compartiment est public. Et en fait, je ne recommande pas de stocker dans ce compartiment quelque chose qui n'est pas destiné à être public. Soyons donc très conscients de cela. Si vous devez stocker d'autres fichiers, n'utilisez pas le site Web, n'utilisez pas le compartiment de ce site Web pour stocker autre chose. Revisitons le site web et vous verrez ici, mon nouveau site web. Cela semble fonctionner et c'est absolument génial. 4. Modification des enregistrements de noms de domaine (enregistrements DNS): Maintenant, ce n'est pas tout ce dont nous avons besoin, car vous ne voulez pas donner à vos clients ou à quelqu'un d'autre et une adresse qui ressemble à ceci. En fait, vous avez acheté votre propre nom de domaine et nous essayons de l'héberger. Alors maintenant, copions ça. Les étapes suivantes seront différentes selon la façon dont vous gérez exactement vos enregistrements de domaine. Je retourne donc sur Nim Trip.com et je vais cliquer ici pour gérer ce domaine. Ce qui nous intéresse, c'est la gestion du DNS. Il y a donc une entrée DNS que nous voulons modifier. Et nous allons essayer d'ajouter un enregistrement d'alias ou un enregistrement CNAME pour ce domaine. Je vais donc simplement supprimer tout ce qui est déjà ici parce que cela ne nous intéresse pas. Et ajoutez ici un nouveau disque. Je vais appeler ça un enregistrement d'alias. Cela sera valide pour www et la cible sera celle-ci. Je vais donc m'assurer que je n'ai rien de tel que HTTP. Nous devrions commencer par www, nous devrions finir en .com. Et bien sûr, en apportant ce changement, il faut un peu avant que vous puissiez voir votre site Web mis à jour. Mon conseil est de vérifier dans cinq à dix minutes pour voir si cela change un mot. Mais dans le pire des cas, il peut même s'écouler jusqu'à 24 heures avant que ce changement se propage. Soyez un peu patient. Mais idéalement, vous devriez voir quelque chose en quelques minutes après quelques tentatives de rafraîchissement. Et parfois, cela vaut même la peine d'essayer votre navigateur. Vous devriez être en mesure de voir maintenant que votre nouveau site Web est disponible. Cette page est donc diffusée à partir d'AWS S3. 5. Faire fonctionner le domaine sans www: Examinons donc ce qui suit maintenant. Vous verrez que ce nom de domaine comporte www devant lui. Il est maintenant possible que dans votre cas, si vous essayez de visiter un domaine tel quel, cela ne fonctionne pas. Donc, si vous essayez sans le www, ce cas est automatiquement ajouté. Une page d'erreur peut s'afficher. Vous pouvez obtenir une page d'erreur d'AWS indiquant qu'il ne fait rien de configuré avec ce nom de domaine sans le www. Si c'est le cas, permettez-moi de vous montrer ce que vous devez faire. Revenons donc à la console S3, et je vais simplement aller de l'avant ici, créer un nouveau compartiment. Ce nom de compartiment sera désormais le nom de domaine exact, mais cette fois-ci sans le www devant lui. Et je vais simplement passer en revue les valeurs par défaut telles qu'elles sont. Je vais créer un seau. Maintenant, la différence avec ce compartiment est qu'il ne contiendra aucun fichier, mais nous voulons toujours utiliser AWS S3 pour l'hébergement statique de sites Web. Nous allons donc modifier ici les paramètres. Ensuite, je l'autorise. Mais cette fois, nous allons rediriger les requêtes vers un autre compartiment ou vers un autre domaine. Dans ce cas, nous voulons activer l'hébergement statique et rediriger la demande. Mais le nom d'hôte que nous allons entrer ici est le domaine avec www, car vous savez déjà que cela fonctionne. Donc, dans mon cas, ce sera www dot learn DevOps dot link. Et le protocole que nous allons choisir est HTTP. Comme vous vous en souvenez, AWS S3 ne prend pas en charge HTTPS sur EC2, une configuration supplémentaire. Je vais donc sauvegarder les changements ici. Et nous devrions pouvoir obtenir un lien vers ce nouveau compartiment que nous avons créé. Et vous verrez maintenant qu'il redirige vers le domaine avec www, mon navigateur. Ce type de détails est automatiquement masqué. Donc, si vous cliquez dessus, vous verrez ici qu'il va toujours à www. Maintenant, tout de même, cela ne fonctionnera pas automatiquement car vous avez toujours besoin d'une entrée. En revenant ici aux entrées DNS avancées, nous allons ajouter une entrée supplémentaire. Ce sera encore un alias et utilisera ici AT. Et la cible sera l'adresse à nouveau supprimant HTTP avant cela. Vous verrez donc que la première entrée est avec www dot learn, DevOps, etc. Et la seconde, c'est que nous doutons du point W, W. Comme je l'ai dit, s'il fonctionne automatiquement, vous devez également effectuer cette étape supplémentaire. Et ensuite, il reconnaîtra ce qu'il faut faire dans chaque situation. Ils sont donc pratiquement deux domaines différents, mais il existe différents points, façons de lire ou d'écrire de l'un à l'autre. 6. Activer des journaux d'accès: De plus, je voulais mettre en place quelque chose de très important et c'est aussi la journalisation. Donc, à moins que vous n'ayez une politique de non-journalisation, je vous recommande d'avoir des journaux pour vos domaines. C'est pourquoi nous allons créer un nouveau compartiment. Je vais appeler le compartiment WW, mon nom de domaine, puis ajouter simplement des journaux de tiret. Laissez les paramètres tels quels et oubliez-les pratiquement une seconde. Je vais revenir à mon compartiment contenant le site Web réel, revoir les autorisations. Et quelque part dans ces autorisations, vous devriez voir quelque chose comme la journalisation de l'accès au serveur. Il commencera donc pratiquement à écrire toutes les demandes de verrouillage, tout accès à votre compartiment. Et c'est généralement une bonne pratique d'avoir des journaux au cas où quelque chose sache exactement ce qui se passe avec votre hébergement. Je vais donc aller de l'avant et permettre cela. Et ce que nous pouvons faire ici, c'est spécifier notre compartiment cible. Notre seau cible sera donc le seau avec des bûches. Je vais choisir simplement celui-ci. Il s'agit du nom du compartiment, et nous pouvons simplement spécifier un préfixe tel que les journaux ou l'accès et simplement enregistrer les modifications. Que va-t-il se passer ? Et cela prend généralement un certain temps. Vous allez à l'intérieur de ce compartiment, vous devriez pouvoir voir au bout d'un certain temps certains fichiers d'accès y étant enregistrés. Oubliez ça maintenant et nous reviendrons plus tard pour voir si cela a fonctionné correctement. L'idée principale est que je vous recommande vivement de l'activer. 7. Configuration de projet sur GitLab: Maintenant que mon site Web fonctionne à la fois avec et sans www et a réussi à tout voir. Et je suis très heureux que tout fonctionne correctement. Je veux passer à la deuxième partie et c'est automatisé. Ce que j'ai ici, c'est essentiellement un projet qui contient des fichiers HTML et JavaScript. Il s'agit d'un projet Gatsby qui utilise du JavaScript pour créer dynamiquement certaines pages. Mais en fin de compte, j'aurai ici un dossier public qui contient toutes les pages HTML et JavaScript nécessaires. Parce qu'il s'agit d'un processus de construction. Je veux automatiser cela. Je ne veux pas passer de l'interface de ligne de commande pour pouvoir tout construire , puis aller sur le site Web, vers le serveur, puis aller AWS pour faire glisser et déposer manuellement des fichiers et des choses comme ça. Ce que nous allons faire, c'est que nous allons utiliser GitLab CI pour automatiser l'ensemble de ce processus de génération. Et je vais vous expliquer étape par étape ce que je veux dire par là. La première étape consiste maintenant à se rendre sur GitHub.com et à créer un compte. Lorsque vous êtes dans votre compte, vous devriez pouvoir voir quelque chose comme un nouveau projet. Et nous allons créer un projet vide. Je vais donc nommer mon projet exactement comme nom de domaine. Et bien sûr, je vais supprimer tout ce qui ressemble à HTTP et des choses comme ça. Donc www et mon nom de domaine. Et je vais laisser ça privé. Et je ne vais pas initialiser avec un Lisez-moi parce que j'ai déjà un dépôt Git. Maintenant, c'est le référentiel qui a été créé pour mon code. Et je peux regarder ici pour pousser un dépôt Git existant. Donc, pratiquement la commande qui m'intéresse est d'ajouter une nouvelle télécommande. Et bien sûr, ce que je dois faire, c'est aussi de faire avancer tous les changements. Maintenant, dans mon cas, tout fonctionne avec doute dans configuration supplémentaire car Git est installé localement. J'ai configuré ma clé privée et ma clé publique avec gitlab.com. Donc, dans ce cas, tout est finalement intégré. Si vous commencez tout juste avec cela, probablement plus facile si vous faites simplement une copie du projet que vous trouverez dans la description vidéo et utilisez l'interface de getline HCI pour éditer ces fichiers. Donc, si j'actualise cette page, nous pourrons le voir. Non, je vois tous mes dossiers. Au cas où vous voudriez faire quelque chose à partir d'ici, vous pouvez simplement cliquer sur n'importe quel fichier ou cliquer sur le plus ici pour ajouter un nouveau fichier. Et si vous souhaitez simplement modifier quelque chose, vous pouvez cliquer dessus. Cliquez sur Modifier. Et vous n'avez pas besoin d'installer Git et tout ce que je vous montre à partir de mon identifiant. 8. Définir le pipeline CI/CD dans GitLab: C'est donc le site que j'essaie de déployer. Il est basé sur React et utilise Gatsby pour créer facilement certaines choses. Je vais aller très loin là-dessus. Mais essentiellement ce que j'ai ici, c'est que j'ai mon dossier source, qui contient les pages et tout ce que j'utilise ici. Ce dossier public est également généré lorsque vous exécutez une commande spécifique. Laissez-moi vous montrer ce que je veux dire par là. Par exemple, si je vais de l'avant, supprimez un dossier public et exécutez Gatsby build. Gatsby va commencer à régénérer ce dossier public. Et essentiellement, ce que j'essaie de déployer ici, c'est le contenu du forum public ou d'être extrait contient des fichiers JavaScript qui sont juste assez petits pour que la charge soit rapide. Ils compilent et rendent tout ce qui est bon pour un environnement de production, mais le dit comme ça. Il s'agit donc essentiellement de mon processus de construction. J'utilise Gatsby pour générer ce dossier public. Et essentiellement beaucoup d'applications JavaScript ont aujourd'hui également cet onglet. Si vous ne faites que héberger des fichiers HTML, comme vous pouvez le voir ici, index.html. Nous n'avons pas de processus de compilation pour le dire comme ça. Vous n'avez pas besoin de ça, vous les construisez. Mais parce que j'en avais besoin et que je veux l'automatiser, nous allons aller de l'avant ici et sur la partie racine du site web, je vais créer un nouveau fichier. Et il faut faire attention à nommer ce fichier exactement comme je l'ai mentionné ici. Donc le nom du fichier, nous allons commencer par dot git, lab, dash, ci, dot YAML. Donc, si vous ne le nommez pas exactement comme vous le voyez ici, ce fichier ne sera pas détecté et le pipeline lui-même ne sera pas exécuté. Dans ce pipeline, j'ai ici deux étapes simples. Il y a cette étape de construction de sites Web. Dans le deuxième état que j'ai, c'est de déployer sur AWS S3. Commençons par le premier. Donc, ce qui se passe ici est essentiellement cette étape. Et j'ai mis en retrait ici deux espaces juste pour montrer que tout est en dessous du site Web de construction, il va y avoir une partie de l'étape de construction. De plus, car il s'agit d'un projet qui nécessite npm pour installer des dépendances et n'a pas besoin de JS pour exécuter mpm. Je vais également utiliser une image Docker. Je vais donc spécifier une image de largeur d'image et le nom de l'image sera noeud. Nous allons utiliser noeud dans la version dix. Maintenant, quand j'ai cela, je peux utiliser le bloc de script. Et à l'intérieur du script, OK, je peux ajouter tous les commentaires que je veux. La commande principale qui m'intéresse est donc npm install. Cela va installer toutes les dépendances dont j'ai besoin. De plus, ce que nous faisons, c'est que nous avons besoin d'un outil, appelé CLI FASB. Nous allons donc l'installer également. C'est toujours une bonne pratique lorsque vous avez des outils. Pour une version plus courte, juste pour avoir une idée comme ce que nous installons, surtout si vous n'installez pas une version spécifique. Et puis je vais construire Gatsby. C'est donc exactement la même commande que celle que j'ai exécutée localement. J'essaie donc de répliquer dans mon pipeline CI, CD exactement les mêmes étapes que localement. C'est pratiquement la clé de l'automatisation. Dès que vous savez exactement quelles commandes vous devez exécuter, vous pouvez facilement les placer dans un pipeline. Il s'agit donc essentiellement de l'énoncé des projets de loi. Et les scènes sont créées dans des images Docker qui n'en ont pas, elles ne partagent pas d'informations entre elles. Nous avons également besoin d'un moyen d'échanger ces informations. pratique, ce que nous n'avons pas discuté, c'est de créer un artefact, ou essentiellement notre dossier public est celui des artefacts. Je vais donc le définir sous des chemins d'artefacts. Nous allons donc définir un chemin, cet artefact que le chemin sera public n'aura pas ce chemin. Nous savons donc que lorsque la version Gatsby sera exécutée, ce dossier public sera créé. Il ne fait pas partie de notre dépôt git, il n'est donc jamais là. Et comme nous voulons l'enregistrer une fois la tâche terminée, nous devons le spécifier comme artefact au Weizmann, la tâche se termine, l'image Docker est détruite et toutes les informations sont perdues. Nous ne voulons donc absolument pas cela parce que nous voulons l'utiliser pour déployer sur AWS S3. Ce nouveau veut garder les choses séparées les unes des autres, un travail comme un gros travail qui fait tout pour garder les choses aussi propres que possible. De plus, l'outil de déploiement est trois, cela fera partie de l'étape de déploiement. Pour la phase de déploiement, nous allons utiliser une image officielle d'AWS. Il s'appelle Amazon AWS CLI. Nous devons faire quelque chose d'un peu différent. Cette image a donc quelque chose de bizarre. C'est ce qu'on appelle un point d'entrée. Je ne veux pas trop m'y attarder, mais cela est un peu en conflit avec la façon dont GitLab CI fonctionne avec les images. Nous devrons donc remplacer ces points d'entrée. Pour ce faire, je vais spécifier ici le nom. Et nous allons également spécifier un point d'entrée vide. Alors assurez-vous que cela ressemble exactement à ce que vous voyez ici. Sinon, vous obtiendrez des erreurs bizarres lorsque vous essayez de démarrer cela. À ce stade, qu'avons-nous ? Eh bien, nous avons cette interface de ligne de commande AWS et l'AWS CLI nous permet d'interagir avec les services Web AWS. Mais cette fois, nous n'utilisons pas l'interface. C'est quelque chose qui sera dû manuellement. Nous utilisons cette interface de ligne de commande pour dire pratiquement à S3, Hey, voici quelques fichiers, les héberger pour nous, ok ? Juste pour vous assurer que tout a fonctionné correctement, allez afficher ici la version d'AWS, et c'est le nom du programme, donc ce sera simplement AWS. Et ce que nous faisons ici, c'est que j'essaie de copier tous les fichiers. Donc, pratiquement, nous avons ici AWS. S3 est un service que nous essayons d'utiliser. En voyant ici, copie publique. Et vous pouvez voir ici que nous faisons référence à cet artefact que nous avons publié ici. Ainsi, lorsque cette image Docker démarrera, ce dossier y sera également disponible. Sinon, si je ne le spécifie pas ici, un artefact n'est pas disponible ici non plus. Dans l'ensemble, ça ne fonctionnera pas. Ce que nous faisons ici, c'est que nous devons spécifier le chemin. Ainsi, le chemin dans S3 commence par une barre oblique S3. Ensuite, nous devrons spécifier le nom du compartiment. I. Typiquement, nous pourrions entrer ici le nom du compartiment tel qu'il est. Je n'aime pas avoir des choses semblables qui donnent des informations sur l'environnement lui-même en cours. Pour cette raison, je vais utiliser ici une variable d'environnement. Je vais simplement le nommer « seau S3 ». Assurez-vous de mettre un signe de dollar devant obéi. Sinon, elle ne sera pas reconnue comme variable. Nous sommes également intéressés à copier tous les fichiers comme vous l'avez vu ici dans le dossier public. Il y a beaucoup de fichiers, donc tous les jours ou sous-dossiers et nous ne voulons pas copier ou spécifier un fichier. Pour cette raison, je vais utiliser ici un drapeau appelé récursif. Il y a encore une autre chose que j'aimerais faire pour me sentir un peu plus à l'aise. Ce n'est probablement pas nécessaire, mais je veux juste commencer à chaque fois avec un état vide du compartiment. Je veux faire quelque chose comme AWS à trois. Et je veux enlever pratiquement tout ce qui se trouve à l'intérieur du seau. Avant d'ajouter de nouveaux fichiers. Pour cette raison, je vais simplement spécifier ici supprimer, et je vais également utiliser ce plat récursif. C'est donc essentiellement ce que nous faisons ici. Nous utilisons cette image Docker officielle d'AWS, en sortant la version, nous supprimons simplement tout ce qui se trouve à l'intérieur du compartiment pour nous assurer que nous n'avons aucun conflit. Ensuite, nous copions l'intégralité du contenu du dossier public. C'est ainsi que ressemble le pipeline, mais cela ne signifie pas qu'il fonctionnera. 9. Créer des identifiants des utilisateurs AWS: Maintenant, ce qui se passe ici, c'est que nous devons dire à AWS CLI comme qui sommes-nous ? Lequel, où est le seau ? Quelle région est le seau, et ainsi de suite. Il y a donc toujours un niveau de configuration. Et pour terminer cette configuration, nous devons revenir sur AWS. Il s'agit du compartiment principal qui héberge le site Web. Et vous verrez ici que nous avons défini cette région. En général, ce que je recommande, c'est de sélectionner une région plus proche vous ou plus proche du public visé. Mais ça n'a pas vraiment d'importance. Cela a été automatiquement sélectionné pour moi car je vis en Europe. Et ce serait comme si la région la plus proche que j'ai et qui m' intéresse, c'est de me souvenir de quelle région je suis. Et c'est comme le code de cette région. Je vais donc copier ceci et je vais aller à git lab ci et nous devons spécifier quelques variables juste pour aider AWS CLI avec quelques éléments de ce menu de gauche, vous devriez pouvoir voir ici quelque chose comme les paramètres, CICD. Vous verrez ici un bloc de variables. Je vais ajouter ici une variable, et cette variable sera disponible pour la tâche elle-même. Donc, si je commence à taper quelque chose comme AWS, nous verrons toujours quelques variables et nous allons toutes les utiliser. Tout d'abord, la région par défaut m'intéresse. La région par défaut que je souhaite utiliser cette région US Central. Je vais donc simplement ajouter cette variable, spécifiant d' abord deux autres variables. Pour revenir à AWS, nous devons utiliser un service appelé IAM. Il s'agit de la gestion des identités. Ici, dans le tableau de bord IAM, nous allons cliquer ici sur les utilisateurs. Et nous allons créer un nouvel utilisateur qui n'a accès qu'aux compartiments S3. Appelons cet utilisateur GitLab CI. Cela nous aidera à identifier ce que cet utilisateur est censé faire ou quoi, où ces dispositions sont-elles utilisées ? Et surtout, vous devez sélectionner ici un accès programmatique. Cela nous donne donc accès à l'AWS CLI. C'est exactement l'outil que nous avons à l'intérieur de la prééclampsie. Je vais cliquer sur Suivant sur les autorisations, et je vais suivre la voie facile pour joindre une autorisation existante. Donc, si je recherche S3 ici, je sélectionnerai cette autorisation, Amazon S3, accès complet. Cette autorisation signifie que vous donnez à cet utilisateur l'accès à tous vos compartiments. Et essentiellement, l'utilisateur peut supprimer tous les compartiments et ainsi de suite. J'utilise simplement cette autorisation parce qu'elle ne fait que démontrer le principe. Mais si vous disposez de petits compartiments contenant des données sensibles, il peut être judicieux de créer vos propres stratégies qui limitent l'accès à un compartiment spécifique uniquement. Cliquez ici sur la page suivante. Je n'ai pas de balises. Et je vais simplement aller de l'avant et créer cet utilisateur. Dès que vous aurez créé cet utilisateur, vous verrez ici que vous avez un ID de clé d'accès ainsi qu'une clé d'accès secrète. Et je vous montre juste que vous avez une idée de leur apparence. Je vais supprimer cet utilisateur juste après avoir enregistré ce tutoriel. Donc, au cas où vous vous demandiez pourquoi je vous montre ce secret ici. Ce que je vais faire ensuite, c'est que je vais copier ici l'ID de clé d'accès, passer GitLab CI et ajouter une nouvelle variable. Et cette variable commencera ici avec AWS. Et vous pouvez voir que j'utilise AWS Access Key ID. Il s'agit d'un nom spécial et cette variable sera automatiquement captée par l'AWS CLI lorsque vous exécutez cette opération. Toutes les variables seront donc présentes dans les variables d'environnement et AWS. Nous allons examiner, hein, y a-t-il une variable appelée AWS Access Key ID ? Et je vais utiliser cette variable pour déterminer qui essaie d'utiliser AWS CLI. Et il en va de même pour le secret. Je veux juste m'assurer de copier tout le secret. Et variable AWS et collez ici également la valeur. Et je suis simplement ajouté. Nous avons essentiellement établi une connexion entre notre compte AWS, les ressources auxquelles nous essayons d'accéder, dans ce cas, S3 et GitLab CI, tout en ne donnant qu'un accès limité à cet utilisateur. conséquent, cet utilisateur n'aura pas accès, par exemple, à utiliser l'interface de gestion, mais via l'interface de ligne de commande, il est possible de faire beaucoup de choses, mais elles ne sont limitées qu'au compartiment. Pratiquement, GitLab CI injectera cette variable. Je vais donc vous montrer comment cela fonctionne. 10. Exécuter le pipeline GitLab: Maintenant que notre pipeline est en place et j'espère que tout va bien, sinon nous le déboguerons plus tard. ne peux pas simplement faire des comités et dire ajouter un pipeline. Et je vais pousser les changements dès que je l'ai fait. Si je retourne à la page du projet, vous devriez pouvoir voir quelque chose comme ça ici, comme le pipeline s'exécute à l'origine. Si vous ne le voyez pas ici ou si quelque chose se passe, vous pouvez accéder ici au pipeline CICD. Il s'agit du premier pipeline en cours d'exécution, et vous verrez qu'il comporte deux étapes. La première étape est donc simplement l'étape de construction, et la deuxième étape est l'étape du déploiement. Voir ici le site Web de création d'emplois a commencé. Donc, si vous voulez voir exactement ce qui se passe, vous suffit de cliquer dessus. Cela montrera que vous êtes comme ce qui se passe actuellement. Il démarre pratiquement cette image Docker de nœud. Une fois que cela a commencé, il commence à passer par les commandes que nous avons. Je vais donc passer ici à la page d'aperçu. Je vais le laisser quelques minutes pour courir. En règle générale, ne devrait pas prendre plus de deux ou trois minutes. Ici, en revenant quelques minutes plus tard, vous regardez votre pipeline. Dans ce cas, quelque chose s'est mal passé, donc ce n'est pas un problème. Ce sera un bon exemple d'essayer de comprendre ce qui se passe. Et chaque fois que vous écrivez des scripts, les choses peuvent mal tourner. Et ce qui s'est passé ici, c'est que vous pouvez voir la première partie avec la ceinture qui fonctionne sans problème. Nous verrons donc ici que toutes les commandes ont été exécutées, y compris qu'elles sont reconstruites. Et même ici, nous pouvons jeter un coup d'œil à des artefacts de travail. Par conséquent, si vous cliquez ici sur Parcourir, vous verrez ici que nous avons un dossier public contenant pratiquement l'intégralité du site Web. Mais nous doutons, par exemple, d'un bon pipeline de CI de laboratoire et de choses semblables. Par conséquent, seul le dossier public a été ajouté ici. Donc, ça a vraiment l'air juste. Voyons maintenant ce qui s'est passé avec la deuxième partie du pipeline qui doit être déployée sur S3. Et je ne peux pas souligner à quel point il est important d'avoir cette capacité regarder les journaux de la console et à essayer de comprendre ce qui se passe ici. Nous verrons donc dans cette étape, et dans ce cas , la dernière chose qui a échoué est aussi la raison de nos problèmes. Dans ce cas, vous verrez qu'aucun AWS n'est en cours d'exécution dans la mesure où l'interface de ligne de commande est disponible ici, c' est-à-dire la version. C'est donc un premier pas. Ok, nous savons que nous avons le bon outil. Et dès que nous essayons de faire quelque chose, par exemple, nous essayons de supprimer tous les fichiers du compartiment. Nous verrons ici quelque chose comme un nom de compartiment non valide et dit vide. Donc, essentiellement, il est dit que le nom du compartiment est vide. Il est donc vide parce que j'ai été un peu rapide quand j'essayais de le faire, et j'ai oublié de définir cette variable. Comme vous vous en souvenez, nous avons défini d'autres variables ici dans Paramètres, l'ICD, mais je n'ai pas vraiment trouvé le nom du compartiment. Il s'agit également d'une variable requise ici. Je vais donc simplement cliquer ici sur Ajouter une variable. Et la façon dont vous le nommez, c'est à vous de décider. Ce n'est pas une de ces variables qui compte vraiment la façon dont vous les appelez. C'est juste qu'ils doivent correspondre à ce que vous utilisez dans un tel script ici, la valeur que j'utilise est celle-ci. C'est donc le nom du seau. Si normal, il suffit de cliquer ici sur Ajouter des variables. Et comme cela n'a pas été un problème avec le script de pipeline lui-même, je peux simplement aller de l'avant ici sur le pipeline, sur Deploy job et cliquer ici sur cette nouvelle tentative. Et vous pouvez même suivre la procédure si vous cliquez maintenant, vous pourrez voir exactement ce qui se passe. Il n'a fallu que quelques secondes à courir. Je verrai cette fois que le travail lui-même est passé, donc tout va bien. Essentiellement, nous avons tout supprimé et il vous indique exactement ce qui a été supprimé, puis le téléchargement commence. Il parcourra donc chaque fichier individuel et téléchargera. Et donc, en regardant un certain nombre de fichiers qui ont été téléchargés ici, on dirait que tout a fonctionné correctement. Nous pouvons revenir à notre domaine ici et cliquer sur le bouton d'actualisation. Et vous devriez pouvoir consulter le site Web. C'est donc le site que j'essayais de déployer. C'est également une bonne idée de vérifier si toutes les pages fonctionnent correctement. C'est ça, c'est comme ça qu'il est censé fonctionner. Nous avons maintenant tout mis en place via notre pipeline d'intégration continue ici. 11. Le processus de changement: Faisons en sorte que nous puissions également apporter un petit changement. Je vais donc ici à l'intérieur de l'ID, je vais cliquer sur le code source , aller dans les pages index.html. Et au lieu de grands gens vont dire quelque chose comme bonjour au monde. De très petites modifications comme indiquent à quel point il est facile ultérieurement d'apporter des modifications et de déployer. Et donc je vais dire ici comme un message changé. Et nous allons pousser. Et bien sûr encore une fois, le pipeline est responsable assurer que je n'ai rien cassé. est donc tout aussi important de construire un processus qui vérifiera à nouveau si quelque chose ne va pas. Nous vous enverrons également une notification par e-mail si quelque chose n'a pas fonctionné. Donc, vous pouvez probablement apporter vos changements et continuer à faire autre chose sans trop vous soucier de cette chose. C'est donc tout comme la puissance de l'automatisation. Quelques minutes plus tard, le pipeline a été couronné de succès. Revenons sur le site Web. On dit que les gens sont élevés, on se rafraîchit. Et maintenant, il est écrit Hello World. C'est ce que signifie avoir en place un pipeline de déploiement continu simple mais très puissant , il suffit de changer votre situation et de les placer dans votre infrastructure. 12. Conclu: Puisque nous arrivons à la fin de ce tutoriel, faisons un petit récapitulatif de ce que nous avons fait jusqu'ici. En revenant aux services AWS, nous pouvons revenir sur S3. S3, nous avons essentiellement ce que nos trois godets. L'un d'eux est donc le compartiment principal avec www et le nom de domaine qui contient tous les fichiers que nous utilisons dans le projet. Et essentiel pour cela, nous avons précisé quelques éléments, quelques autorisations en ce qui concerne l'accès public. Mais aussi comme cette configuration supplémentaire pour la stratégie de compartiment qui permet essentiellement à n'importe qui d'obtenir des informations à partir d'ici. Et ce que je recommande généralement, c'est de ne pas stocker d'autres dossiers ici. Donc, vous pourriez avoir un sous-dossier si vous accédez à votre configuration pour les propriétés. Et vous pouvez spécifier, si vous recherchez ici un hébergement statique de site Web, vous pouvez facilement le spécifier dans un sous-dossier. Nous pourrions donc avoir quelque chose comme public slash index.html. Cela fonctionnerait. Mais la question est qu'aimeriez-vous avoir sur la partie racine ? Parce que cela est théoriquement toujours accessible. C'est donc quelque chose que je ne recommande pas de ranger quoi que ce soit d'autre ici. C'est juste pour des raisons de sécurité. Une partie de l'autorisation dans les propriétés que nous avons également configurées ici certaines journalisation de l'accès au serveur. Et c'est la partie avec Access Logging. Et comme vous vous en souvenez, nous avons utilisé un autre compartiment ni pour stocker des journaux d'accès aux données pour en prendre un peu jusqu'à ce que les journaux soient disponibles. Attendez donc généralement 24 heures pour voir quelque chose à l'intérieur du dossier. Et l'autre compartiment sans www est simplement là pour créer ce lecteur. Ok, donc ici, les paramètres DNS. Vous verrez ici que j'ai créé cet enregistrement d'alias. C'est assez similaire. Vous auriez pu créer un enregistrement CNAME. Je comprends que je ne suis en aucun cas un expert. Je crois comprendre qu'un CNAME, nous allons effectuer une autre recherche DNS. C'est pourquoi l'enregistrement des alias est généralement plus rapide. La façon dont je l'ai fait ici est assez similaire. Avant DNS, j'utilise Cloudflare. Ils ont une interface très puissante et se préparent également à la mise en cache et à de nombreux autres mécanismes. Depuis ce moment, le service d'enregistrement des domaines m'a permis d'ajouter directement. Cela n'avait besoin de rien de plus avancé que celui-ci. Depuis que nous avons établi comment télécharger des fichiers sur S3 et comment pratiquement lier 32 ou nom de domaine. Dans la deuxième partie, nous avons envisagé la construction de ce pipeline. Donc, essentiellement, le pipeline prend tout processus de construction que vous avez si vous en avez un. Et dans la deuxième partie, il utilise AWS CLI pour déployer automatiquement tous les fichiers dont vous disposez sur S3. Donc, pour l'essentiel, vous n'avez pas besoin de vous connecter à l'interface S3. Et surtout si vous utilisez déjà Git pour vos flux de travail, solution peut être beaucoup plus rapide. Merci de rester là jusqu'à la fin. Je sais qu'il s'agit d'un long tutoriel et j'espère que j'ai réussi à suivre. Vous trouverez un fichier de projet incluant le pipeline GitLab CI dans la description de la période. J'ai intégré un pipeline de déploiement continu dans cet exemple pour vous montrer à quel point il peut être facile d'automatiser les tâches manuelles. voit la prochaine fois. Adieu.