Deployer un Site Web sur S3 et CloudFront avec Bitbucket Pipelines
Dans cet article, vous apprendrez comment deployer votre site web statique sur un bucket S3 et faire l'invalidation du cache automatiquement...

Bitbucket est un produit Atlassian, un magasin de code base sur Git et des outils CI/CD optimises pour les equipes collaborant avec Jira. Lorsque vous modifiez votre code et conservez les revisions et l'historique dans Bitbucket, vous avez egalement besoin d'automatisation pour le deploiement.
Le CI/CD designe toute automatisation et signifie Integration Continue et Livraison Continue. Dans cet article, nous utiliserons CI et CD en meme temps.
Je passe "Comment utiliser Bitbucket ?" et je vais vous presenter les Bitbucket Pipelines pour le deploiement continu vers AWS S3 qui utilise CloudFront pour la distribution dans le monde entier.
Lorsque vous creez un bucket S3 avec hebergement statique active, vous devez sync depuis votre dossier local vers le bucket S3. Normalement, nous devons lancer la commande aws s3 sync LOCAL_FOLDER/ s3://NOM_DU_BUCKET_AVEC_HEBERGEMENT_STATIQUE --delete pour synchroniser a 100% le dossier local avec le bucket S3.
Si vous utilisez CloudFront pour la distribution, vous verrez l'ancien contenu lorsque vous visiterez le site web. La raison est que CloudFront met en cache tout le contenu sur tous les emplacements edge et sert le contenu depuis les emplacements edge. Nous devons "invalider le cache" pour le nouveau contenu et re-cacher sur les emplacements edge.
Quelle Politique IAM Utiliser pour S3 et CloudFront ?
Pour une securite maximale, j'aime vraiment mettre une restriction maximale et une permission minimale pour les Politiques IAM. Vous pouvez voir les politiques ci-dessous :
Politique IAM pour le Bucket S3
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "S3BucketPolicy",
"Effect": "Allow",
"Action": [
"s3:PutObject",
"s3:GetObject",
"s3:ListBucket",
"s3:DeleteObject"
],
"Resource": [
"arn:aws:s3:::BUCKET_NAME",
"arn:aws:s3:::BUCKET_NAME/*"
],
"Condition": {
"ForAnyValue:IpAddress": {
"aws:SourceIp": [
"34.199.54.113/32",
"34.232.25.90/32",
"34.232.119.183/32",
"34.236.25.177/32",
"35.171.175.212/32",
"52.54.90.98/32",
"52.202.195.162/32",
"52.203.14.55/32",
"52.204.96.37/32",
"34.218.156.209/32",
"34.218.168.212/32",
"52.41.219.63/32",
"35.155.178.254/32",
"35.160.177.10/32",
"34.216.18.129/32",
"3.216.235.48/32",
"34.231.96.243/32",
"44.199.3.254/32",
"174.129.205.191/32",
"44.199.127.226/32",
"44.199.45.64/32",
"3.221.151.112/32",
"52.205.184.192/32",
"52.72.137.240/32"
]
}
}
}
]
}Nous executerons nos deploiements dans Bitbucket Pipelines et ces adresses IP sont les IPs sortantes de Bitbucket Pipelines. Vous pouvez voir la reference sur https://support.atlassian.com/bitbucket-cloud/docs/what-are-the-bitbucket-cloud-ip-addresses-i-should-use-to-configure-my-corporate-firewall/
Politique IAM pour l'Invalidation du Cache CloudFront
Pour lancer la commande d'invalidation du cache CloudFront via Bitbucket Pipelines, vous pouvez utiliser la Politique IAM ci-dessous. Vous pouvez attacher cette politique au meme utilisateur AWS autorise pour les operations S3 Sync.
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "CloudFrontCacheInvalidationPolicy",
"Effect": "Allow",
"Action": "cloudfront:CreateInvalidation",
"Resource": "arn:aws:cloudfront::ACCOUNT_ID:distribution/CF_DISTRIBUTION_ID",
"Condition": {
"ForAnyValue:IpAddress": {
"aws:SourceIp": [
"34.199.54.113/32",
... (memes IPs que ci-dessus)
]
}
}
}
]
}Bitbucket Pipelines
Precedemment, vous avez deja cree un utilisateur AWS pour executer les Bitbucket Pipelines pour les operations CI/CD. Il est temps de mettre les variables d'environnement dans le depot. AWS_ACCESS_KEY_ID et AWS_SECRET_ACCESS_KEY suffisent.

Fichier Pipeline
Maintenant, a cette etape, nous pouvons creer un fichier bitbucket-pipelines.yml pour lancer le S3 Sync et l'Invalidation du Cache CloudFront.
pipelines:
branches:
main:
- step:
name: Deployer vers le Bucket S3
deployment: Production
script:
- pipe: atlassian/aws-s3-deploy:1.1.0
variables:
AWS_ACCESS_KEY_ID: $AWS_ACCESS_KEY_ID
AWS_SECRET_ACCESS_KEY: $AWS_SECRET_ACCESS_KEY
AWS_DEFAULT_REGION: AWS-REGION
S3_BUCKET: 'S3_BUCKET_NAME'
DELETE_FLAG: 'true'
LOCAL_PATH: './'
- pipe: atlassian/aws-cloudfront-invalidate:0.1.1
variables:
AWS_ACCESS_KEY_ID: $AWS_ACCESS_KEY_ID
AWS_SECRET_ACCESS_KEY: $AWS_SECRET_ACCESS_KEY
AWS_DEFAULT_REGION: AWS-REGION
DISTRIBUTION_ID: CLOUDFRONT-DIST-IDQuand la branche main a un nouveau commit, le pipeline se declenche et commence a s'executer immediatement. Apres cela, le chemin racine de votre depot Bitbucket "/" sera synchronise avec votre bucket S3 et lancera l'invalidation du cache immediatement pour appliquer le nouveau site web a tous les emplacements edge.
J'espere que cet article vous aidera. Si vous voulez demander quoi que ce soit, laissez simplement un commentaire. Je vous repondrai des que possible.
Plus d'Ercan
Deux autres sites, même auteur, terrain différent.
IA, LLMs, agents, ML appliquée.
Notes de terrain sur les charges IA. Analyse des coûts Bedrock, patterns d'agents, compromis de stockage vectoriel, modes de défaillance en production.
Visiter ercan.ai →Le hub. À propos, conseil, contact.
Hub personnel pour les deux pistes d'écriture. Qui je suis, comment fonctionne le conseil, comment me joindre.
Visiter ercanermis.com →