Travaux pratiques : Déployer une application React (SPA) sur AWS Cloudfront + S3

Do not index

Primary Keyword

Lié à Analyse sémantique (Articles liés) 1

Lié à Analyse sémantique (Articles liés)

Statut rédaction

A améliorer

Lié à Analyse sémantique (Articles liés) 2

Introduction Prérequis Les services AWS à utiliser dans ce TP Etapes à suivre Build l’application React Créer un bucket S3 Upload les fichiers sur le S3 Créer un certificat sur AWS Cert Manager Créer les records de validation du certificat dans le provider DNS Créer une distribution Cloudfront Créer un record DNS pointant sur la distribution Cloudfront Donner les accès à Cloudfront d’accéder au bucket Ajouter une règle de redirection dans la distribution Cloudfront Critères d’acceptation pour valider le TP

Introduction

Bonjour à toi,

Ta mission, si tu l’accepte, est de déployer un frontend React SPA (sans SSR) sur AWS.

Afin de maximiser tes chances de réussite, nous avons préparé pour toi un dossier complet avec l’ensemble des informations dont tu auras besoin pour cette mission. N’hésites pas à bien prendre le temps de tout lire afin de bien comprendre le sujet.

Bonne chance !

Prérequis

Avoir accès à un compte AWS en admin

Avoir nodejs sur son pc à la version : 16.16.0

Connaitre les bases d’AWS

Les services AWS à utiliser dans ce TP

AWS S3

AWS Cloudfront

AWS Certificate Manager

AWS IAM

Etapes à suivre

Build l’application React

Dans ce TP l’objectif est de déployer une application React. Si vous avez déjà votre propre application vous pouvez l’utiliser, sinon vous pouvez utiliser le repo suivant concu pour ce TP :

keltiotechnology / Sample apps / React Sample App · GitLab

GitLab.com

https://gitlab.com/keltiotechnology/demo-apps/react-sample-app

keltiotechnology / Sample apps / React Sample App · GitLab

Commencer par cloner le repo :

git clone https://gitlab.com/keltiotechnology/demo-apps/react-sample-app.git

Afin de permettre à Webpack de build le frontend correctement, nous ajustons dans le package.json la valeur de homepage avec le fqdn sur lequel nous souhaitons que le frontend réponde.

Sans cela, les paths vers les assets, js, et css ne seront pas géré correctement.

{
    "name": "mon-app",
    "version": "0.1.0",
    "homepage": "https://react-demo.keltio.fr/",
...
}

Maintenant nous pouvons installer les dépendances de l’application et lancer le build de l’application

npm install
npm run build

Créer un bucket S3

Créer un bucket avec le même nom que le FQDN du site

Bucket name : react-demo.keltio.fr
AWS Region : EU (Paris) eu-west-3

Object Ownership : ACLs disabled (recommended)

Block Public Access settings for this bucket : Block all public access

Bucket Versioning : Enable

Tags :
	env : tp

Upload les fichiers sur le S3

Importer tous les fichiers et dossier présent dans le dossier build

Une fois uploadé, vous devez avoir dans votre bucket le contenu suivant :

Créer un certificat sur AWS Cert Manager

Afin d’exploser le site web en https, il est nécessaire de créer un certificat qui sera utiliser par la suite par Cloudfront.

Cloudfront étant un service global, la création du certificat doit être réalisée sur la région us-east-1

Une fois la région us-east-1 sélectionné, voici les informations à fournir dans la console pour créer le certificat :

FQDN certificat : react-demo.keltio.fr
Validation method : DNS validation - recommended
Key algorithm : RSA 2048

Créer les records de validation du certificat dans le provider DNS

Ayant choisi la méthode de validation par DNS, après avoir créé le certificat sur AWS vous pourrez constater que son statut est à Pending validation.

Nous allons donc devoir créer un record DNS pour montrer à AWS que nous sommes bien le propriétaire du nom de domaine et ainsi valider le certificat.

Pour savoir quel record DNS à créer, il suffit de cliquer sur l’ID du certificat, vous pourrez voir un tableau équivalent (si les records ne s’affichent pas bien vous pouvez recharger la page, AWS met un peu de temps après avoir créé le certificat pour retourner les records)

Maintenant vous pouvez ajouter les records dans votre serveur DNS.

Par exemple sous Cloudflare :

La propagation de DNS peut prendre quelques minutes

Vous pouvez valider que le record est bien créé est effectif en tapant dans votre terminal :

Une fois propagé le statut du certificat passera automatiquement à Issued :

Créer une distribution Cloudfront

Origin domain : react-demo.keltio.fr.s3.eu-west-3.amazonaws.com
Origin path: /
Origin access : Origin access control settings (recommended)

Create control setting

Name : react-demo.keltio.fr.s3.eu-west-3.amazonaws.com
Description : Allow cloudfront to access s3 content
Signing behavior :
Sign requests (recommended)
Origin type : S3
Enable Origin Shield : Yes
Origin Shield region : Europe (Ireland) eu-west-1

Default cache behavior
Path pattern : Default (*)
Compress objects automatically : Yes

Viewer
Viewer protocol policy : Redirect HTTP to HTTPS

Allowed HTTP methods : GET, HEAD

Restrict viewer access : No

Cache key and origin requests : Cache policy and origin request policy (recommended)
Cache policy : CachingOptimized

Response headers policy : CORS-and-SecurityHeadersPolicy

Settings
Use all edge locations (best performance)

Alternate domain name (CNAME) - optional : react-demo.keltio.fr

Custom SSL certificate - optional : <l'id du certificat que l'on vient de créer>

Security policy : TLSv1.2_2021 (recommended)

Default root object - optional : index.html

Supported HTTP versions : HTTP/2

Créer un record DNS pointant sur la distribution Cloudfront

Donner les accès à Cloudfront d’accéder au bucket

Dans le bucket S3 dans la partie politique d’accès, il faut maintenant donner le droit à la distribution Cloudfront d’accéder aux fichier présent dans le bucket.

Pour ce faire, il suffit d’ajouter cette configuration :

{
    "Version": "2012-10-17",
    "Statement": {
        "Sid": "AllowCloudFrontServicePrincipalReadOnly",
        "Effect": "Allow",
        "Principal": {
            "Service": "cloudfront.amazonaws.com"
        },
        "Action": "s3:GetObject",
        "Resource": "arn:aws:s3:::<S3 bucket name>/*",
        "Condition": {
            "StringEquals": {
                "AWS:SourceArn": "arn:aws:cloudfront::<AWS account ID>:distribution/<CloudFront distribution ID>"
            }
        }
    }
}

Ajouter une règle de redirection dans la distribution Cloudfront

Critères d’acceptation pour valider le TP

Le site React doit être accessible en https sur le fqdn choisi pendant le TP