Hébergement de site simple avec Amazon S3 et HTTPS

Salut les gens!

Dans ce didacticiel, je vais vous montrer comment héberger un site Web statique avec HTTPS sur AWS avec un domaine personnalisé. Tout cela est possible en utilisant l'offre gratuite d'AWS.

Cependant, les services que nous allons utiliser entraînent de petits frais. En règle générale, ils ne doivent pas dépasser 1 $ / mois.

Nous utiliserons une combinaison des services AWS suivants:

—S3

- Route53

- Gestionnaire de certificats

- CloudFront

Allons-y!

Configurez vos compartiments S3

Tout d'abord, vous aurez besoin de deux compartiments S3 , les deux doivent correspondre à votre nom de domaine personnalisé avec le second comprenant le sous-domaine www.

Godet 1:mywebsite.com

Godet 2:www.mywebsite.com

Le premier bucket (mywebsite.com) est le bucket principal de votre site. Celui-ci contient tous vos fichiers et ressources pour votre site Web statique.

Ensuite, nous configurons ce compartiment pour l'hébergement de sites statiques. Vous pouvez le trouver sous l'onglet Propriétés du compartiment, et nous allons conserver les valeurs par défaut fournies ici avec l'index du site défini sur index.html.

Nous devons également rendre ce bucket accessible au public car le navigateur d'un utilisateur devra accéder aux fichiers du bucket afin de rendre le site Web. Nous pouvons le faire en définissant une stratégie de compartiment sous l'onglet Autorisations.

{ "Version": "2012-10-17", "Statement": [ { "Sid": "PublicReadGetObject", "Effect": "Allow", "Principal": "*", "Action": "s3:GetObject", "Resource": "MY_BUCKET_ARN" } ]}

Il s'agit d'une stratégie simple qui autorisera uniquement l'accès public en lecture aux objets du compartiment. Maintenant, si vous vous dirigez vers le point de terminaison défini dans la configuration d'hébergement statique du compartiment, vous devriez voir votre site Web.

Le progrès! Mais nous pouvons faire mieux que cela.

Le deuxième bucket (www.mywebsite.com), nous le laisserons vide, mais le configurerons pour le rediriger vers notre premier bucket en utilisant HTTP comme protocole (nous le rendrons HTTPS plus tard).

Vos seaux sont maintenant prêts à être utilisés!

Configurer les domaines avec Route53

Votre site Web est donc opérationnel mais accessible uniquement via le point de terminaison du bucket et non votre domaine personnalisé. Changeons cela.

Dirigez-vous vers Route53 . Si vous avez enregistré votre domaine auprès d'Amazon Registrar, vous devriez voir qu'une zone hébergée a été configurée pour vous avec deux jeux d'enregistrements. Un pour le serveur de noms (NS) et un pour SOA.

Tout ce que nous devons faire est de créer deux autres jeux d'enregistrements pour pointer vers les points de terminaison du compartiment S3.

Pour chaque jeu d'enregistrements:

- Type: A - Adresse IPv4

- Alias: Oui

- Alias ​​Target: le point de terminaison du site Web S3 qui correspond à ce que vous avez défini pour Name.

Maintenant, nous pouvons nous diriger vers l'url personnalisée… et voilà!

Nous y sommes presque, mais il nous manque une dernière chose…

Remarque : si votre domaine est enregistré auprès d'un autre registraire de domaine (pas Amazon), vous devrez suivre différentes étapes pour le configurer. Vous devrez généralement ajouter un enregistrement CNAME avec une valeur du point de terminaison principal des compartiments S3.

Dépannage :

Si vous avez supprimé la zone hébergée créée par Amazon lors de la première inscription du domaine (je l'ai fait car les zones hébergées entraînent des frais), vous devrez créer une nouvelle zone hébergée à partir de zéro.

  1. Sélectionnez "Créer une zone hébergée" et définissez le nom de domaine, par exemple "mywebsite.com"
  2. Cela générera de nouveaux jeux d'enregistrements pour les types NS et SOA.
  3. Accédez à votre domaine enregistré et mettez à jour les valeurs des serveurs de noms avec celles générées dans le nouveau jeu d'enregistrements NS.

Demander un certificat

Génial, le site est maintenant hébergé en utilisant l'url personnalisée! Cependant, nous ne pouvons y accéder que via le protocole HTTP.

Nous devons toujours nous assurer que nos sites sont sécurisés à l'aide du protocole HTTPS. Cela protège notre site et les utilisateurs des attaques par injection malveillante et garantit l'authenticité.

Accédez à Certificate Manager dans AWS Console et demandez un nouveau certificat public (c'est gratuit). Vous serez invité à saisir les noms de domaine que vous souhaitez sécuriser.

Avant que le certificat ne puisse être émis, Amazon doit être en mesure de vérifier que vous possédez les domaines spécifiés.

Vous pouvez choisir entre deux méthodes de vérification: Email ou DNS.

L'e-mail est généralement plus simple, mais vous devrez vous assurer que vous pouvez accéder à l'e-mail utilisé pour enregistrer le domaine. Sinon, si vous avez utilisé Amazon Registrar et Route53, vous pouvez sélectionner la méthode DNS. Cela vous oblige à ajouter des jeux d'enregistrements spécifiques à la zone hébergée, mais cela est principalement automatisé pour vous, c'est donc assez simple.

It can take a few minutes for the certificate to be issued after validation.

When its all done we can continue to the final step!

Configuring CloudFront

For the final step we are going to use CloudFront which allows us to use the new SSL certificate to serve the website with HTTPS. CloudFront also speeds up the distribution of web content by storing it at multiple edge locations and delivering from the closest edge location to a user.

We need two new web distributions, one for each S3 bucket. Head to CloudFront in the AWS Console and create the first web distribution.

There are lots of settings available to create a web distribution, but for the basics we only need to change five:

  1. Origin Domain Name: Set this to the S3 website endpoint for one of the buckets. Important: This field will give you some auto-complete options with your S3 bucket names. However, using these can cause issues with redirecting to the bucket endpoint. So instead use the bucket endpoint directly.
  2. Origin Id: This populated for you when you enter Origin Domain Name.
  3. Viewer Protocol Policy: Set to “Redirect HTTP to HTTPS”.
  4. Alternate Domain Names: This should match the name of the S3 bucket you’re pointing to. For example “mywebsite.com”.
  5. SSL Certificate: Select “Custom SSL Certificate” and select your new certificate from the dropdown.

Do this again for the second S3 bucket.

The distributions can take a while to spin up, so while we wait, let’s do the finishing steps.

Back in S3, go to your secondary bucket (www.mywebsite.com), in the Properties tab and under Static Website Hosting set the redirect protocol to HTTPS.

Finally, head back to Route53. We need to update the custom A records we created to now target the CloudFront distributions rather than the S3 buckets. For each record, change the Alias Target and select the CloudFront distribution available in the dropdown.

Note: Again, if you are using another DNS service you’ll need to go update the CNAME record from there to point to the CloudFront domain name.

And there you have it! Your beautiful website is now available at the custom domain and served with HTTPS!

Thanks for reading! I hope this guide was useful and enjoyable, I’d love to know if you found it helpful.