Creación de un sitio web estático seguro en Amazon S3
Información utilizada para agregar un registro DNS
Debe agregar un registro para su subdominio a través de su proveedor de DNS.
CNAME record
Lado izquierdo
blog
Lado Derecho
Quieres la URL de tu distribución de Cloudfront aquí.
gobledeegook.cloudfront.net
Información utilizada para configurar nuestro sitio S3
Bucket Name
Debe coincidir con el dominio DNS que utilizarás.
blog.ejemplo.com
Página de destino que contiene la implementación en HTML del selector de idioma
index.html
Contenido de la página de destino
<!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.ejemplo.com language selector</h1>
<p>You will be redirected shortly based on your browser language...</p>
<p>Or select a language</p>
blog.ejemplo.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>
Página 404
oops.html
Contenido de la página 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>
política
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": [
"s3:GetObject"
],
"Resource": [
"arn:aws:s3:::blog.ejemplo.com/*"
]
}
]
}
Recurso original del que obtenemos la política
https://docs.aws.amazon.com/AmazonS3/latest/userguide/HostingWebsiteOnS3Setup.html
Nota: reemplazó "Bucket-Name" en el recurso para convertirlo en "blog.ejemplo.com"
Aws Region
US East (N. Virginia) us-east-1
Información utilizada para la distribución de Cloudfront
alternate domain name
blog.ejemplo.com
super domain
Aquí es donde va el correo electrónico de validación.
ejemplo.com
dominio original
A donde se encuentra to sitio en S3
blog.ejemplo.com.s3-website-us-east-1.amazonaws.com
default route object
index.html
Paso a Paso
Este es un ejercicio paso a paso para crear un sitio web estático rudimentario.
Inicie sesión en la consola de AWS.
Vaya a S3.
Haga clic en "Crear bucket".
Proporcione Nombre del bucket.
Proporcione Región de AWS.
Desmarque la opción "Bloquear todo acceso público" y confirme la acción.
Pulse "Crear bucket".
Cargue la Página de destino al bucket.
Cargue la Página 404 al bucket.
Habilitar sitio web estático
- Pulsa Propiedades
- Baja al alojamiento web estático y pulsa Editar
- Pulsa Habilitar
- Introduce Página de destino como valor del documento de índice
- Introduce Página 404 como valor de la página de error
- Pulsa Guardar cambios
Adjuntar una política de depósito
- Presionar Permisos
- Presionar Editar política de depósito y pegar Política.
- Presionar Guardar
Obtener un certificado SSL
- Busque el administrador de certificados en nuestra consola
- Haga clic en Administrador de certificados
- Haga clic en Solicitar certificado
- Certificado público. Siguiente.
- Para un nombre de dominio completo, introduzca: Bucket Name
- Utilice la validación por correo electrónico.
- El dominio de validación es donde se enviará el correo electrónico. Utilice: superdominio
- Añada un par de etiquetas como: "certificar", Bucket Name
- Pulse Solicitar Ha obtenido un certificado solicitado correctamente; el estado es pendiente de validación.
- Recibirá un correo electrónico; deberá seguir las instrucciones para validarlo. La validación de su certificado cambiará el estado a "emitido". (issued)
- Inicie sesión en su servidor DNS y agregue un registro:
- Lado izquierdo CNAME Lado derecho
- Distribución Cloudfront
- Vaya a Cloud Front y presione crear distribución Cloudfront
- Elija la página anterior de crear distribución. Es que no puedo encontrar cómo agregar una alternativa cuando utilizo la pagina actual.
- Siga el consejo: utilizar la URL de Amazon en lugar de la nuestra como dominio original.
- Habilitar redirección de http a https
- Agregar nombre de dominio alternativo (sea el tuyo)
- Elija el certificado SSL
- objeto de ruta predeterminado (normalmente index.html)
- Crear distribución