Comment héberger votre site Web statique avec AWS - Guide du débutant

Lorsque j'ai créé mon premier portfolio l'année dernière, je me suis basé sur ce que j'avais appris de freeCodeCamp (HTML, CSS et un peu de JavaScript).

À ce stade, je n'avais consulté mon portfolio que sur localhost en affichant les fichiers sur mon ordinateur local. Je ne savais rien sur la façon d'héberger un site Web en ligne.

Apprendre à héberger mon premier site Web n'a pas été facile, mais ce fut une excellente expérience d'apprentissage. Si vous êtes un développeur Web en herbe ou simplement intéressé par le lancement de votre propre site Web statique, j'espère que vous trouverez ce guide utile.

A qui s'adresse ce guide?

Ce guide s'adresse aux débutants qui souhaitent héberger un site Web statique (un site à contenu fixe). Je vais fournir un guide pratique pour les éléments suivants:

  1. Comment acheter un domaine.
  2. Comment configurer votre domaine pour un fournisseur d'hébergement externe.
  3. Comment héberger votre site Web avec Amazon Web Services (AWS).
  4. Comment sécuriser votre site Web (certification SSL) à l'aide d'Amazon Certification Manager.

Il y a peut-être une terminologie nouvelle pour vous. Veuillez aller de l'avant et rechercher des termes qui ne vous sont pas familiers. J'ai mis des liens et des explications utiles là où je le jugeais approprié.

Qu'est-ce qu'un nom de domaine et DNS (Domain Name System)?

Un nom de domaine est l'adresse de votre site Web. Par exemple thecodinghamster.com. Mais pour un ordinateur, un nom de domaine est en fait une série de chiffres (une adresse IP). Une adresse IP ressemble à ceci: 123.321.0.1

Il n'est pas facile pour nous de nous souvenir d'une longue chaîne de chiffres. Ainsi, votre ordinateur se réfère à un DNS pour traduire une adresse de site Web textuelle en une adresse IP qu'il peut ensuite comprendre. Un DNS est comme un annuaire.

J'ai regardé cette superbe vidéo qui explique le nom de domaine, le DNS et comment cela fonctionne en moins de cinq minutes. Veuillez regarder les cinq premières minutes de la vidéo si vous êtes intéressé:

Où pouvez-vous acheter votre nom de domaine?

Vous pouvez acheter un nom de domaine auprès d'un registraire de noms de domaine. Les prix commencent à quelques dollars. Votre nom de domaine est unique. Chaque registraire de noms de domaine propose différents niveaux de services / support. Mais vous pouvez enregistrer votre domaine auprès de n'importe quel bureau d'enregistrement.

Qu'est-ce qu'un hébergeur?

«Un service d'hébergement Internet est un service qui exécute des serveurs Internet, permettant aux organisations et aux particuliers de diffuser du contenu sur Internet. Il existe différents niveaux de service et différents types de services offerts. »

Lorsque je cherchais un fournisseur d'hébergement pour mon site Web, j'ai exploré différentes options. Les prix allaient de 2,00 £ à 5,00 £ par mois avec diverses options de stockage de 0,5 Go à 10 Go. Les prix semblaient raisonnables mais tout ce que je voulais faire était d'héberger un site Web statique. Il contenait quelques images, fichiers HTML, CSS et JavaScript. Pas de contenu dynamique.

Pourquoi AWS?

Après quelques recherches supplémentaires, j'ai trouvé AWS. AWS propose une option de niveau gratuit. Essentiellement, vous obtenez de nombreux produits gratuits. Certains d'entre eux expirent au bout de 12 mois et d'autres sont gratuits à perpétuité. Le seul coût que vous encourrez pour l'hébergement d'un site Web statique est le coût de mise en place d'une zone hébergée. Cela coûte 0,50 $ par mois. Je suis donc allé avec AWS et j'ai configuré mon compte.

L'avantage d'AWS est le prix et c'est un fournisseur d'hébergement fiable. Mais une chose à garder à l'esprit est que vous dépendez de leur documentation. Lorsque j'ai commencé à lire sur les services offerts par AWS, cela est rapidement devenu déroutant! J'ai utilisé le guide AWS officiel fourni pour configurer des sites Web statiques. Mais je me suis perdu en cliquant sur un lien vers un autre lien et ainsi de suite. J'ai commencé à rechercher d'autres guides pour combler les lacunes dans les connaissances.

J'ai trouvé cet excellent guide de Victoria Drake.

J'ai suivi le guide de Victoria Drake aux côtés de celui d'AWS et j'ai réussi à me débrouiller. Mais il y avait encore quelques choses qui n'ont pas été expliquées et que j'espère étoffer.

Avant de continuer, voici votre liste de choses à faire:

  • Faites des recherches sur les registraires de domaine et achetez votre nom de domaine.
  • Créez un compte gratuit avec AWS.
  • Ouvrez la documentation d'AWS et le guide de Victoria Drake. Utilisez mon guide pour vous guider à travers la documentation (espérons que cela a du sens!).

Et c'est parti!

AWS: créez une zone hébergée sur Route 53.

Route 53 est l'endroit où toutes vos requêtes DNS sont traitées.

La première chose que vous devez configurer est votre zone hébergée avec Route 53. C'est vraiment facile si vous avez acheté votre domaine via AWS. Une zone hébergée est créée automatiquement une fois que vous l'avez achetée. Si vous avez fait cela, passez simplement à la section suivante ( Configurer vos compartiments S3 ).

Cependant, si vous étiez comme moi et que vous avez acheté votre nom de domaine via un autre registraire, procédez comme suit.

Cette partie suivante explique comment créer une zone hébergée sur Route 53 si vous n'avez pas acheté votre nom de domaine auprès d'AWS:

  1. Allez sur Route 53 dans votre console et cliquez sur «Créer une zone hébergée». Renseignez votre adresse de domaine, le commentaire est facultatif et choisissez une «Zone hébergée publique». Cliquez sur «Créer».

2. Une fois votre zone hébergée créée, vous avez besoin de vos enregistrements NS (Name Servers):

3. Accédez à votre registraire de noms de domaine et connectez-vous. En fonction de votre registraire, vous devriez trouver une section dans vos paramètres appelée "Nameservers" que vous pouvez modifier. Vous devez copier les enregistrements AWS NS et modifier les enregistrements NS existants dans les paramètres de votre domaine.  

Veuillez noter que ne copiez pas le point / point complet à la fin de l'enregistrement NS. Par exemple, il doit être «ns-63.awsdns-07.com» et non «ns-63.awsdns-07.com».

Il faudra jusqu'à 24 heures pour se propager.

Configurez vos seaux S3

En attendant, vous pouvez configurer vos compartiments S3. Le compartiment S3 est le stockage de vos fichiers tels que votre index.html.

Vous devez configurer deux compartiments pour votre site Web: 1) votrenomdomaine.com et 2) www.votredomaine.com.

Le premier bucket est votre bucket principal dans lequel vous téléchargerez tous vos documents, tels que votre index.html. Le deuxième compartiment est redirigé vers le premier compartiment. Pour configurer vos compartiments S3, veuillez suivre la documentation AWS sur la façon de configurer votre compartiment S3 (2: Créer et configurer des compartiments et télécharger des données).

En plus de la documentation, il y a quelques points à noter:

  • Dans la section 2.1 (partie 2): cliquez sur le lien Comment créer un compartiment S3? Ceci est un guide étape par étape et explique tous les paramètres que vous devez choisir.
  • Dans la section 2.1 (partie 3): vous n'avez pas encore à télécharger les fichiers de votre site Web. Vous pouvez ajouter un test index.html en attendant.

Prenez note de votre point de terminaison . Vous pouvez le trouver dans votre compartiment S3> onglet «Propriétés»> boîte «Hébergement Web statique». Il devrait ressembler à quelque chose comme ceci: //votredomaine.com.s3-website.eu-west-2.amazonaws.com

Ajouter les enregistrements Alias ​​/ «A» dans Route 53

Revenez enfin à Route 53 et ouvrez votre zone hébergée pour configurer vos enregistrements Alias. Vous pouvez suivre la documentation sur «Étape 3: Ajouter des enregistrements d'alias pour example.com et www.example.com». C'est assez simple.

Une fois les paramètres NS propagés, votre site est en ligne ! Vous pourrez visiter votre site à l'adresse du domaine, par exemple votrenomdomaine.com

Cependant, veuillez noter qu'il ne sera pas sécurisé et que vous verrez un préfixe // dans la barre d'adresse. J'y reviendrai dans la section suivante.

Comment sécuriser votre site Web et qu'est-ce qu'un certificat SSL?

Il est très important de sécuriser votre site Web et pour ce faire, vous devrez obtenir un certificat SSL. SSL signifie Secure Sockets Layer et utilise le cryptage pour transférer en toute sécurité des données entre un utilisateur et un site. Google donnera également un coup de pouce au classement des sites Web avec HTTPS.

Si vous sécurisez le site Web avec un certificat SSL, vous verrez // et un symbole de cadenas dans votre barre d'adresse.

Il existe différents types de certificats SSL: un certificat de validation étendue et un certificat validé par domaine. Pour un site Web ou un blog personnel, seul un certificat de domaine validé est requis. Vous ne verrez pas non plus le nom de votre entreprise à gauche de la barre comme dans l'exemple ci-dessus. Vous ne l'obtiendrez que si vous avez un certificat de validation étendue, qui est davantage destiné aux grandes entreprises / entreprises.

Combien coûte un certificat SSL?

J'ai vu différentes manières d'obtenir un certificat SSL. Vous pouvez payer une prime pour un service qui le fera en votre nom ou vous pouvez le faire gratuitement avec Let's Encrypt. Let's Encrypt est une autorité de certification (CA) officielle. Mais vous devez renouveler votre certificat tous les trois mois et le processus est assez compliqué.

Je ne voulais pas payer de prime ou je ne voulais pas avoir à renouveler tous les trois mois. De manière pratique, AWS peut émettre des certificats SSL pour une somme très modique. Vous payez 0,75 $ pour chaque certificat émis et cela dure un an.

Si vous choisissez de ne pas utiliser AWS, assurez-vous de faire vos recherches et de choisir une autorité de certification de confiance!

Comment obtenir un certificat SSL avec AWS?

Connectez-vous à votre console AWS et accédez à AWS Certificate Manager (ACM).

Assurez-vous de changer la région par défaut (Ohio) en Virginie du Nord. Ce n'est pas explicite dans les guides et seule la région de Virginie du Nord peut émettre des certificats. J'ai appris à la dure et j'ai perdu beaucoup de temps!

Cliquez ensuite sur «Get Started» sous «Provision Certificates».

Suivez la documentation avec AWS («Demander un certificat public à l'aide de la console») et utilisez le guide de Victoria Drake (sous «Certificat SSL»).

En plus des guides, il y a peu de choses qui n'ont pas été entièrement expliquées:

  • Vous devrez valider la propriété de votre domaine par e-mail ou directement avec DNS. Je suggérerais de toujours vérifier la propriété par validation DNS .
  • Une fois que vous avez demandé votre certificat, vous obtiendrez quelque chose comme ça (sauf que le statut sera en attente). Cliquez sur «Exporter le fichier de configuration DNS»:

C'est une feuille de calcul Excel qui contiendra quelque chose comme ceci:

  • Vous devrez ajouter ces enregistrements à vos paramètres DNS avec votre registraire. Connectez-vous et accédez aux paramètres DNS. L'interface varie selon les bureaux d'enregistrement, mais vous recherchez vos enregistrements d'hôte dans vos paramètres DNS.
  • Cliquez sur "Ajouter un enregistrement"> le type d' enregistrement est CNAME :

Vous devez ajouter deux enregistrements: 1) Le nom d'hôte doit être «@» et le nom de la cible doit être la valeur d'enregistrement du fichier de configuration DNS.

2) Le nom d'hôte doit être * (astérisque) et le nom cible doit être la valeur d'enregistrement du fichier de configuration DNS.

Si vous souhaitez plus d'informations sur le CNAME et les types d'enregistrement, j'ai trouvé cet article utile.

C'est assez long, mais j'ai sorti la partie utile:

«Remarque: le nom d'hôte fait référence au préfixe avant le nom de domaine. Pour créer un enregistrement vide, utilisez un @ dans le champ Nom d'hôte. Cela représente un préfixe vide (donc le nom correspond exactement au nom de domaine; par exemple divapirate.com). Le @ hostname est également appelé la racine du domaine. Un * (astérisque) dans le nom d'hôte est un caractère générique et représente n'importe quel préfixe. Par exemple, la création d'un enregistrement pour * .divapirate.com dirigera .divapirate.com vers l'adresse IP fournie. »

Il vous suffit d'attendre la vérification. Pour moi, cela a pris environ une heure.

Comment ajoutez-vous votre certificat SSL?

Avec AWS, vous pouvez ajouter un certificat SSL à votre site Web en configurant CloudFront . CloudFront est idéal pour accélérer votre site Web. J'ai utilisé la documentation AWS et le guide de Victoria Drake (recherchez ses conseils utiles).

Veuillez noter que lorsque vous créez votre distribution CloudFront, il existe un menu déroulant pour ajouter votre certificat SSL. Si vous avez déjà reçu un certificat SSL, il sera pré-rempli dans le menu déroulant.

Votre état dans votre tableau de bord CloudFront doit être remplacé par «Activé». Ce n'est pas instantané et prend un peu de temps.

Presque là…

Enfin, vous devez obtenir votre nom de domaine à partir de la distribution CloudFront. Cela devrait être quelque chose comme ça dsfdser83543. cloudfront.net .

Revenez à Route 53> zone hébergée> remplacez les deux enregistrements d'alias (Alias ​​Target) par le nom de domaine CloudFront.

Voila! Vous avez hébergé votre premier site Web statique sécurisé avec AWS.

J'espère que vous avez trouvé cela utile. Si vous avez des questions ou souhaitez simplement me dire bonjour, retrouvez-moi sur Twitter @PhoebeVF

Un grand merci à Victoria Drake pour son guide. Pour un didacticiel plus avancé sur ce sujet, veuillez consulter l'article de Victoria: "Hébergement de votre site statique avec AWS S3, Route 53 et CloudFront".

Illustrations gracieuseté de //undraw.co