Article original : How to Build an Online Résumé on AWS Using S3, Route 53, CloudFront, and ACM

Par Amber Israelsen

Si vous êtes nouveau sur AWS, vous pouvez probablement apprécier le sentiment de surcharge qui vient de la tentative de comprendre tous les différents services (sérieusement, comme, des centaines d'entre eux). À quoi servent-ils tous, et comment fonctionnent-ils ensemble ?

Et une fois que vous avez maîtrisé quelques compétences de base, le prochain défi est de démontrer ces compétences à un employeur potentiel. Quel type de projet pouvez-vous mettre en avant sur votre CV, sans vous ruiner ?

Dans ce tutoriel pratique, vous obtiendrez de l'aide pour ces deux choses en construisant votre CV réel sur AWS, en suivant ces étapes :

  • Écrire le code de votre CV en utilisant HTML, CSS et JavaScript
  • Télécharger vos fichiers dans un bucket Simple Storage Service (S3) que vous configurez pour l'hébergement de sites web statiques, avec un accès public
  • Utiliser Route 53 pour configurer un domaine personnalisé pour votre CV
  • Configurer un certificat TLS/SSL avec AWS Certificate Manager (ACM)
  • Créer une distribution CloudFront (qui pointe vers les fichiers dans S3) où vous pouvez appliquer le certificat.

Voici ce que nous allons construire :

Image Exemple de CV sur AWS, utilisant S3, CloudFront, Certificate Manager et Route 53

À la fin de ce tutoriel, vous aurez plus qu'un simple CV en ligne. Vous aurez un projet concret que vous pourrez utiliser pour impressionner vos amis, votre famille, votre réseau et vos employeurs potentiels.

Pour une démonstration en direct du projet, consultez cette vidéo :

Table des matières

Ce dont vous avez besoin pour suivre

Pour compléter ce tutoriel avec succès, vous aurez besoin des éléments suivants :

  • Un compte AWS : Vous pouvez en créer un gratuitement (bien qu'il nécessite une carte de crédit pour la validation).
  • Expérience de base : Avoir une certaine expérience de base avec AWS rendra le tutoriel plus facile, mais vous devriez toujours pouvoir suivre même si vous êtes un débutant complet.
  • Permissions appropriées : Je suggère de vous connecter en tant qu'utilisateur IAM avec des privilèges d'administrateur, ou d'utiliser votre compte root (bien que je sois obligé de dire que travailler dans votre compte root au quotidien n'est pas recommandé/n'est pas une meilleure pratique).

Mais d'abord, combien cela coûtera-t-il ?

Avant d'aller trop loin, décomposons les différents services et ce qu'ils coûteront.

Si vous souhaitez tout supprimer après le tutoriel, assurez-vous de consulter cette section vers la fin de cet article. Je recommande également de configurer un budget AWS afin de pouvoir limiter les dépenses et être averti si vous allez les dépasser (pas de factures surprises, s'il vous plaît !).

  • S3 : Utilisé pour héberger les fichiers du site web. Si vous êtes toujours dans le niveau gratuit AWS, il ne devrait y avoir aucun coût. En dehors du niveau gratuit, le coût devrait être minimal, de l'ordre de quelques centimes.
  • Route 53 : Si vous décidez d'acheter un nom de domaine via Route 53 (optionnel – vous pouvez également "apporter votre propre" nom de domaine d'un autre fournisseur), cela coûtera 10 $ ou plus. Vous aurez également besoin d'une zone hébergée, ce qui vous coûtera 50 centimes par mois. Et les requêtes Route 53 (quand quelqu'un visite votre domaine) coûteront 40 centimes par million de requêtes.
  • AWS Certificate Manager : Un certificat TLS/SSL via ACM est gratuit.
  • CloudFront : Dans le niveau gratuit, il n'y a aucun coût. En dehors du niveau gratuit, cela dépendra du trafic, mais pour nos besoins, cela coûtera probablement seulement quelques centimes. Consultez la page de tarification complète pour plus d'informations.

Créer le code (HTML, CSS, JavaScript) pour votre CV

Cette section est l'endroit où vous pouvez laisser libre cours à votre créativité (et à vos compétences en codage). Rien ici n'est spécifique à AWS – c'est juste du bon vieux développement web.

Vous utiliserez finalement un bucket S3 pour héberger les fichiers de votre CV (HTML, CSS et JavaScript). S3 ne peut héberger qu'un site web statique, ce qui signifie que vous ne pouvez pas inclure quoi que ce soit qui nécessite du code côté serveur. Mais du contenu front-end toute la journée.

Je ne serai pas trop prescriptif pour le code que vous utilisez ici – c'est votre CV, après tout. Mais vous voudrez mettre en avant les éléments "habituels" du CV : historique de l'emploi, éducation, compétences/certifications, et peut-être des choses comme les honneurs/récompenses ou les loisirs pour vous rendre plus humain.

Si vous souhaitez lister des compétences en HTML, CSS et JavaScript sur votre CV, vous voudrez idéalement coder cette partie à la main (clin d'œil, pas d'aide de ChatGPT !), mais vous êtes également libre d'utiliser mon code ci-dessous comme point de départ.

Fichier index.html

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CV en ligne - Votre Nom</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <header>
            <img src="headshot.jpg" alt="Photo de profil" class="headshot">
            <h1 id="name">Nom</h1>
            <p id="contactInfo">Localisation | Email</p>
        </header>
        <section id="employmentHistory">
            <h2>Historique de l'emploi</h2>
            <div id="timeline"></div> <!-- Placeholder pour le tableau JavaScript -->
        </section>
        <section id="education">
            <h2>Éducation</h2>
            <ul>
                <li>Diplôme | Université (Année)</li>
                <li>Diplôme | Université (Année)</li>
                <!-- Ajoutez plus d'éléments de liste si nécessaire -->
            </ul>
        </section>
        <section id="skills">
            <h2>Compétences/Certifications</h2>
            <ul>
                <li>Compétence 1</li>
                <li>Compétence 2</li>
                <li>Compétence 3</li>
                <li>Compétence 4</li>
                <!-- Ajoutez plus d'éléments de liste si nécessaire -->
            </ul>
        </section>
    </div>
    <script src="script.js"></script>
</body>
</html>

Fichier styles.css

/* Réinitialisation de base pour le padding et la margin de tous les éléments */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* Style du corps */
body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    background-color: #f4f4f4;
}

/* Conteneur pour centrer le contenu */
.container {
    width: 80%;
    margin: auto;
    overflow: hidden;
    padding: 20px;
}

/* Style de l'en-tête */
header {
    background: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
}

/* Style de l'image et du nom de l'en-tête */
.headshot {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    display: block;
    margin: 20px auto;
}

header h1 {
    margin-bottom: 10px;
}

/* Style des informations de contact */
#contactInfo {
    font-size: 1.1em;
    margin-bottom: 20px;
    color: #fff; 
    padding: 15px;
}


/* Style de la section pour l'emploi, l'éducation et les compétences */
section {
    background: #fff;
    margin: 20px 0;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

section h2 {
    margin-bottom: 10px;
}

/* Style de la timeline */
#timeline .entry {
    border-left: 3px solid #333;
    margin-bottom: 5px;
    cursor: pointer;
}

#timeline .entry-header {
    background: #e2e2e2;
    padding: 10px;
    margin-left: -3px; 
}

#timeline .entry-header:hover {
    background: #ccc; 
    color: #333; 
}

/* Style pour le contenu de la description du travail */
#timeline .entry-content p {
    padding: 5px 10px;
    background: #f9f9f9;
    border-left: 3px solid #333;
    display: block; 
}

/* Style de la liste pour l'éducation et les compétences */
section ul {
    list-style: inside square;
    padding: 0 20px;
}

section ul li {
    padding: 2px 0;
}

/* Ajustements pour la classe active */
.entry.active .entry-header {
    background-color: #e2e2e2; 
    color: #333; 
}

.entry.active .entry-content {
    display: block; 
}

/* Indice visuel pour les éléments cliquables */
.entry .entry-header:after {
    content: ' (cliquer pour développer)';
    font-size: 0.8em;
    color: #666;
}

.entry.active .entry-header:after {
    content: ' (cliquer pour réduire)';
    font-size: 0.8em;
    color: #666; 
}

Fichier script.js

// Utilisé sur le CV pour rendre l'historique de l'emploi interactif (chaque emploi est cliquable)
document.addEventListener('DOMContentLoaded', function () {
    // Tableau de placeholder avec les données de l'historique de l'emploi
    const employmentHistory = [
        { id: 1, title: 'Titre du poste', company: 'Nom de l\'entreprise', years: 'Année - Année', description: 'Description de ce que vous avez fait' },
        { id: 2, title: 'Titre du poste', company: 'Nom de l\'entreprise', years: 'Année - Année', description: 'Description de ce que vous avez fait' },
        { id: 3, title: 'Titre du poste', company: 'Nom de l\'entreprise', years: 'Année - Année', description: 'Description de ce que vous avez fait' }
        // Ajoutez plus d'entrées si nécessaire
    ];

    const timeline = document.getElementById('timeline');

    // Créer les entrées de la timeline
    employmentHistory.forEach(job => {
        // Conteneur d'entrée pour le travail
        const entry = document.createElement('div');
        entry.className = 'entry';
        entry.id = 'entry-' + job.id;

        // En-tête de titre pour le travail
        const header = document.createElement('div');
        header.className = 'entry-header';
        header.innerText = job.title;

        // Conteneur de contenu pour le travail, initialement caché
        const content = document.createElement('div');
        content.className = 'entry-content';
        content.innerHTML = `<strong>Entreprise :</strong> ${job.company}<br>
                             <strong>Années :</strong> ${job.years}<br>
                             <p>${job.description}</p>`;
        content.style.display = 'none';

        // Ajouter l'en-tête et le contenu à l'entrée
        entry.appendChild(header);
        entry.appendChild(content);

        // Écouteur d'événement pour basculer la visibilité du contenu
        header.addEventListener('click', function () {
            // Vérifier si le contenu de l'en-tête cliqué est actuellement affiché
            const isContentShown = content.style.display === 'block';
            // Masquer tout le contenu ouvert
            document.querySelectorAll('.entry-content').forEach(el => {
                el.style.display = 'none'; // Masquer le contenu
            });
            // Désactiver tous les en-têtes
            document.querySelectorAll('.entry').forEach(el => {
                el.classList.remove('active'); // Supprimer la classe active
            });

            if (!isContentShown) {
                // Si ce n'était pas affiché avant, l'afficher
                content.style.display = 'block';
                entry.classList.add('active');
            } // Si c'était affiché, il sera masqué dans le cadre de la boucle ci-dessus
        });

        timeline.appendChild(entry);
    });
});

Créer un bucket S3 et le configurer pour l'hébergement de sites web statiques et l'accès public

Maintenant que vous avez vos trois fichiers de code (plus n'oubliez pas un "headshot.jpg" pour afficher votre visage souriant), vous avez besoin d'un endroit pour les mettre.

Dans AWS, S3 est une excellente option pour le stockage d'objets (lire : fichiers) peu coûteux. Et si vous n'utilisez que du code côté client comme vous le faites, alors vous pouvez configurer S3 pour l'hébergement de sites web statiques.

Créer un bucket S3

Dans la Console de gestion AWS, naviguez vers S3.

Image Naviguer vers S3

Cliquez sur Créer un bucket.

Image Créer un nouveau bucket

Entrez les détails de votre bucket.

  • Nom du bucket : IMPORTANT ! Si vous prévoyez d'utiliser un domaine personnalisé pour votre CV, alors ce nom de bucket doit correspondre exactement au nom de domaine. Par exemple, j'utiliserai "amberaws.com" donc le nom de mon bucket doit être "amberaws.com". Si vous utilisez un nom différent, vous rencontrerez des problèmes lorsque vous arriverez à la partie Route 53 du tutoriel.
  • Région AWS : Vous pouvez choisir n'importe quelle région, mais je recommande de choisir celle qui est la plus proche de vous.
  • Propriété de l'objet : Laissez le défaut ACLs désactivés (recommandé).

Image Entrez le nom du bucket, la région et la propriété de l'objet

En faisant défiler vers le bas, désélectionnez le paramètre pour Bloquer tout accès public. NOTE : Dans la plupart des scénarios, cela n'est pas recommandé, comme vous le verrez dans l'avertissement que vous recevez lorsque vous le désactivez. Mais parce que vous créez un CV public que vous voulez ouvrir au monde, alors désactiver cela est approprié.

Image Désélectionnez l'option pour bloquer tout accès public, puis reconnaissez le paramètre

Utilisez les valeurs par défaut pour le reste des paramètres du bucket, puis cliquez sur Créer un bucket.

Image Sélectionnez les valeurs par défaut pour le reste des paramètres du bucket, puis créez le bucket

Vous avez maintenant un bucket vide, mais il n'est pas tout à fait prêt pour l'hébergement de sites web. Vous devrez apporter quelques mises à jour supplémentaires.

Activer l'hébergement de sites web statiques

Pour que S3 puisse servir vos fichiers en tant que site web, vous devrez activer cela sur le bucket.

Cliquez sur le bucket que vous venez de créer et allez dans l'onglet Propriétés.

Image Naviguer vers l'onglet Propriétés du bucket

Faites défiler tout en bas de la page, et dans la section Hébergement de sites web statiques, cliquez sur Modifier.

Image Modifier le paramètre d'hébergement de sites web statiques

Sélectionnez Activer. Cela ouvrira des options supplémentaires.

Image Activer l'hébergement de sites web statiques

Pour le Document d'index, entrez index.html. Cela spécifie la page d'accueil par défaut pour le site (votre code HTML pour votre CV). Ensuite, cliquez sur Enregistrer les modifications.

Image Spécifiez la page d'accueil par défaut (index.html) et enregistrez les modifications

Ajouter une politique de bucket pour permettre au contenu du bucket d'être accessible publiquement

Lorsque vous avez créé le bucket, vous avez dit que vous ne vouliez pas bloquer tout accès public. Mais même avec ce paramètre, le comportement par défaut de S3 est de "refuser" tout. Donc si vous ne dites pas explicitement que les gens peuvent accéder aux fichiers dans votre bucket, ils ne pourront pas. Vous accorderez des permissions de lecture avec une politique de bucket.

En haut de la page, cliquez sur l'onglet Permissions.

Image Cliquez sur l'onglet Permissions du bucket

Faites défiler vers le bas jusqu'à la section Politique de bucket, et cliquez sur Modifier.

Image Modifier la politique de bucket

Copiez la politique de bucket suivante (code JSON).

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

Collez le code dans la section Politique dans la console AWS. Cette politique dit "Autoriser" tout le monde (le Principal de "") à prendre l'action "GetObject" (basiquement "lire") sur tous les fichiers dans votre bucket ("Nom-du-Bucket/").

IMPORTANT : Mettez à jour "Nom-du-Bucket" avec le nom de votre bucket. Ensuite, cliquez sur Enregistrer les modifications.

Image Collez le code JSON pour la politique de bucket, en mettant à jour "Nom-du-Bucket" par le vôtre

Vous avez maintenant un bucket configuré pour l'hébergement de sites web statiques, et vous avez appliqué une politique qui permettra aux gens d'accéder au site. Il est maintenant temps d'ajouter vos fichiers de code impressionnants que vous avez créés précédemment.

En haut de la page, cliquez sur l'onglet Objets.

Image Cliquez sur l'onglet Objets du bucket

Cliquez sur le bouton Télécharger.

Image Cliquez sur le bouton Télécharger pour télécharger vos fichiers de code

Glissez et déposez vos quatre fichiers dans le navigateur. Cela devrait inclure index.html, styles.css, script.js et headshot.jpg.

Image Glissez et déposez vos quatre fichiers (code et headshot.jpg)

Après que les fichiers ont été téléchargés et que les quatre s'affichent dans la section Fichiers et dossiers, cliquez sur le bouton Télécharger.

Image Téléchargez les fichiers

Il est maintenant temps de tester que votre CV se charge. Pour ce faire, vous devrez obtenir le point de terminaison du site web du bucket S3.

Naviguez vers l'onglet Propriétés du bucket.

Image Naviguez vers l'onglet Propriétés

Faites défiler tout en bas de la page, jusqu'à la section Hébergement de sites web statiques. Cliquez sur le lien Point de terminaison du site web du bucket (il s'ouvrira dans un nouvel onglet).

Image Cliquez sur le point de terminaison du site web du bucket pour voir votre CV (dans un nouvel onglet)

Si tout a fonctionné, vous devriez voir votre travail affiché dans le navigateur. Hourra !

Image Cela fonctionne ! Votre CV est servi par S3.

Félicitations pour avoir hébergé votre CV dans S3 avec un accès public ! Mais aussi impressionnant que cela soit, ce serait encore plus impressionnant s'il utilisait un domaine personnalisé. Actuellement, il utilise l'URL du site web S3, formatée comme [nomdubucket].s3-website-[nomdela région].amazonaws.com.

Image Le CV serait beaucoup plus cool avec son propre nom de domaine personnalisé

Travaillons sur le nom de domaine ensuite, en utilisant Route 53, qui est le service de noms de domaine et DNS d'Amazon.

Option de nom de domaine 1 : Enregistrer un nouveau nom de domaine avec Route 53

Si vous n'avez pas déjà un nom de domaine, vous pouvez en enregistrer un avec AWS, en utilisant Route 53. (Si vous avez déjà un nom de domaine avec un autre fournisseur, je vous donnerai quelques conseils généraux sur son utilisation dans la section suivante.)

Naviguez vers Route 53.

Image Naviguer vers Route 53

Sur le tableau de bord de Route 53, entrez simplement le nom de domaine qui vous intéresse, puis cliquez sur Vérifier.

Image Vérifier la disponibilité d'un nom de domaine

Si le nom de domaine est disponible, vous pourrez le sélectionner (et s'il n'est pas disponible, vous verrez quelques noms alternatifs). Le sélectionner l'ajoutera à votre panier, vous fera passer par un processus de paiement, puis la charge apparaîtra sur votre facture AWS.

Image Sélectionnez le domaine disponible ou choisissez des alternatives

Après avoir acheté le domaine, il créera automatiquement une zone hébergée pour vous. Vous pouvez penser à un domaine hébergé comme un conteneur pour les enregistrements et les règles qui contrôlent la manière dont le trafic est routé.

Une zone hébergée publique (avec laquelle vous allez travailler) contrôle le trafic depuis Internet. Une zone hébergée privée contrôle le trafic interne à un AWS Virtual Private Cloud (VPC).

Vous pouvez consulter vos zones hébergées en cliquant sur Zones hébergées dans la navigation de gauche, puis en cliquant sur la zone qui correspond au nom de domaine que vous avez acheté ("amberaws.com" dans mon cas).

Image Sélectionnez la zone hébergée pour votre nom de domaine

Option de nom de domaine 2 : Utiliser un nom de domaine d'un fournisseur tiers

Donc, vous avez déjà un nom de domaine d'un autre endroit, comme GoDaddy, Namecheap, Google Domains ou similaire. Il est tout à fait possible d'utiliser Route 53 comme votre service DNS (ce qui a beaucoup d'avantages, et est facile à intégrer avec d'autres services AWS), tout en gardant le nom de domaine avec votre autre fournisseur.

Les détails de chaque bureau d'enregistrement sont légèrement différents, donc je vais donner quelques conseils généraux ici. Sachez également que la propagation des modifications DNS prendra plus de temps avec un fournisseur externe, et si les choses tournent mal, vous devrez probablement travailler directement avec eux. Mais je vais vous aider à commencer !

Créer une zone hébergée et obtenir vos serveurs de noms

Même si vous n'utilisez pas un nom de domaine de Route 53, vous aurez toujours besoin d'une zone hébergée (encore une fois, cela contient les enregistrements et les règles qui contrôlent la manière dont le trafic est routé).

Cliquez sur Zones hébergées dans la navigation de gauche, puis cliquez sur Créer une zone hébergée.

Image Créer une zone hébergée pour votre nom de domaine externe

Entrez le nom de domaine du fournisseur tiers, sélectionnez Zone hébergée publique, puis cliquez sur Créer une zone hébergée.

Image Remplissez les détails pour la zone hébergée publique

Une fois votre zone hébergée publique créée, vous verrez quatre serveurs de noms listés. Prenez note de ceux-ci.

Image Prenez note de vos serveurs de noms afin de pouvoir les entrer avec le fournisseur tiers

Ensuite, allez dans les paramètres DNS de votre fournisseur de domaine actuel. Trouvez vos paramètres de serveur de noms, et remplacez-les par les serveurs de noms de Route 53.

Pour plus de détails, voici des guides de certains des fournisseurs de noms de domaine les plus populaires :

Après avoir apporté les mises à jour sur le site tiers, et que les modifications ont été propagées, vous devriez être prêt à suivre le reste de cet article.

Créer un enregistrement A avec un alias pour pointer vers le site web S3

Maintenant que vous avez une zone hébergée publique, vous devez créer un enregistrement qui indique comment le trafic doit être routé lorsque quelqu'un accède à votre nom de domaine.

Cliquez sur votre zone hébergée, puis cliquez sur Créer un enregistrement.

Image Créer un nouvel enregistrement

NOTE : Si vous obtenez la vue "assistant" ci-dessous, cliquez sur Passer à la création rapide. (Si vous ne voyez pas cette vue "tuile", alors vous êtes déjà en mode création rapide.)

Image Passer à la vue création rapide

Remplissez les détails de l'enregistrement.

  • Nom de l'enregistrement : Laissez le sous-domaine vide, et utilisez simplement le domaine racine (comme "amberaws.com").
  • Type d'enregistrement : A
  • Alias : Activez cette option. Un alias vous permet de router vers des ressources AWS comme S3, CloudFront, Elastic Beanstalk, etc.

Image Remplissez le domaine, le type d'enregistrement, puis activez l'alias

Maintenant, remplissez les détails de l'endroit où router le trafic. Vous pouvez taper dans ces listes déroulantes pour filtrer les valeurs.

  • Alias vers le point de terminaison du site web S3
  • Votre région (j'utilise US West (Oregon))
  • La dernière liste déroulante devrait se remplir automatiquement avec votre site web S3. NOTE : Si rien ne s'affiche ici, c'est probablement parce que vous n'avez pas nommé votre bucket de la même manière que votre nom de domaine. D'oh ! Vous devrez recréer le bucket avec le nom exact de votre domaine.

Image Remplissez les détails pour le routage du trafic

Pour la Stratégie de routage, sélectionnez Routage simple. Pour Évaluer la santé de la cible, laissez le défaut Oui, puis cliquez sur Créer des enregistrements.

Image Choisissez la stratégie de routage, la santé de la cible, puis créez l'enregistrement

Il peut falloir jusqu'à 60 secondes pour que vos modifications prennent effet. Vous pouvez consulter l'état de la propagation en cliquant sur le pratique Voir l'état en haut de la page.

Image Voir l'état de propagation de vos modifications

Après que le Statut passe de PENDING à INSYNC, vous devriez être prêt à tester vos modifications.

Image Assurez-vous que le statut indique INSYNC avant de tester les choses

Maintenant, testons ! Si tout a fonctionné, alors lorsque vous tapez votre nom de domaine dans un navigateur (comme amberaws.com), Route 53 devrait vous diriger vers le site web S3, ce qui signifie que vous devriez voir votre (superbe) CV.

Image Cela fonctionne ! Votre nom de domaine devrait maintenant afficher votre CV.

Félicitations ! Vous avez fait un énorme progrès. La dernière étape est d'obtenir une connexion sécurisée (HTTPS, avec un certificat TLS/SSL) pour pouvoir vous débarrasser de ce message "Non sécurisé" de votre navigateur.

Image

Abordons cette étape ensuite, en utilisant AWS Certificate Manager.

Créer un certificat TLS/SSL public en utilisant AWS Certificate Manager

Si vous avez besoin d'un rappel sur les certificats, ceux-ci aident à garantir une connexion sécurisée entre les utilisateurs et le serveur auquel ils font une demande.

Par exemple, si j'envoie des informations bancaires sur Internet, je veux savoir qu'elles vont à un serveur de confiance et que la connexion est cryptée. Et même pour quelque chose d'aussi "simple" qu'un CV, une connexion sécurisée donnera aux visiteurs la confiance qu'ils ne sont pas arrivés sur un site web douteux.

Image Pourquoi nous avons besoin de certificats

Dans l'univers AWS, les certificats sont créés et gérés dans AWS Certificate Manager (ACM). (Vous pouvez également importer des certificats existants d'une autre autorité si vous en avez.)

Naviguez vers Certificate Manager.

Image Naviguer vers Certificate Manager

IMPORTANT ! Pour cette section, vous devez changer votre région pour us-east-1 (N. Virginie). Si vous créez un certificat dans une autre région, vous ne pourrez pas l'utiliser avec CloudFront (où vous finirez par aboutir).

Image Changer de région pour us-east-1 (N. Virginie)

À partir de la page d'accueil de Certificate Manager, cliquez sur Demander un certificat.

Image Demander un certificat

Sélectionnez Demander un certificat public puis cliquez sur Suivant.

Image Sélectionnez un certificat public puis cliquez sur suivant

Entrez votre nom de domaine (comme "amberaws.com"), laissez le reste des options par défaut, puis cliquez sur Demander.

Image Entrez votre nom de domaine puis demandez

La demande a réussi, mais elle aura un statut "en attente de validation" jusqu'à ce que vous validiez le DNS. Cliquez sur Voir le certificat.

Image Voir le certificat pour prendre des mesures supplémentaires

Avant qu'un certificat puisse être émis, Amazon doit confirmer que vous possédez ce domaine et que vous êtes en mesure de modifier les paramètres DNS (dans Route 53). Pour démarrer ce processus, cliquez sur Créer des enregistrements dans Route 53.

Image Créer des enregistrements dans Route 53 pour valider le DNS

Il y a divers filtres appliqués à cet écran suivant, vérifiant l'état de validation et si votre domaine est trouvé dans Route 53. À partir de là, vous pouvez cliquer sur Créer des enregistrements, ce qui créera effectivement – attendez-le – un enregistrement dans Route 53 pour vous.

Image Créer des enregistrements, ce qui créera un enregistrement CNAME dans Route 53

Si la création de l'enregistrement a réussi, vous devriez voir un message à cet effet.

Image Enregistrement créé avec succès dans Route 53 pour valider le DNS

L'enregistrement a été créé dans Route 53. Donc, naviguez vers Route 53, vers votre zone hébergée sur laquelle vous travailliez précédemment. Vous devriez voir un nouvel enregistrement CNAME qui a été créé à partir de Certificate Manager.

Image Voir le nouvel enregistrement CNAME dans Route 53

Super ! Vous avez un certificat TLS/SSL, mais que faites-vous avec maintenant ?

Vos fichiers de site web sont actuellement hébergés dans S3, mais malheureusement, vous ne pouvez pas utiliser un certificat sur un bucket S3.

Image Les certificats ne fonctionnent pas avec S3

Ce dont vous avez besoin à la place, c'est une distribution CloudFront qui pointe vers le bucket S3. Et ensuite, le certificat est appliqué à la distribution CloudFront.

Image CloudFront est la solution !

Vous savez ce que cela signifie, n'est-ce pas ? Cela signifie que nous devons nous rendre à CloudFront ensuite !

Créer une distribution CloudFront

CloudFront est le réseau de diffusion de contenu, ou CDN, d'Amazon. Il est utilisé pour obtenir du contenu plus rapidement pour les utilisateurs en le mettant en cache dans des "emplacements de périphérie" à travers le monde. Cela fonctionne très bien pour des choses comme les vidéos et les images, les rendant plus rapides à charger.

Pour votre simple CV, parce que les fichiers sont si petits, vous ne remarquerez pas beaucoup de différence de performance. Mais c'est la façon dont vous pourrez appliquer le certificat TLS/SSL que vous avez créé dans la section précédente.

Naviguez vers CloudFront.

Image Naviguer vers CloudFront

Sur la page d'accueil de CloudFront, cliquez sur Créer une distribution CloudFront.

Image Créer une distribution CloudFront

Le domaine d'origine est l'endroit où se trouvent vos fichiers de site web, qui est dans S3. Si vous tapez S3 pour filtrer, il devrait faire apparaître votre bucket.

Image Filtrer par S3 pour trouver votre bucket comme domaine d'origine

Mais attendez ! Vous obtenez un message concernant l'utilisation du point de terminaison du site web plutôt que du point de terminaison du bucket. Oui, c'est ce que vous voulez ! Cliquez sur Utiliser le point de terminaison du site web, et AWS mettra à jour le point de terminaison pour vous.

Image Utiliser le point de terminaison du site web, pas le point de terminaison du bucket

Il y a des tonnes de paramètres sur le reste de cette page, mais vous n'avez besoin de mettre à jour que quelques-uns.

Faites défiler jusqu'à la section Comportement du cache par défaut, puis sous Visionneuse, sélectionnez Rediriger HTTP vers HTTPS.

Image Rediriger HTTP vers HTTPS

Faites défiler jusqu'à Pare-feu d'application Web (WAF) et sélectionnez Ne pas activer les protections de sécurité.

Image Ne pas activer le WAF

Dans la section suivante, Paramètres :

  • Pour Nom de domaine alternatif (CNAME), entrez votre nom de domaine (comme "amberaws.com").
  • Pour Certificat SSL personnalisé, sélectionnez le certificat que vous avez configuré précédemment. NOTE : si vous l'avez configuré dans une région autre que us-east-1 (N. Virginie), il n'apparaîtra pas ici. D'oh ! Vous devrez le recréer dans us-east-1.

Image Entrez un nom de domaine alternatif et le certificat SSL personnalisé

Faites défiler jusqu'en bas de la page.

Pour Objet racine par défaut, entrez index.html (votre page d'accueil par défaut) puis cliquez sur Créer une distribution.

Image Définissez l'objet racine par défaut comme index.html puis créez la distribution

Il faudra plusieurs minutes pour que la distribution CloudFront termine le déploiement (même si en haut de la page il est indiqué "Créé avec succès"). Vous saurez qu'elle est terminée lorsque la valeur Dernière modification affiche une date et une heure.

Image Le déploiement est terminé lorsqu'une date/heure apparaissent dans "Dernière modification"

Pour tester que tout fonctionne avec CloudFront et le certificat TLS/SSL, copiez le Nom de domaine de la distribution. Ouvrez un nouvel onglet dans le navigateur et naviguez vers cette adresse.

Image Copiez le nom de domaine de la distribution et ouvrez-le dans un nouvel onglet

Si tout a fonctionné, vous devriez maintenant voir l'icône de cadenas tant attendue dans votre navigateur, indiquant que vous êtes sur une connexion sécurisée utilisant le certificat configuré via Certificate Manager.

Image Le certificat TLS/SSL fonctionne avec CloudFront !

Super ! Mais avant de vous exciter en pensant que nous avons terminé, rappelez-vous que vous voulez finalement accéder à votre nom de domaine personnalisé pour charger le CV, et non à ce long nom de domaine de distribution CloudFront.

Mettre à jour Route 53 pour pointer vers la distribution CloudFront

À l'heure actuelle, l'enregistrement A dans Route 53 pointe vers le bucket S3, comme ceci...

Image Route 53 pointe actuellement vers le bucket S3

Au lieu de cela, nous voulons que Route 53 pointe vers la distribution CloudFront, qui pointe ensuite vers S3, comme ceci...

Image Route 53 devrait pointer vers CloudFront, qui pointe ensuite vers S3

Naviguez à nouveau vers Route 53, vers la zone hébergée avec laquelle vous avez travaillé. Sélectionnez l'enregistrement A, puis sur le côté droit de l'écran, cliquez sur Modifier l'enregistrement.

Image Modifier l'enregistrement A de Route 53

Au lieu de router le trafic vers S3, mettez à jour les trois listes déroulantes pour pointer vers votre distribution CloudFront.

  • Alias vers la distribution CloudFront
  • US East (N. Virginie) (cette option est sélectionnée pour vous et grisée)
  • Choisissez votre distribution (elle devrait se remplir automatiquement dans la troisième liste déroulante)

Cliquez sur Enregistrer.

Image Mettre à jour l'enregistrement A pour router le trafic vers CloudFront

Admirez le résultat final

Et maintenant le moment de vérité : si tout a fonctionné, vous devriez pouvoir naviguer vers votre nom de domaine personnalisé et avoir votre CV chargé sur une connexion sécurisée.

Image CV final chargé sur un nom de domaine personnalisé via une connexion sécurisée

Et VOILÀ ! Cela fonctionne.

Les fichiers du CV (provenant de S3 via CloudFront) se chargent sur le nom de domaine personnalisé (de Route 53) via une connexion sécurisée utilisant le certificat TLS/SSL (de Certificate Manager). Beau travail.

Voici ce que vous avez construit :

Image Un diagramme du projet final

IMPORTANT ! Supprimez vos ressources

Au début de l'article, j'ai couvert les coûts des services. Si vous choisissez de les laisser fonctionner, cela ne devrait pas vous coûter une fortune (sauf, bien sûr, si votre CV devient viral et que vous payez soudainement pour une tonne de trafic Route 53 et CloudFront... peut-être un bon problème ?).

Mais définissez définitivement un Budget AWS pour être averti lorsque les charges atteignent un certain seuil.

Pour ceux d'entre vous qui souhaitent supprimer tout ce que vous avez construit, faisons cela maintenant.

Désactiver et supprimer la distribution CloudFront

Naviguez vers CloudFront et sélectionnez votre distribution. Avant de pouvoir la supprimer, vous devez d'abord la Désactiver.

Image Désactiver la distribution CloudFront

Cela prendra plusieurs minutes à compléter, et cela doit être terminé avant de pouvoir supprimer certaines autres choses. Donc laissez-le fonctionner. Lorsqu'il est terminé, vous devriez voir une date et une heure dans la colonne Dernière modification.

Image Assurez-vous que la distribution CloudFront est désactivée

Une fois la distribution désactivée, sélectionnez-la puis cliquez sur Supprimer.

Image Supprimer la distribution CloudFront

Supprimer les enregistrements de la zone hébergée Route 53

Naviguez vers Route 53 et la zone hébergée avec laquelle vous avez travaillé. Les enregistrements ne coûteront pas d'argent, mais si vous ne prévoyez pas de les utiliser, il est bon de les supprimer pour éviter toute confusion à l'avenir.

Sélectionnez l'enregistrement A et l'enregistrement CNAME puis cliquez sur Supprimer les enregistrements.

Image Supprimer l'enregistrement A et l'enregistrement CNAME de Route 53

Supprimer la zone hébergée (optionnel)

Vous pouvez également choisir de supprimer votre zone hébergée dans Route 53, mais si vous le faites, votre domaine pourrait devenir indisponible sur Internet.

Si vous prévoyez d'utiliser votre nom de domaine à un moment donné dans le futur, je recommande de garder la zone hébergée (j'ai choisi de garder la mienne). Garder la zone vous coûtera 50 centimes par mois.

Mais si vous souhaitez procéder à la suppression, il suffit de sélectionner la zone hébergée et de cliquer sur Supprimer.

Image Supprimer la zone hébergée Route 53

Confirmez que vous avez terminé les actions dans ce message d'avertissement, tapez "supprimer", puis cliquez sur Supprimer.

Image Confirmer la suppression de la zone hébergée Route 53

Supprimer le certificat de Certificate Manager

Naviguez vers Certificate Manager. Sélectionnez le certificat que vous avez créé, puis cliquez sur Supprimer. (Si la distribution CloudFront n'a pas encore été désactivée, vous obtiendrez une erreur à cette étape indiquant que la ressource est toujours utilisée.)

Image Supprimer le certificat de Certificate Manager

Vider le bucket S3 puis le supprimer

Naviguez vers S3, vers la liste de tous vos buckets. Sélectionnez le bucket puis cliquez sur Supprimer.

Image Supprimer le bucket S3

Avant de pouvoir supprimer un bucket, vous devez d'abord supprimer les fichiers qu'il contient. AWS fournit un lien pratique pour cela. Cliquez sur le lien pour vider la configuration du bucket.

Image Vider les fichiers du bucket S3

Confirmez que vous souhaitez supprimer définitivement les fichiers (vous le souhaitez) en tapant "supprimer définitivement" puis en cliquant sur Vider.

Image Confirmer la suppression des fichiers

Maintenant que le bucket est vide, vous pouvez le supprimer. Et dans le message de succès en haut de l'écran, il y a un lien pratique pour le faire. Cliquez sur supprimer la configuration du bucket.

Image Supprimer le bucket S3

Confirmez cette action en tapant le nom de votre bucket, puis en cliquant sur Supprimer le bucket.

Image

Et c'est tout ! Les ressources ont été supprimées, et vous ne devriez pas encourir de frais supplémentaires.

Conclusion

Félicitations pour être arrivé jusqu'à la fin ! J'espère que vous avez réussi à construire un CV, et en même temps à consolider certaines de vos compétences AWS pour l'avenir. N'hésitez pas à le partager avec le monde, et bonne chance dans votre recherche d'emploi.

_Pour plus de tutoriels sur AWS et d'autres technologies, rendez-vous sur Tiny Technical Tutorials sur YouTube._