Déployer un site web gratuitement, avec un formulaire de contact qui fonctionne: Sans serveur, CI/CD.

Présentation

Ceci est la suite de notre premier article sur le sans serveur ("Serverless"). Pour pouvoir bien suivre cette deuxième partie de notre exercice vous devez d'abord lire la première partie ici. Dans cette partie, nous allons aborder les services sans serveur ("Serverless") d'AWS et comment ceux-ci sont utilisés.

Prérequis

Avoir un compte Github, vous pouvez créer un compte ici
Avoir un compte Netlify, vous pouvez créer un compte ici.
Avoir un compte AWS (Free tier), vous pouvez creer un compte ici.
Un IDE, de preference Visual studio.

Compétences requises

HTML
CSS
Javascript
Bootstrap
Git

Services AWS

SES (Simple Email Service) cliquez ici pour lire sur ce service d'AWS.
AWS Lambda, qui n'est rien d'autre que la fonction que nous allons ecrire sur la console d'AWS. cliquez ici pour lire plus sur ce service d'AWS.
API Gateway pour créer notre API. cliquez ici pour lire plus sur ce service d'AWS.

Introduction

Après notre première partie où nous avons modifié un template et avions un site web déployé sur Netlify, maintenant, nous voulons faire fonctionner notre formulaire de contact, avec les services mentionés ci-dessus.

Allons-y.

Créons nos Ressources sur AWS.

Puisque nous avons besoin de trois services seulement, alors nous pouvons utiliser la console pour créer toutes nos ressources, mais pour des projets beaucoup plus grands, des methodes plus appropriées sont utilisées. Nous allons introduire l'une des ces methodes dans un autre exercice

Étape 1 : Vérification d'un e-mail

Connectez-vous à la console AWS ici, puis allez dans la section "SES" (Simple Email Service) sous "Services". De là, allez dans "Email Addresses" sur la gauche, cliquez sur " Vérifier une nouvelle adresse e-mail ", et suivez le processus de vérification de l'adresse e-mail. Cela vous permettra d'envoyer des courriels avec votre adresse électronique.

Étape 2 : Création d'une fonction Lambda

Connectez-vous à la console AWS et accédez à la page "AWS Lambda".
Cliquez sur "Créer une fonction".
Choisissez une option pour le modèle de fonction - pour cet exemple, nous allons utiliser "Auteur à partir de zéro".
Donnez un nom à la fonction et choisissez un langage de programmation (Dans notre cas nous allons utilisez Nodejs pour pouvoir continuer avec javascript).

Étape 3 : Création d'une politique

Pour envoyer un email via SES (Amazon Simple Email Service) à partir d'une fonction Lambda, vous devez d'abord créer une politique IAM (Identity and Access Management) pour autoriser la fonction à accéder aux ressources SES. Voici les étapes à suivre :

Connectez-vous à la console AWS et accédez à la page "IAM".
Cliquez sur "Politiques" dans le menu de gauche, puis sur "Créer une politique".
Dans l'onglet "Visualiser", saisissez un nom pour la politique, par exemple "SES-Access-Policy".
Dans l'onglet "JSON", saisissez le code JSON suivant pour autoriser l'accès à SES:

   {
     "Version": "2012-10-17",
     "Statement": [
       {
         "Effect": "Allow",
         "Action": [
           "ses:SendEmail",
           "ses:SendRawEmail"
         ],
         "Resource": "*"
       }
     ]
   }

Ce code JSON autorise la fonction Lambda à envoyer des emails via SES en utilisant les actions SendEmail et SendRawEmail. La politique s'applique à toutes les ressources SES.

Cliquez sur "Enregistrer les modifications" pour enregistrer la politique IAM.

Une fois la politique IAM créée, vous pouvez l'attacher à la fonction Lambda que vous souhaitez utiliser pour envoyer des emails via SES :

Accédez à la page "AWS Lambda" et cliquez sur le nom de la fonction Lambda que vous souhaitez utiliser.
Cliquez sur "Fonctions" dans le menu de gauche, puis sur "Ajouter une autorisation".
Dans la section "Source de l'autorisation", sélectionnez "AWS".
Dans la section "Principal", saisissez le nom de l'utilisateur ou du rôle IAM qui a besoin d'accéder à SES.
Dans la section "Action", sélectionnez "InvokeFunction".
Dans la section "Conditions", cliquez sur "Ajouter une condition" et sélectionnez "Condition de contexte". Dans le champ "Clé", saisissez aws:SourceArn et dans le champ "Valeur", saisissez l'ARN (Amazon Resource Name) de la ressource SES que vous souhaitez utiliser.
Dans la section "Paramètres de la fonction", sélectionnez la politique IAM que vous avez créée précédemment dans la liste déroulante "Politiques existantes".

Une fois que la politique IAM est attachée à la fonction Lambda, vous pouvez utiliser le SDK AWS pour Nodejs pour envoyer des emails via SES.

Étape 4 : REST API avec API Gateway

Voici les étapes pour créer un REST API sur la console AWS et le connecter à une fonction Lambda :

Créez une fonction Lambda en utilisant la console AWS. Vous pouvez créer une fonction Lambda à partir d'un modèle ou en écrivant votre propre code.
Créez un REST API en utilisant le service API Gateway. Pour cela, accédez à la page de service API Gateway et cliquez sur le bouton "Créer une API".
Dans la boîte de dialogue "Créer une API", sélectionnez "REST API" et choisissez le type de protocole de sécurité que vous souhaitez utiliser pour votre API.
Configurez les paramètres de votre API, tels que le nom de l'API, la description, le type de déploiement, etc.
Créez une ressource pour votre API en cliquant sur le bouton "Créer une ressource". Configurez la ressource en définissant son nom, son chemin d'accès, ses méthodes HTTP et ses paramètres.
Ajoutez une méthode de traitement pour chaque méthode HTTP que vous avez définie pour votre ressource. Choisissez "Lambda Function" comme type d'intégration.
Configurez l'intégration Lambda en définissant le nom de la fonction Lambda que vous avez créée précédemment, le chemin d'accès de l'API et les paramètres de l'intégration.
Testez votre API en envoyant des requêtes à l'URL de votre API.
Déployez votre API en créant un déploiement et une étape de déploiement.

Après avoir suivi ces étapes, votre REST API sera connecté à votre fonction Lambda et vous pourrez commencer à utiliser votre API pour interagir avec votre fonction Lambda. Notez que vous devrez également configurer les autorisations et les politiques d'accès pour votre API et votre fonction Lambda afin de garantir la sécurité et la confidentialité de vos données.

Code

Maintenant que nous avons creer nos ressources, il est temps de modifier le code de notre fonction lambda et puis envoyer les requetes depuis

commencons par modifier notre code pour pouvoir envoyer l'email depuis notre function lambda.

Voici un exemple de code que vous pouvez utiliser:

// Charger le kit SDK AWS pour Node.js
const AWS = require('aws-sdk');

// Définir la région et les informations d'identification
AWS.config.update({
  region: 'us-east-1',
  credentials: new AWS.Credentials('VOTRE_ACCESS_KEY', 'VOTRE_SECRET_KEY')
});

// Créer un nouvel objet SES
const ses = new AWS.SES();

// Définir les paramètres de l'e-mail
const params = {
  Destination: {
    ToAddresses: ['destinataire@example.com']
  },
  Message: {
    Body: {
      Text: {
        Data: 'Contenu de l\'e-mail en texte brut'
      }
    },
    Subject: {
      Data: 'Objet de l\'e-mail'
    }
  },
  Source: 'expediteur@example.com',
};

// Envoyer l'e-mail en utilisant Amazon SES
ses.sendEmail(params, function(err, data) {
  if (err) {
    console.log(err, err.stack);
  } else {
    console.log('E-mail envoyé avec succès:', data);
  }
});

N'oubliez pas de remplacer us-east-1 par la région que vous utilisez, VOTRE_ACCESS_KEY et VOTRE_SECRET_KEY par vos propres informations d'identification, destinataire@example.com par l'adresse e-mail du destinataire, expediteur@example.com par l'adresse e-mail de l'expéditeur, et de personnaliser le contenu de l'e-mail.

Maintenant, Place au front-end.

Voici un exemple de code qui utilise la méthode fetch de JavaScript pour envoyer un formulaire en tant que requête POST :

HTML :

<form id="myForm">
  <input type="text" name="name" placeholder="Nom">
  <input type="email" name="email" placeholder="Adresse e-mail">
  <button type="submit">Envoyer</button>
</form>

const form = document.getElementById('myForm');

form.addEventListener('submit', function(event) {
  event.preventDefault();

  const name = form.elements.name.value;
  const email = form.elements.email.value;

  // Créer un objet avec les données du formulaire
  const formData = {
    name: name,
    email: email
  };

  // Envoyer la requête POST
  fetch('URL_DE_L_API', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(formData)
  })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));
});

Dans cet exemple, nous avons sélectionné le formulaire en utilisant son ID, ajouté un événement de soumission au formulaire, récupéré les valeurs des champs du formulaire, créé un objet avec les données du formulaire, puis envoyé une requête POST en utilisant la méthode fetch. Nous avons également défini le type de contenu de la requête à application/json et converti l'objet de données en JSON à l'aide de la méthode JSON.stringify. Enfin, nous avons ajouté des fonctions de rappel pour traiter la réponse de la requête et les erreurs potentielles. N'oubliez pas de remplacer URL_DE_L_API par l'URL de l'API à laquelle vous souhaitez envoyer la requête POST.

Conclusion

Puisque le but de ce tutoriel n'est pas d'aller au fond sur des concept sous-jascents comme par exemple: comment tester un API sur Postman, DOM avec javascript pour modifier notre code, nous allons vous laisser le faire de vous-même. Maintenant, nous pouvons tester notre envoi d'email en local et puis pousser notre code sur Github, et il sera mis a jour automatiquement sur Netlify. Pour ceux qui ont fait des portfolio comme moi, vous pouvez acheter un domaine personalisé comme le mien (https://abdoulaye.pro/) que j'ai eu sur namecheap à moins de 5 $ 😁.

Ceci conclu notre exercie et merci d'avoir lu.

Abdoulaye's Blog