Amazon S3 dispose d'une fonctionnalité d'hébergement qui vous permet d'héberger un site Web statique directement à partir d'un bucket S3, également appelé compartiment. Lorsque vous hébergez votre site Web sur Amazon S3, son contenu est stocké dans un bucket S3 et servi directement à vos utilisateurs, sans besoin de ressources supplémentaires.
Combinez cela avec Amazon CloudFront et vous obtiendrez une solution rentable et évolutive pour l'hébergement de vos sites Web statiques. Une fonctionnalité particulièrement utile pour les applications à page unique.
Dans cet article, nous vous guidons dans la configuration de votre bucket Amazon S3, la configuration d'OpenID Connect (OIDC) dans AWS et le déploiement de votre application sur Amazon S3 à l'aide d'un pipeline GitLab CI/CD.
À la fin de cet article, vous disposerez d'un pipeline CI/CD construit dans GitLab qui se déploie automatiquement dans votre bucket Amazon S3.
Prérequis
Pour ce guide, vous aurez besoin des éléments suivants :
- Node.js >= 14.0.0 et npm >= 5.6 installés sur votre système
- Git installé sur votre système
- Un compte GitLab
- Un compte AWS
Dans un précédent tutoriel nous vous avons expliqué comment :
- créer une nouvelle application React,
- exécuter des tests unitaires dans le cadre du processus CI dans GitLab,
- générer les résultats des tests ainsi que la couverture de code dans le pipeline.
Cet article constitue la suite de ce projet. Libre à vous de le parcourir et de le dupliquer (fork).
Configuration de votre bucket S3
Pour commencer, vous devez configurer votre bucket Amazon S3.
Créez votre compartiment
Après vous être connecté à votre compte AWS, recherchez « S3 » à l'aide de la barre de recherche et sélectionnez le service S3. Cela ouvrira la page d'accueil du service.
Vous devriez immédiatement voir l'option permettant de créer un bucket (compartiment). Ce compartiment est l'endroit où vous allez stocker votre application React une fois créée. Cliquez sur le bouton « Créer un compartiment » pour continuer.
Donnez un nom à votre compartiment, sélectionnez votre région, laissez le reste des paramètres par défaut (nous y reviendrons plus tard) et continuez en cliquant sur le bouton « Créer un compartiment ».
Lorsque vous nommez votre compartiment, il est important de se rappeler que le nom doit être unique et suivre les règles de nommage des compartiments. Nous avons nommé le nôtre jw-gl-react.
Une fois votre compartiment créé, vous devriez être redirigé vers une liste de vos compartiments, comme montré ci-dessous.
Configurez l'hébergement de site web statique
L'étape suivante consiste à configurer l'hébergement de site web statique. Ouvrez votre compartiment en cliquant sur son nom. Sélectionnez l'onglet « Propriétés » et faites défiler vers le bas pour trouver l'option d'hébergement de site web statique.
Cliquez sur « Modifier », puis activez l'hébergement de site web statique. Pour les documents d’index et d’erreur, saisissez index.html, puis cliquez sur « Enregistrer les modifications ».
Configurez les autorisations de votre application React
Maintenant que vous avez activé l'hébergement de site web statique, vous devez mettre à jour vos autorisations afin que votre audience puisse accéder à votre site web. Revenez à votre compartiment et sélectionnez l'onglet « Autorisations ».
Sous « Bloquer l'accès public » (paramètres du compartiment), cliquez sur « Modifier », décochez « Bloquer tous les accès publics » et continuez en cliquant sur « Enregistrer les modifications ».
Votre page devrait maintenant ressembler à ceci :
Maintenant, vous devez modifier la stratégie de compartiment. Pour cela, cliquez sur le bouton « Modifier » dans la section « Stratégie de compartiment » et collez le code suivant :
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::jw-gl-react/*"
}
]
}
À la ligne « Ressource », remplacez jw-gl-react par le nom de votre compartiment et enregistrez les modifications.
Votre compartiment devrait ressembler à ceci :
Chargement de votre application React
Maintenant, créons votre application React et publions-la manuellement dans votre bucket S3.
Pour créer l'application, assurez-vous que votre projet soit cloné sur votre machine locale et exécutez la commande suivante dans votre terminal à l'intérieur du répertoire de votre dépôt :
npm run build
Cela créera un dossier build à l'intérieur du répertoire de votre dépôt.
Dans votre compartiment, cliquez sur le bouton « Charger »
Faites glisser le contenu de votre dossier nouvellement créé (et non le dossier lui-même) dans la zone de chargement. Cela chargera le contenu de votre application React dans votre compartiment. Assurez-vous de cliquer sur « Charger » en bas de la page pour démarrer le chargement.
Revenez maintenant à l'onglet « Propriétés » de votre compartiment et faites défiler vers le bas pour trouver l'URL de votre site web statique.
Cliquez sur le lien et vous devriez voir votre application React nouvellement créée s'ouvrir dans votre navigateur.
Configuration d’OpenID Connect dans AWS
Pour déployer sur votre bucket S3 depuis GitLab, nous allons utiliser un job GitLab CI/CD pour recevoir des informations d'identification temporaires d'AWS sans avoir besoin de stocker des secrets. Pour ce faire, nous allons configurer OpenID Connect pour la fédération d'identité entre GitLab et AWS. Nous suivrons la documentation de GitLab associée.
Ajoutez un fournisseur d'identité
La première étape consiste à ajouter GitLab en tant que fournisseur d’identité OpenID Connect (OIDC) dans IAM. AWS fournit des instructions, mais nous allons les parcourir étape par étape dans ce guide.
Ouvrez tout d'abord la console IAM dans AWS.
Dans le volet de navigation de gauche, sous « Gestion des accès », choisissez « Fournisseurs d'identité », puis « Ajouter un fournisseur ». Pour le type de fournisseur, sélectionnez « OpenID Connect ».
Pour l'URL du fournisseur, saisissez l'adresse de votre instance GitLab, telle que https://gitlab.com ou https://gitlab.example.com.
Pour « Audience », saisissez quelque chose de générique mais spécifique à votre application React. Dans notre cas, nous allons utiliser react_s3_gl. Veillez à choisir quelque chose qui ne soit pas facile à deviner et prenez note de cette valeur, car vous l'utiliserez pour définir l'ID_TOKEN dans votre fichier .gitLab-ci.yml.
Après avoir saisi l'URL du fournisseur, cliquez sur « Obtenir une empreinte numérique » pour vérifier le certificat du serveur de votre fournisseur d'identité. Ensuite, continuez et cliquez sur « Ajouter un fournisseur » pour terminer.
Créez une politique d’autorisations
Après avoir créé le fournisseur d'identité, vous devez créer une politique d’autorisations.
Depuis le tableau de bord IAM, sous « Gestion des accès », sélectionnez « Politiques » puis « Créer une politique ». Sélectionnez l'onglet JSON et collez le code suivant en remplaçant jw-gl-react par le nom de votre compartiment à la ligne « Ressource ».
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Action": ["s3:ListBucket"],
"Resource": ["arn:aws:s3:::jw-gl-react"]
},
{
"Effect": "Allow",
"Action": [
"s3:PutObject",
"s3:GetObject",
"s3:DeleteObject"
],
"Resource": ["arn:aws:s3:::jw-gl-react/*"]
}
]
}
Sélectionnez le bouton « Suivant : Balises » , ajoutez les balises souhaitées, puis sélectionnez le bouton « Suivant : Confirmer ». Entrez un nom pour votre politique avant de terminer sa création.
Configurez le rôle
Il est maintenant temps d'ajouter le rôle. Depuis le tableau de bord IAM, sous « Gestion des accès », sélectionnez « Rôles », puis cliquez sur « Créer un rôle » et choisissez « Identité Web ».
Dans la section « Identité Web », sélectionnez le fournisseur d'identité que vous avez créé précédemment. Pour l'audience, sélectionnez également l'audience que vous avez créée précédemment. Cliquez sur le bouton « Suivant » pour continuer.
Si vous souhaitez limiter l'autorisation à un groupe, un projet, une branche ou une balise spécifique, vous pouvez créer une « Politique d’approbation personnalisée » (Custom Trust Policy) au lieu d'une « Identité Web ».
Pour une liste complète des types de filtres qu'il est possible d'appliquer, consultez notre documentation.
Au cours de l'étape « Ajout des autorisations », sélectionnez la politique que vous avez créée, puis cliquez sur « Suivant » pour continuer. Donnez un nom à votre rôle et cliquez sur « Créer un rôle ».
Ouvrez le rôle que vous venez de créer. Dans la section « Récapitulatif », recherchez le nom de ressource Amazon (ARN) et enregistrez-le dans un endroit sécurisé. Vous l'utiliserez dans votre pipeline.
Déploiement sur votre compartiment Amazon S3 à l'aide d'un pipeline GitLab CI/CD
Dans votre projet, créez deux variables CI/CD :
- La première variable doit être nommée
ROLE_ARN. Pour la valeur, collez l'ARN du rôle que vous venez de créer. - La deuxième variable doit être nommée
S3_BUCKET. Pour la valeur, collez le nom du compartiment que vous avez créé plus tôt.
Pour des raisons de sécurité, dans cet article nous avons choisi de masquer nos variables.
Récupérez vos identifiants temporaires
Dans votre fichier .gitlab-ci.yml, collez le code suivant :
.assume_role: &assume_role
- >
STS=($(aws sts assume-role-with-web-identity
--role-arn ${ROLE_ARN}
--role-session-name "GitLabRunner-${CI_PROJECT_ID}-${CI_PIPELINE_ID}"
--web-identity-token $ID_TOKEN
--duration-seconds 3600
--query 'Credentials.[AccessKeyId,SecretAccessKey,SessionToken]'
--output text))
- export AWS_ACCESS_KEY_ID="${STS[0]}"
- export AWS_SECRET_ACCESS_KEY="${STS[1]}"
- export AWS_SESSION_TOKEN="${STS[2]}"
Cela va utiliser le service de jeton de sécurité AWS (AWS Security Token Service) pour générer des identifiants temporaires (3 600 secondes) en utilisant le rôle OpenID Connect que vous avez créé précédemment.
Créez le job de déploiement pour votre application React
Maintenant, ajoutons un job de compilation et de déploiement pour créer votre application et la déployer sur votre bucket S3.
Tout d'abord, mettez à jour les étapes dans votre fichier .gitlab-ci.yml pour inclure une étape build et deploy, comme indiqué ci-dessous :
stages:
- build
- test
- deploy
Ensuite, ajoutons un job pour créer votre application. Collez le code suivant dans votre fichier .gitLab-ci.yml :
build artifact:
stage: build
image: node:latest
before_script:
- npm install
script:
- npm run build
artifacts:
paths:
- build/
when: always
rules:
- if: '$CI_COMMIT_REF_NAME == "main"'
when: always
Cela va exécuter npm run build si le changement se produit sur la branche main et télécharger le répertoire de compilation (build directory) en tant qu'artefact à utiliser lors de l'étape suivante.
Ensuite, ajoutons un job qui sera réellement déployé sur votre bucket S3. Collez le code suivant dans votre fichier .gitLab-ci.yml :
deploy s3:
stage: deploy
image:
name: amazon/aws-cli:latest
entrypoint:
- '/usr/bin/env'
id_tokens:
ID_TOKEN:
aud: react_s3_gl
script:
- *assume_role
- aws s3 sync build/ s3://$S3_BUCKET
rules:
- if: '$CI_COMMIT_REF_NAME == "main"'
when: always
Cela utilise les ancres YAML pour exécuter le script assume_role, puis utilise aws cli pour télécharger votre artefact de compilation dans le compartiment que vous avez défini en tant que variable. Ce job ne s'exécute que si le changement se produit sur la branche main.
Assurez-vous que la valeur aud correspond à celle que vous avez saisie pour votre audience au moment de la configuration du fournisseur d'identité. Dans notre cas, nous avons saisi react-s3_gl.
Votre fichier .gitLab-ci.yml complet devrait ressembler à ceci :
stages:
- build
- test
- deploy
.assume_role: &assume_role
- >
STS=($(aws sts assume-role-with-web-identity
--role-arn ${ROLE_ARN}
--role-session-name "GitLabRunner-${CI_PROJECT_ID}-${CI_PIPELINE_ID}"
--web-identity-token $ID_TOKEN
--duration-seconds 3600
--query 'Credentials.[AccessKeyId,SecretAccessKey,SessionToken]'
--output text))
- export AWS_ACCESS_KEY_ID="${STS[0]}"
- export AWS_SECRET_ACCESS_KEY="${STS[1]}"
- export AWS_SESSION_TOKEN="${STS[2]}"
unit test:
image: node:latest
stage: test
before_script:
- npm install
script:
- npm run test:ci
coverage: /All files[^|]*\|[^|]*\s+([\d\.]+)/
artifacts:
paths:
- coverage/
when: always
reports:
junit:
- junit.xml
build artifact:
stage: build
image: node:latest
before_script:
- npm install
script:
- npm run build
artifacts:
paths:
- build/
when: always
rules:
- if: '$CI_COMMIT_REF_NAME == "main"'
when: always
deploy s3:
stage: deploy
image:
name: amazon/aws-cli:latest
entrypoint:
- '/usr/bin/env'
id_tokens:
ID_TOKEN:
aud: react_s3_gl
script:
- *assume_role
- aws s3 sync build/ s3://$S3_BUCKET
rules:
- if: '$CI_COMMIT_REF_NAME == "main"'
when: always
Testez votre pipeline
Pour tester votre pipeline, dans App.js, modifiez cette ligne Edit <code>src/App.js</code> and save to reload. par ceci : This was deployed from GitLab. Maintenant, validez vos modifications dans la branche main. Le pipeline devrait se lancer et une fois terminé avec succès, vous devriez voir votre application mise à jour avec l'URL de votre site web statique.
Vous disposez désormais d'un pipeline CI/CD construit dans GitLab qui reçoit des informations d'identification temporaires d'AWS à l'aide d'OpenID Connect et qui se déploie automatiquement dans votre compartiment Amazon S3. Pour aller plus loin, vous pouvez sécuriser votre application avec les outils de sécurité intégrés de GitLab.
Découvrez tout le code de ce projet.
