Article de blog AWS Cloud CV Challenge, partie 1

"Créer un site Web cloud natif avec AWS : de l'hébergement statique au contenu dynamique"

1. Présentation
2. Configurer un site Web statique avec S3
3. Sécuriser le site Web avec CloudFront
4. Configurer DNS avec Route 53
5. Mise en place d'un compteur de visiteurs
   • DynamoDB pour le stockage de données
   • Lambda pour la logique backend
   • API Gateway pour les points de terminaison HTTP
6. Intégration JavaScript frontend
7. Test du code JavaScript
8. Conclusion

Créer un site Web cloud natif avec AWS : de l'hébergement statique au contenu dynamique

J'ai entendu parler du Cloud Resume Challenge en surfant sur Reddit il y a quelques années. En tant que passionné de technologie mais ne travaillant pas quotidiennement sur AWS, le défi m'a intrigué. 

Le Cloud Resume Challenge, créé par Forrest Brazeal, est un projet en plusieurs étapes qui consiste à créer une application full-stack utilisant divers services AWS. Il est conçu pour mettre en valeur les compétences cloud grâce à une mise en œuvre pratique, ce qui en fait un excellent exercice même pour ceux d'entre nous déjà sur le terrain.

Dans cet article de blog, je partagerai mon expérience en complétant le Cloud Resume Challenge, en détaillant les services AWS que j'ai utilisés, l'architecture que j'ai implémentée et les informations que j'ai acquises. Que vous soyez un professionnel du cloud cherchant à perfectionner vos compétences ou quelqu'un curieux des applications AWS du monde réel, j'espère que vous trouverez de la valeur dans mon parcours à travers ce projet.

Table des matières

1. Présentation
2. Configurer un site Web statique avec S3
3. Sécuriser le site Web avec CloudFront
4. Configurer DNS avec Route 53
5. Mise en place d'un compteur de visiteurs
6. Intégration JavaScript frontend
7. Test du code JavaScript
8. Conclusion

Introduction

Le développement cloud natif exploite la puissance du cloud computing pour créer des applications évolutives et résilientes. Dans ce guide complet, nous passerons en revue le processus de création d'un site Web cloud natif à l'aide de divers services AWS. Nous commencerons par héberger un site Web statique et ajouterons progressivement des fonctionnalités dynamiques, notamment un compteur de visiteurs. Cet article est parfait pour les débutants qui souhaitent comprendre comment différents services AWS fonctionnent ensemble pour créer un site Web entièrement fonctionnel et évolutif.

Configurer un site Web statique avec S3

Amazon S3 (Simple Storage Service) est un service de stockage d'objets que nous pouvons utiliser pour héberger des sites Web statiques. Voici comment le configurer :

1. Créez un compartiment S3 :

   • Accédez à AWS Management Console et accédez à S3.
   • Cliquez sur « Créer un bucket » et choisissez un nom globalement unique.
   • Dans les paramètres du bucket, activez « Hébergement de site Web statique ».
   • Définissez le document d'index sur "index.html".

2. Téléchargez les fichiers de votre site Web :

   • Téléchargez vos fichiers HTML, CSS et JavaScript dans le bucket.
   • Assurez-vous que les fichiers disposent d'autorisations de lecture publiques.

3. Configurer la stratégie du compartiment :

   • Dans les autorisations du bucket, ajoutez une stratégie de bucket pour autoriser l'accès public en lecture :

   {
       "Version": "2012-10-17",
       "Statement": [
           {
               "Sid": "PublicReadGetObject",
               "Effect": "Allow",
               "Principal": "*",
               "Action": "s3:GetObject",
               "Resource": "arn:aws:s3:::your-bucket-name/*"
           }
       ]
   }

Remplacez « your-bucket-name » par le nom réel de votre bucket.

Sécuriser le site Web avec CloudFront

CloudFront est le service Content Delivery Network (CDN) d'AWS. Nous l'utiliserons pour servir notre site Web via HTTPS et améliorer les performances :

1. Créez une distribution CloudFront :

   • Dans la console AWS, accédez à CloudFront et cliquez sur « Créer une distribution ».
   • Définissez le domaine d'origine sur le point de terminaison du site Web de votre compartiment S3.
   • Activez « Redirection HTTP vers HTTPS ».

2. Configurer le certificat SSL/TLS :

   • Utilisez AWS Certificate Manager (ACM) pour créer un certificat SSL/TLS gratuit pour votre domaine.
   • Dans les paramètres de votre distribution CloudFront, sélectionnez ce certificat.

3. Configurer l'identité d'accès à l'origine (OAI) :

   • Créez un OAI et associez-le à votre distribution.
   • Mettez à jour votre politique de compartiment S3 pour autoriser uniquement l'accès à partir de cet OAI.

Configuration du DNS avec Route 53

Route 53 est le service Web DNS (Domain Name System) d'AWS. Nous l'utiliserons pour mapper notre nom de domaine à notre distribution CloudFront :

1. Créer une zone hébergée :

   • Dans Route 53, créez une zone hébergée pour votre domaine.

2. Mettre à jour les serveurs de noms :

   • Si votre domaine est enregistré ailleurs, mettez à jour les serveurs de noms de votre registraire pour utiliser les serveurs de noms de Route 53.

3. Créer des jeux d'enregistrements :

   • Create an A record for your domain, aliasing it to your CloudFront distribution.
   • If needed, create a CNAME record for www subdomain.

Implementing a Visitor Counter

For our visitor counter, we'll use a serverless architecture with DynamoDB, Lambda, and API Gateway.

DynamoDB for Data Storage

DynamoDB is a NoSQL database service. We'll use it to store our visitor count:

1. Create a DynamoDB table:
   • Name: "VisitorCount"
   • Partition key: "id" (String)
   • Add an item with id "visitors" and an attribute "count" set to 0.

Lambda for Backend Logic

Lambda allows us to run code without provisioning servers. Our Lambda function will update the visitor count:

1. Create a Lambda function:
   • Runtime: Node.js 20.x
   • Code:

   const { DynamoDBClient, UpdateItemCommand } = require('@aws-sdk/client-dynamodb');

   const client = new DynamoDBClient();

   exports.handler = async (event) => {
       const params = {
           TableName: process.env.TABLE_NAME,
           Key: { id: { S: 'visitors' } },
           UpdateExpression: 'ADD visitorCount :inc',
           ExpressionAttributeValues: { ':inc': { N: '1' } },
           ReturnValues: 'UPDATED_NEW'
       };

       try {
           const command = new UpdateItemCommand(params);
           const data = await client.send(command);

           const visitorCount = data.Attributes.visitorCount.N;

           return {
               statusCode: 200,
               headers: {
                   "Access-Control-Allow-Origin": "https://yourdomain.com",
                   "Access-Control-Allow-Headers": "Content-Type",
                   "Access-Control-Allow-Methods": "OPTIONS,POST"
               },
               body: JSON.stringify({ visitorCount: parseInt(visitorCount) })
           };
       } catch (error) {
           console.error('Error:', error);
           return {
               statusCode: 500,
               headers: {
                   "Access-Control-Allow-Origin": "https://yourdomain.com",
                   "Access-Control-Allow-Headers": "Content-Type",
                   "Access-Control-Allow-Methods": "OPTIONS,POST"
               },
               body: JSON.stringify({ error: 'Failed to update visitor count' })
           };
       }
   };

1. Set up environment variables:

   • Add TABLE_NAME environment variable with your DynamoDB table name.

2. Configure permissions:

   • Give the Lambda function permission to read/write to your DynamoDB table.

API Gateway for HTTP Endpoints

API Gateway allows us to create, publish, and manage APIs. We'll use it to expose our Lambda function:

1. Create a new API:

   • Choose HTTP API type.

2. Create a resource and method:

   • Create a resource named "visitorcount".
   • Add a POST method to this resource, integrating it with your Lambda function.

3. Enable CORS:

   • In the API settings, enable CORS for your domain.

4. Deploy the API:

   • Create a new stage (e.g., "prod") and deploy your API.

Frontend JavaScript Integration

Now, let's integrate our backend with the frontend:

1. Add HTML for the visitor counter:

   <div id="visitor-count">Visitors: <span id="count">0</span></div>

1. Add JavaScript to call our API:

   function updateVisitorCount() {
       fetch('https://your-api-gateway-url/visitorcount', {
           method: 'POST',
           headers: {
               'Content-Type': 'application/json'
           },
           mode: 'cors'
       })
       .then(response => response.json())
       .then(data => {
           document.getElementById('count').textContent = data.visitorCount;
       })
       .catch(error => console.error('Error:', error));
   }

   document.addEventListener('DOMContentLoaded', updateVisitorCount);

Replace 'https://your-api-gateway-url' with your actual API Gateway URL.

Testing the JavaScript Code

To ensure our JavaScript works correctly, we'll add some tests:

1. Install Jest for testing:

   npm install --save-dev jest

1. Create a test file (e.g., visitorCounter.test.js):

   // Mock fetch function
   global.fetch = jest.fn(() =>
     Promise.resolve({
       json: () => Promise.resolve({ visitorCount: 5 }),
     })
   );

   // Import the function to test
   const { updateVisitorCount } = require('./visitorCounter');

   test('updates visitor count correctly', async () => {
     // Set up our document body
     document.body.innerHTML = '<div id="count">0</div>';

     // Call the function
     await updateVisitorCount();

     // Check that the count was updated
     expect(document.getElementById('count').textContent).toBe('5');
   });

1. Run the tests:

   npx jest

Conclusion

In this guide, we've covered how to build a cloud-native website using various AWS services. We've implemented a static website with S3, secured it with CloudFront, set up DNS with Route 53, and created a serverless backend with DynamoDB, Lambda, and API Gateway.

This architecture provides a scalable, secure, and cost-effective solution for hosting websites and web applications. As you become more comfortable with these services, you can expand on this foundation to build even more complex and feature-rich applications.

In the next article, we'll explore how to automate the deployment of this website using CI/CD practices with GitHub Actions.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!