Créer un site Web statique sécurisé avec Amazon S3
Informations utilisées pour ajouter un enregistrement DNS
Vous devez ajouter un enregistrement pour votre sous-domaine via votre fournisseur DNS.
Enregistrement CNAME
Côté gauche
blog
Côté droit
Vous voulez l'URL de distribution Cloudfront ici.
gobledeegook.cloudfront.net
Informations utilisées pour configurer notre site bucket
Nom du bucket
Il doit correspondre au domaine que vous utiliserez.
blog.exemple.com
Page de destination Contenant l'implémentation du sélecteur de langue
index.html
Contenu de la Page de destination
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Select Language</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 50px;
background: #f4f4f4;
}
h1 {
margin-bottom: 20px;
}
.language-options {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 30px;
}
.language-options a {
text-decoration: none;
border: 1px solid #ccc;
border-radius: 8px;
padding: 10px 20px;
background: white;
font-size: 18px;
transition: background 0.3s;
}
.language-options a:hover {
background: #eaeaea;
}
</style>
</head>
<body>
<h1>blog.exemple.com language selector</h1>
<p>You will be redirected shortly based on your browser language...</p>
<p>Or select a language</p>
blog.exemple.com/.en/
<div class="language-options">
<a href="./lang-version.en/index.html">🇬🇧 English</a>
<a href="./lang-version.fr/index.html">🇫🇷 Français</a>
<a href="./lang-version.es/index.html">🇪🇸 Español</a>
</div>
<script>
// Define supported language codes and redirect paths
const languageRedirects = {
'en': './lang-version.en/index.html',
'fr': './lang-version.fr/index.html',
'es': './lang-version.es/index.html'
};
// Get the browser's primary language (e.g., 'en', 'fr')
const userLang = navigator.language.slice(0, 2).toLowerCase();
// Check if we support the detected language
const redirectTo = languageRedirects[userLang] || './lang-version.en/index.html';
// Wait 5 seconds before redirecting
setTimeout(() => {
window.location.href = redirectTo;
}, 60000);
</script>
</body>
</html>
page 404
oops.html
Contenu de la page 404
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Not Found</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
color: #333;
text-align: center;
padding: 50px;
}
.container {
background-color: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
display: inline-block;
}
h1 {
color: #d9534f; /* Red for error */
}
a {
color: #007bff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<h1>Oops: Page Not Found</h1>
<p>Sorry, but the page you're looking was not found.</p>
<p>It may have been moved, deleted, or there might be a typo in the URL.</p>
<p>
<a href="/">Go back to the homepage</a>
</p>
</div>
</body>
</html>
Politique du Bucket
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": [
"s3:GetObject"
],
"Resource": [
"arn:aws:s3:::blog.exemple.com/*"
]
}
]
}
Resource original d'ou la Politique du Bucket est dérivée
https://docs.aws.amazon.com/AmazonS3/latest/userguide/HostingWebsiteOnS3Setup.html
Note: Remplacez "Bucket-Name" dans la resource pour "blog.exemple.com"
Region Aws
US East (N. Virginia) us-east-1
Informations utilisées pour la distribution Cloudfront
Nom de domaine alternatif
blog.exemple.com
domaine supérieur
C'est ici que va le courriel de validation.
exemple.com
domaine original
blog.exemple.com.s3-website-us-east-1.amazonaws.com
objet d'itinéraire par défaut
Quoi utiliser quand aucun fichier se trouve dans le URL.
index.html
Pas à pas
Ceci est un exercice de création d’un site Web statique rudimentaire.
Connectez-vous à la console AWS.
Accédez à S3.
Cliquez sur "Créer un bucket".
Indiquez le nom du bucket.
Indiquez la région AWS.
Décochez "Bloquer tout accès public" et confirmez.
Cliquez sur "Créer un bucket".
Importez la page d'accueil dans le bucket.
Importez la page 404 dans le bucket.
Activer site Web statique
- Appuyez sur Propriétés
- Accédez à l'hébergement web statique et appuyez sur Modifier
- Appuyez sur Activer
- Indiquez Page de destination comme valeur du document d'index
- Indiquez Page 404 comme valeur de la page d'erreur
- Appuyez sur Guarder les modifications
Attacher une politique de Bucket
- Appuyez sur Autorisations
- Appuyez sur Modifier la politique de bucket et collez Politique du Bucket.
- Appuyez sur Guarder
Obtenir un certificat SSL
- Recherchez le gestionnaire de certificats dans notre console.
- Cliquez sur "Gestionnaire de certificats"
- Cliquez sur "Demander un certificat"
- Certificat public. Suivant.
- Pour un nom de domaine complet, ajoutez : Nom du bucket
- Utilisez la validation par e-mail.
- Le domaine de validation est l'adresse courriel. Utilisez : super domaine
- Ajoutez une paire de balises, telle que "certifier", nom du bucket
- Cliquez sur "Demander" Vous obtenea le certificat demandé, mais son statut est en attente de validation.
- Vous recevrez un e-mail. Suivez les instructions pour valider. Quand c'est fait, la validation de votre certificat passera à "Émis".
Connectez-vous à votre serveur DNS et ajoutez ceci:
- Côté gauche CNAME Côté droit
Distribution Cloudfront
- Accédez à Cloud Front et cliquez sur "Créer une distribution Cloud Front".
- Choisissez la page de création de distribution précédente. C'est que Je ne trouve pas comment ajouter une distribution alternative à la distribution actuelle.
- En suivant les conseils, utilisez l'URL d'Amazon plutôt que la nôtre comme domaine d'origine.
- Activez la redirection HTTP vers HTTPS.
- Ajoutez un nom de domaine alternatif: blog.exemple.com
- Choisissez le certificat SSL.
- Objet de route par défaut.
- Créez une distribution.