Déployer Angular sur AWS : S3 et CloudFront en 5 minutes avec CDK
Héberger une application Angular (SPA) sur AWS est devenu un jeu d’enfant grâce au CDK. Pas besoin de configurer manuellement des serveurs : nous allons utiliser S3 pour le stockage et CloudFront pour la diffusion ultra-rapide.
Dans ce guide, nous allons automatiser tout le processus en TypeScript, tout en gardant une configuration simple et compatible avec n’importe quel fournisseur de nom de domaine (sans Route 53).
Objectif du tutoriel
- Organiser un projet global contenant le Front et l’Infra.
- Créer un bucket S3 privé.
- Configurer CloudFront pour le HTTPS et le routage Angular.
- Déployer le tout en une seule commande.
Prérequis
Avant de commencer, il vous faut:
- Node.js
- AWS CLI configurée:
aws configure- AWS CDK installé:
npm install -g aws-cdk- Un compte aws actif
- La Cli angular installé
1. Structure du Projet
Pour une gestion simplifiée, nous allons regrouper l’application et l’infrastructure dans un dossier racine unique. Voici la structure que nous allons obtenir :
/host-anglar-app
├── /frontend --------------> Application Angular
└── /infrastructure --------------> Code AWS CDKCréation du dossier host-anglar-app et du Frontend
mkdir host-anglar-app && cd host-anglar-app
# creation de l'application angular
ng new frontend### Création de l’Infrastructure
mkdir infrastructure && cd infrastructure
# Initialisation du CDK
cdk init app --language typescript2. Le code de l’Infrastructure (CDK)
Ouvrez infrastructure/lib/infrastructure-stack.ts. Ce script va créer le bucket S3 et la distribution CloudFront. Il gère aussi automatiquement la sécurité pour que seul CloudFront puisse accéder à vos fichiers S3.
import * as cdk from 'aws-cdk-lib/core';
import { Construct } from 'constructs';
import * as s3 from 'aws-cdk-lib/aws-s3';
import * as cloudfront from 'aws-cdk-lib/aws-cloudfront';
import * as s3deploy from 'aws-cdk-lib/aws-s3-deployment';
import * as origins from 'aws-cdk-lib/aws-cloudfront-origins';
export class InfrastructureStack extends cdk.Stack {
constructor(scope: Construct, id: string, props?: cdk.StackProps) {
super(scope, id, props);
// S3 bucket to host the Angular app
const bucket = new s3.Bucket(this, "AngularAppBucket", {
removalPolicy: cdk.RemovalPolicy.DESTROY,
autoDeleteObjects: true,
blockPublicAccess: s3.BlockPublicAccess.BLOCK_ALL,
bucketName: 'angular-app-bucket-example-123456' // Change to a globally unique name
});
// CloudFront distribution to serve the Angular app
const distribution = new cloudfront.Distribution(this, "AngularAppDistribution", {
defaultBehavior: {
origin: origins.S3BucketOrigin.withOriginAccessControl(bucket),
viewerProtocolPolicy: cloudfront.ViewerProtocolPolicy.REDIRECT_TO_HTTPS,
},
defaultRootObject: "index.html",
// Ajoutez ceci pour gérer le rafraîchissement des pages Angular
errorResponses: [
{
httpStatus: 403,
responseHttpStatus: 200,
responsePagePath: '/index.html',
},
],
});
// Deploy the Angular app to the S3 bucket
new s3deploy.BucketDeployment(this, "DeployAngularApp", {
sources: [s3deploy.Source.asset("../frontend/dist/frontend/browser")],
destinationBucket: bucket,
distribution,
distributionPaths: ["/*"],
});
// Output the CloudFront distribution domain name
new cdk.CfnOutput(this, "DistributionDomainName", {
value: distribution.domainName,
});
}
}3. Déploiement en une seule étape
Pour automatiser le build et le déploiement, nous allons créer une commande personnalisée. Dans le dossier infrastructure nous allons ajouter un script
"deploy:all": "cd frontend && ng build && cd ../infrastructure && cdk deploy"Désormais, une seule commande suffit :
npm run deploy:all
https://xxxxxxxxxxx.cloudfront.net/
4. Pointer votre domaine (Sans Route 53) bonus
Si vous avez déjà un domaine chez OVH, GoDaddy ou autre, créez simplement un enregistrement CNAME :
- www (ou votre sous-domaine)
- Valeur : d123.cloudfront.net (l’URL obtenue précédemment)
Important
Pour le HTTPS avec votre propre domaine, il faudra créer un certificat dans AWS Certificate Manager (ACM), mais pour débuter, l’URL CloudFront par défaut fonctionne parfaitement en HTTPS.
5. Nettoyer
Pour ne plus rien payer une fois vos tests terminés :
cdk destroyConclusion
Dans cet article nous avons :
- Crée et configuré un Stockage S3 privé et sécurisé.
- Configuré un CDN CloudFront pour des performances mondiales.
- projet gitlab front
- projet gitlab infrastructure
Commentaires