• 20 hours
  • Medium

Free online content available in this course.

course.header.alt.is_certifying

Got it!

Last updated on 7/5/24

Stockez vos pages web dans un stockage d’objets

Félicitations ! On a réussi à mettre en place les composants pour stocker et délivrer les futurs commentaires que les lecteurs pourront écrire et lire.

Oui, mais qu’est-ce qu’ils vont commenter ? 😅

Bonne question. Maintenant, il faut penser aux pages web qui délivrent le contenu des articles composés de textes et d’images.

Dans la formation OpenClassrooms "Découvrez le cloud avec AWS” vous avez déjà découvert S3, qui vous permet de créer des compartiments dans lesquels on peut stocker des objets comme les images de notre site web. Dans ce chapitre, nous irons plus loin dans les fonctionnalités de S3.

Explorez les fonctionnalités avancées

Voici des fonctionnalités S3 importantes pour la certification :

  • Chargement partitionné (multipart upload) : permet de paralléliser le chargement d’un fichier volumineux (>5 GB) en un ensemble de parties. 

Un chemin mène des icônes ‘utilisateur’ et ‘fichier’ (A) vers plusieurs parties qui mènent dans le S3.
Fonctionnement du chargement partitionné

A - Avec AWS SDK ou CLI, le client choisit le chargement partitionné pour découper son gros fichier en petites parties (min 5 MB). Le partitionnement est recommandé à partir de 100 MB, et obligatoire à partir de 5 GB

Avec S3 Transfer Acceleration, rendez votre chargement plus rapide si le compartiment visé est dans une région très éloignée géographiquement.

Un chemin (A) va de l’utilisateur à Paris vers  l’emplacement périphérique à Paris (C), puis vers S3 région Singapour (B).
Fonctionnement de S3 Transfer Acceleration

A -  À l’intérieur du réseau Internet.

B - À l’intérieur du réseau optimisé AWS, le débit est plus grand et les latences plus courtes que sur Internet.

C -  Un datacenter AWS conçu pour fournir des services avec la latence la plus faible possible. Il y en a plusieurs dans le monde. Vous êtes redirigé vers le plus proche !

  • Paiement par le demandeur (request pays) : par défaut, le propriétaire d’un compartiment paie la facture du trafic réseau lors du téléchargement d’objets entre votre compartiment et un client (demandeur). Avec cette fonctionnalité, la facture est reportée au demandeur.

Compartiment (A) est relié avec le demandeur (B) par une flèche (C).
Téléchargement d’objets payé par le demandeur.

A - Le propriétaire paie la facture de stockage sur S3.

B - Le demandeur paie la facture réseau. Le demandeur doit être obligatoirement authentifié dans AWS. L'accès anonyme au compartiment n'est plus autorisé.

C - Téléchargement d’un objet.

  • Point d’accès (access point) : Utiliser des stratégies de compartiment (bucket policies) pour gérer des politiques de contrôle d'accès uniques pour plusieurs utilisateurs et groupes devient complexe ! Avec les points d'accès S3, vous pouvez facilement en créer pour chaque point.

Les flèches relient les documentalistes et les journalistes avec les point d’accès correspondantes (A), qui, à leur tour, sont liées avec des préfixes dans le compartiment S3.
Fonctionnement des points d’accès avec un compartiment S3

A - Pour chaque point d’accès, définissez facilement les politiques d’accès pour le groupe d’utilisateurs concerné. Chaque point d'accès obtient son propre DNS.

  • S3 Object Lambda : vous permet d’effectuer un traitement spécifique sur l’objet qui est en cours de téléchargement.

Compartiment (B)est liée par une flèche à double sens avec le point d’accès. Celui-ci est lié avec deux lambdas (A), dont les chemins mènent vers les S3 Object Lambdas correspondantes et puis vers les clients.
Fonctionnement de S3 Object Lambda.

A - Chaque Lambda pour un traitement spécifique ; par exemple : réduire la taille d’une image, convertir un fichier XML en fichier JSON… 

B - Plus besoin de créer plusieurs buckets pour différents besoins.

  • Les opérations Batch S3 (batch operations) : permettent d’effectuer des opérations par lot à grande échelle sur des objets Amazon S3, par exemple chiffrer les objets non chiffrés. Avec cette méthode, vous n’avez pas à programmer la gestion des reprises après échec d’un objet !

  • Les notifications d'événement (event notifications) : déclenchent des notifications lorsque certains événements se produisent dans votre compartiment S3 (ci-dessous la liste des évènements).

Les services Lambda, SNS, et SQS peuvent recevoir ces notifications.

Un chemin mène du fichier vers un bucket (créer un objet). Trois flèches marquées ‘notification’ mènent du bucket vers A - Lambda, B - SNS, C - SQS.
Déclenchement de notifications lors d’un dépôt d’un objet dans un compartiment S3

A - Appliquer un traitement, par exemple réduire la taille d’une nouvelle image.

B - SNS : service de messagerie sans serveur.

C - SQS : service de file d'attente de messagerie sans serveur.

  • Journalisation des accès S3 (access logging) : vous permet d’auditer toutes les demandes soumises à un compartiment à partir de la sauvegarde des logs dans un autre compartiment.

Un chemin mène du client vers compartiment 1 et en arrière (demandes), puis de compartiment 1 vers compartiment 2 (Journalisation des demandes).
Fonctionnement de la journalisation des accès S3.

A - Le compartiment de journalisation doit être obligatoirement un autre, sinon vous allez avoir une boucle infinie d'événements !! 

  • S3 Select et Glacier Select : permettent d’effectuer des requêtes SQL directement dans S3 ou Glacier (voir section 3) en effectuant un filtrage côté serveur. Vous économisez du transfert réseau et des coûts CPU côté client.

En haut, la situation avant. En bas, la situation avec S3 select : 400% plus rapide et 80% moins cher.
Fonctionnement de S3 Select

Transformez un bucket en site web statique

Comme indiqué sur l’architecture ci-dessous, transformons un compartiment S3 en site web statique. Cela nous sera utile pour délivrer les pages du site web The Green Earth Post.

Zoom sur l’architecture du site web The Green Earth Post. En rouge: stocker des images et créer une page web statique avec S3
Zoom sur l’architecture du site web The Green Earth Post. En rouge: stocker des images et créer une page web statique avec S3.

Comme indiqué dans l’image suivante, grâce au compartiment, le client récupère les pages web statiques (html, css, Javascript) pour l’affichage et récupère/poste le contenu dynamique depuis/vers le serveur d’API.

Étape 1 : une flèche à deux sens entre compartiment site web statique et le client. Étape 2 : une flèche à deux sens entre client et EC2/Serveur d’API dont une autre flèche mène vers RDS.
Via les pages web, le client peut interroger le serveur d’API pour récupérer/poster le contenu dynamique (par exemple des commentaires).

1 - Client récupère le contenu statique (code HTML, CSS, JavaScript, images).

2 - Le code JavaScript envoie des requêtes au serveur d’API pour récupérer le contenu dynamique (commentaires, publicité, actualités en direct, notifications...).

Je vais vous montrer comment faire avec une première maquette de site :

1. Créez un compartiment, par exemple `site-web-statique`

Capture d’écran affichant le texte
Compartiment 'site-web-statique'

2. Créez sur votre poste deux fichiers `index.html` et `error.html` dont les contenus sont :

<!DOCTYPE html>

<html>

    <head>

        <title>Exemple</title>

    </head>

    <body>

        <p>Voici la premiere maquette de mon site web !</p>

    </body>

</html>

3. Chargez ces fichiers dans le compartiment.

Screenshot de l'onglet 'objets' dans le compartiment
Chargement d'objets dans le compartiment

4. Transformez le compartiment en site statique.

Capture d’écran de la page site-web-statique Les boutons Propriétés en haut à gauche et Modifier en bas à droite sont encadrés en rouge.
Propriétés du compartiment

5. Indiquez le fichier `index.html` comme page d’accueil par défaut du site, et `error.html` comme page à retourner en cas d’erreur.

Capture d’écran. Remplir les champs 'document d'index' et 'document d'erreur'
Modification de l'hébergement de site Web statique

6. S3 vous génère un point de terminaison (url).

Capture d’écran du même onglet
Point de terminaison

7. En accédant à cette url, vous obtiendrez une erreur.

Capture d’écran affichant le message d’erreur 403
Message d'erreur

8. Pour corriger l’erreur, autorisez votre compartiment à être accessible publiquement.

Screenshot de l'onglet de parametres d'accès public sur la page 'authorisations'
Bloquer l'accès public
Screenshot de l'onglet 'modifier Bloquer l'accès public'
Modification de l'accès public

9. Puis, rendez-vous à la section “stratégie de compartiment”.

Capture d’écran de la page site-web-statique. Le deuxième bouton en haut à gauche “Propriétés” est encadré en rouge.
Stratégie de compartiment

Et ajoutez la stratégie suivante pour autoriser l’accès en lecture aux fichiers de votre bucket :

{

    "Version": "2012-10-17",

    "Statement": [

        {

            "Sid": "Statement1",

            "Effect": "Allow",

            "Principal": "*",

            "Action": "s3:GetObject",

            "Resource": "arn:aws:s3:::site-web-statique/*"

        }

    ]

}

10. Accédez au site maquette.

Capture d’écran de la première maquette du site web.
Maquette du site

La maquette est enfin disponible sur Internet, on peut s’intéresser au mécanisme CORS (Cross-origin resource sharing). Sans ce mécanisme, les applications web clientes chargées dans un domaine (url) particulier ne peuvent pas interagir avec les ressources d'un autre domaine (images, vidéos…).

les flèches en deux sens relient le client web avec des domaines 1 et 2.
Problématique résolue avec le mécanisme CORS

A - Redirection pour récupérer d’autres images, des vidéos, par exemple.

B - Si Domaine 2 n’active pas le mécanisme CORS, alors il n’accepte pas la redirection, et le client web reçoit un code d’erreur HTTP.

Dans le compartiment correspondant au Domaine 2, il faudra activer le CORS comme ci-dessous.

Capture d’écran du modification du parametre 'CORS'  dans l'onget 'propriétés'
Partage des ressources entre origines (CORS)

Voici un exemple de configuration à ajouter :

[

    {

        "AllowedHeaders": [

            "*"

        ],

        "AllowedMethods": [

            "POST",

            "GET"

        ],

        "AllowedOrigins": [

            "https://mon-site.fr",

        ],

        "ExposeHeaders": [],

        "MaxAgeSeconds": 300

    }

]

Le schéma suivant récapitule le mécanisme CORS entre deux compartiments :

Schéma illustrant les échanges entre Origin, un ordinateur et Cross Origin : 1 - Requête du premier site 2 - Redirection 3 - Réponse de vérification 4 - Requête du deuxième site 5 - Réponse
Fonctionnement du mécanisme CORS entre deux compartiments
Schéma illustrant les 5 échanges entre client à droite, serveur au milieu, API S3 en haut à droite et compartiment en bas à droite.
Fonctionnement d’une URL présignée

À vous de jouer !

Maintenant, il est temps de délivrer les pages de notre site web.

  • Télécharger le projet GitHub sur votre poste.

  • Remplacez la valeur du champ apiServerUrl par l’adresse IP publique de l’instance EC2 qui héberge le serveur d’API.

  • Créez un compartiment S3 avec la configuration par défaut.

  • Copiez-collez le contenu du dossier front_end du projet GitHub dans le compartiment S3.

  • Transformez le compartiment S3 en site web Static.

  • Assurez-vous que vous pouvez poster et lire les commentaires dans la zone Commentaires de l’article Agroecology Article du site web.

En résumé

  • Le service S3 offre plusieurs fonctionnalités avancées :

    • Chargement partitionné 

    • S3 Transfer Acceleration 

    • Paiement par le demandeur 

    • Point d’accès 

    • S3 Object Lambda 

    • Opérations Batch S3 

    • Notifications d'événement 

    • Journalisation des accès S3 

    •  S3 Select & Glacier Select

  • Un compartiment S3 peut être transformé en site web static.

  • Le mécanisme CORS permet d'accéder à des ressources d'un serveur situé sur une autre origine que le site courant.

  • Une URL présignée est une méthode pour accéder temporairement et publiquement à un compartiment.

Maintenant, voyons comment optimiser le coût de stockage avec le service Amazon S3 !

Example of certificate of achievement
Example of certificate of achievement