Fermer

mars 5, 2025

Automatisez le déploiement d’un site Web statique à un seau S3 en utilisant des actions / blogs GitHub / Perficient

Automatisez le déploiement d’un site Web statique à un seau S3 en utilisant des actions / blogs GitHub / Perficient


L’automatisation des déploiements est cruciale pour l’efficacité et la fiabilité dans l’environnement de développement au rythme rapide d’aujourd’hui. GitHub Actions fournit un moyen transparent de mettre en œuvre des pipelines CI / CD, permettant aux développeurs d’automatiser le déploiement de sites Web statiques sans intervention manuelle.

Dans ce blog, nous explorerons comment déployer un site Web statique dans un seau AWS S3 à l’aide d’actions GitHub. Nous couvrirons la configuration d’un compartiment S3, la configuration des rôles IAM pour l’authentification sécurisée et la mise en œuvre des workflows GitHub Actions pour rationaliser le déploiement. À la fin, vous aurez un pipeline entièrement automatisé qui assure des déploiements rapides et sécurisés avec un minimum d’effort.

Condition préalable

  1. Seau Amazon S3: Créez un godet S3 et activez l’hébergement de site Web statique.
  2. IAm utilisateur et autorisation: Créez un utilisateur IAM avec un accès à S3 et stockez en toute sécurité les informations d’identification.
  3. Référentiel GitHub: Votre code de site Web statique doit être dans un référentiel GitHub.
  4. Secrets GitHub: Stockez les informations d’identification AWS dans GitHub Actions Secrets.
  5. Amazon EC2 – Pour créer un coureur auto-hébergé.

Déployez un site Web statique dans un seau S3

Étape 1

Créez d’abord un référentiel GitHub. J’en ai déjà fait un avec le même nom, c’est pourquoi il existe.

Statique 1

Étape 2

Vous pouvez cloner le référentiel à partir de l’URL ci-dessous et le mettre dans votre système local. J’ai ajouté le code lié au site Web à mon référentiel GitHub, il vous suffit donc de le cloner: https://github.com/kunal2795/static-website.git.

Étape 3

Poussez le code pour héberger ce site Web statique avec vos modifications, telles que la mise à jour du nom de seau et de la région AWS. Je l’ai déjà localement, il vous suffit donc de le pousser en utilisant les commandes GIT ci-dessous:

Statique 2

Étape 4

Une fois les modifications poussées vers votre référentiel GitHub, assurez-vous le principal. Le fichier YAML se trouve dans le répertoire .github / workflows.

Static 3

Si le fichier main.yaml n’est pas présent dans le répertoire .github / workflows /. Créez-le et ajoutez un travail pour exécuter le pipeline de sites Web statique dans les actions GitHub. Le fichier main.yaml est le fichier de configuration principal dans les actions GitHub qui exécute l’intégralité du pipeline.

Ajoutez le code de travail suivant dans le fichier main.yaml dans le .github / workflows / répertoire:

Nom: Portfolio Deployment2

sur:

pousser:

Branches:

– principal

Emplois:

build-and-déploiment:

Runs-on: [self-hosted, silver]

mesures:

– Nom: Checkout

Utilisations: Actions / Checkout @ V1

– Nom: Configurer les informations d’identification AWS

Utilisations: AWS-Action / configure-aws-crédentiels @ v1

avec:

aws-access-key-id: $ {{secrets.aws_access_key_id}}

AWS-Secret-Access-Key: $ {{secrets.aws_secret_access_key}}

AWS-Région: US-East-2

– Nom: Déployez le site statique vers S3 Bodet

Run: AWS S3 Sync. S3: // KC-Devops –Delete

Vous devez apporter des modifications dans les travaux ci-dessus, tels que:

  • Runs-on – Ajoutez un coureur auto-hébergé ou un coureur par défaut (j’ai ajouté un coureur auto-hébergé).
  • AWS-Access-Key-ID – Vous devez ajouter le nom de la variable ID de clé d’accès (stocker la valeur de la variable dans Variablesque je vais vous montrer ci-dessous).
  • AWS-Secret-Access-Key – Vous devez ajouter le nom de variable de l’ID de clé d’accès secret (stocker sa valeur dans Variablesque je vais vous montrer ci-dessous)
  • AWS-Région – Ajouter la région du seau S3
  • courir – Dans cette section, vous devez ajouter le chemin de votre seau où vous souhaitez stocker votre code de site Web statique.

Comment créer un coureur auto-hébergé

Lancez une instance EC2 avec Ubuntu OS à l’aide d’une configuration simple.

Statique 4

Après cela, créez un coureur auto-hébergé en utilisant des commandes spécifiques. Pour obtenir ces commandes, accédez à Paramètres dans GitHub, accédez à des actions, cliquez sur Runners, puis sélectionnez Créer un nouveau coureur auto-hébergé.

Sélectionnez Linux comme image de coureur.

Statique 5

Statique 6

Exécutez les commandes ci-dessus étape par étape sur votre serveur EC2 pour télécharger et configurer le coureur auto-hébergé.

Statique 7

Statique 8

Une fois le coureur téléchargé et configuré, vérifiez son statut pour vous assurer qu’il est inactif ou hors ligne. S’il est hors ligne, démarrez le service GitHub Runner sur votre serveur EC2.

Assurez-vous également que AWS CLI est installé sur votre serveur.

Statique 9

IAM User

Créez un utilisateur IAM et accordez-lui un accès complet aux services EC2 et S3.

Statique 10

Ensuite, accédez aux informations d’identification de sécurité, créez une clé d’accès et une clé d’accès secrète, et copiez et stockez en toute sécurité la clé d’accès et la clé d’accès secret dans un endroit sûr.

Statique 11

Ensuite, accédez aux actions GitHub → Secrets et variables → Actions, puis ajoutez votre ID de clé d’accès AWS et la clé d’accès secret en toute sécurité.

Statique 12

Après avoir ajouté l’ID de clé d’accès et la clé d’accès secret, passez à la section suivante: S3.

Créer un seau S3– J’en ai créé un avec le nom KC-Devops.

Statique 13

Ajoutez la stratégie ci-dessous à votre seau S3 et mettez à jour le nom du seau avec votre propre nom de seau.

Statique 14

Après avoir tout configuré, accédez aux actions GitHub, ouvrez le principal. Dans le fichier YAML, mettez à jour le nom du seau et engagez les modifications.

Ensuite, cliquez sur l’onglet Actions pour voir tous vos flux de travail déclenchés et leur statut.

Statique 15

Nous pouvons voir que toutes les étapes pour le construire et déployer Les emplois ont été terminés avec succès.

Statique 16

Enfin, connectez-vous à la console de gestion AWS et ouvrez la console Amazon S3. Vérifiez tous les codes stockés dans votre seau.

Statique 17

Ensuite, accédez à l’onglet Propriétés. Sous l’hébergement du site Web statique, recherchez et cliquez sur l’URL du point de terminaison. (Point de terminaison du site Web de seau)

Cette URL du point de terminaison est le point de terminaison du site Web d’Amazon S3 pour votre seau.

Statique 18

Sortir

Enfin, nous avons réussi à déployer et à héberger un site Web statique en utilisant l’automatisation dans le seau Amazon S3.

Statique 19

Conclusion

Avec cette configuration, chaque fois que vous appuyez sur les modifications de votre référentiel GitHub, les actions GitHub déclenchent automatiquement le processus de déploiement. Cela garantit que votre site Web statique est mis à jour de manière transparente et déployé dans votre seau AWS S3 sans aucune intervention manuelle. Cette automatisation rationalise le flux de travail de déploiement, ce qui le rend plus efficace et sans erreur.






Source link