Cómo construir un currículum en línea en AWS utilizando S3, Route 53, CloudFront y ACM
Si eres nuevo en AWS, seguramente puedes apreciar la sensación de abrumo que proviene al tratar de entender todos los diferentes servicios (en serio, como cientos de ellos). ¿Para qué son todos, y cómo funcionan juntos? Y una vez que hayas dominado algunas habilidades básicas, entonces...
Si eres nuevo en AWS, probablemente puedas apreciar la sensación abrumadora que proviene de tratar de entender todos los diferentes servicios (en serio, como cientos de ellos). ¿Para qué son todos y cómo funcionan juntos?
Y luego, una vez que hayas dominado algunas habilidades básicas, el próximo desafío es cómo demostrar esas habilidades a un empleador potencial. ¿Qué tipo de proyecto puedes destacar en tu currículum vitae, sin quebrar el banco?
En este tutorial práctico, recibirás ayuda con ambas cosas al construir tu currículum vitae real en AWS, siguiendo estos pasos:
- Escribe código para tu currículum vitae utilizando HTML, CSS y JavaScript
- Sube tus archivos a un bucket de Simple Storage Service (S3) que configures para alojamiento de sitio web estático, con acceso público
- Usa Route 53 para configurar un dominio personalizado para tu currículum vitae
- Configura un certificado TLS/SSL con AWS Certificate Manager (ACM)
- Crea una distribución de CloudFront (que apunte a los archivos en S3) donde puedas aplicar el certificado.
Esto es lo que construiremos:
Al final de este tutorial, tendrás más que un simple currículum vitae en línea. Tendrás un proyecto del mundo real que puedes usar para deslumbrar a tus amigos, familiares, contactos y empleadores potenciales.
Para una guía en vivo del proyecto, revisa este video:
Tabla de contenidos
- Lo que necesitas para seguir el tutorial
- Pero primero, ¿cuánto cuesta?
- Crea el código (HTML, CSS, JavaScript) para tu currículum vitae
- Crea un bucket de S3 y configúralo para alojamiento de sitio web estático y acceso público
- Opción de nombre de dominio 1: Registra un nuevo nombre de dominio con Route 53
- Opción de nombre de dominio 2: Usa un nombre de dominio de un proveedor externo
- Crea un registro A con un alias para apuntar al sitio web de S3
- Crea un certificado TLS/SSL público usando AWS Certificate Manager
- Crea una distribución de CloudFront
- Actualiza Route 53 para apuntar a la distribución de CloudFront
- Maravíllate con el resultado final
- ¡IMPORTANTE! Elimina tus recursos
- Conclusión
Lo que necesitas para seguir el tutorial
Para completar este tutorial con éxito, necesitarás lo siguiente:
- Una cuenta de AWS: Puedes crear una de forma gratuita (aunque requerirá una tarjeta de crédito para validar).
- Experiencia básica: Tener alguna experiencia básica en AWS hará que el tutorial sea más fácil, pero aún deberías poder seguirlo si eres completamente nuevo en esto.
- Permisos apropiados: Te sugiero iniciar sesión como un usuario IAM con privilegios de administrador o usar tu cuenta principal (aunque debo decir que trabajar en tu cuenta principal a diario no se recomienda/no es una mejor práctica).
Pero primero, ¿cuánto costará esto?
Antes de seguir adelante, analicemos los diferentes servicios y cuánto costarán.
Si deseas eliminar todo después del tutorial, asegúrate de ver esa sección hacia el final de este artículo. También recomendaría configurar un presupuesto de AWS para poner límites de gasto y recibir notificaciones si los vas a exceder (¡sin sorpresas en la factura, por favor!).
- S3: Se utiliza para alojar archivos del sitio web. Si aún estás en la Capa gratuita de AWS, no debería haber costos. Fuera de la Capa gratuita, el costo debería ser mínimo, en centavos.
- Route 53: Si decides comprar un nombre de dominio a través de Route 53 (opcional, también puedes “traer el tuyo” desde otro proveedor), costará $10 o más. También necesitarás una zona alojada, que te costará 50 centavos al mes. Y las consultas de Route 53 (cuando alguien visita tu dominio) costarán 40 centavos por cada millón de consultas.
- AWS Certificate Manager: Un certificado TLS/SSL a través de ACM es gratuito.
- CloudFront: Dentro de la Capa gratuita, no hay costos. Fuera de la Capa gratuita, dependerá del tráfico, pero para nuestros propósitos, es probable que cueste solo centavos. Consulta la página completa de precios para obtener más información.
Crea el código (HTML, CSS, JavaScript) para tu currículum vitae
Esta sección es donde puedes dejar volar tu creatividad (y tus habilidades de codificación). Nada de esto es específico de AWS, es solo desarrollo web clásico.
Eventualmente usarás un conjunto de S3 para alojar los archivos de tu currículum vitae (HTML, CSS y JavaScript). S3 solo puede alojar un sitio web estático, lo que significa que no puede incluir nada que requiera código del lado del servidor. Pero funciona perfecto para el frontend.
No seré demasiado prescriptivo con el código que uses aquí, después de todo, este es tu currículum vitae. Pero querrás resaltar las cosas “tradicionales” del currículum vitae: historial laboral, educación, habilidades/certificaciones y tal vez cosas como honores/premios o pasatiempos para que parezcas más humano.
Si deseas enumerar tus habilidades de HTML, CSS y JavaScript en tu currículum, idealmente lo codificarás a mano (guiño, ¡sin ayuda de ChatGPT!), pero también puedes usar mi código a continuación como punto de partida.
archivo index.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Currículum en línea - Tu Nombre</title> <link rel="stylesheet" href="styles.css"></head><body> <div class="container"> <header> <img src="headshot.jpg" alt="Foto" class="headshot"> <h1 id="name">Nombre</h1> <p id="contactInfo">Ubicación | Email</p> </header> <section id="employmentHistory"> <h2>Historial Laboral</h2> <div id="timeline"></div> <!-- Espacio reservado para el array de JavaScript --> </section> <section id="education"> <h2>Educación</h2> <ul> <li>Título | Universidad (Año)</li> <li>Título | Universidad (Año)</li> <!-- Agrega más elementos a la lista según sea necesario --> </ul> </section> <section id="skills"> <h2>Habilidades/Certificaciones</h2> <ul> <li>Habilidad 1</li> <li>Habilidad 2</li> <li>Habilidad 3</li> <li>Habilidad 4</li> <!-- Agrega más elementos a la lista según sea necesario --> </ul> </section> </div> <script src="script.js"></script></body></html>archivo styles.css
/* Restablecimiento base para el relleno y margen de todos los elementos */* { padding: 0; margin: 0; box-sizing: border-box;}/* Estilo del cuerpo */body { font-family: 'Arial', sans-serif; line-height: 1.6; background-color: #f4f4f4;}/* Contenedor para centrar el contenido */.container { width: 80%; margin: auto; overflow: hidden; padding: 20px;}/* Estilo del encabezado */header { background: #333; color: #fff; padding: 20px; text-align: center;}/* Estilo de la imagen del encabezado y el nombre */.headshot { width: 150px; height: 150px; border-radius: 50%; display: block; margin: 20px auto;}header h1 { margin-bottom: 10px;}/* Estilo de la información de contacto */#contactInfo { font-size: 1.1em; margin-bottom: 20px; color: #fff; padding: 15px;}/* Estilo de la sección para empleo, educación y habilidades */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;}/* Estilo de la línea de tiempo */#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; }/* Estilo del contenido de la descripción del trabajo */#timeline .entry-content p { padding: 5px 10px; background: #f9f9f9; border-left: 3px solid #333; display: block; }/* Estilo de la lista para educación y habilidades */section ul { list-style: inside square; padding: 0 20px;}section ul li { padding: 2px 0;}/* Ajustes para la clase activa */.entry.active .entry-header { background-color: #e2e2e2; color: #333; }.entry.active .entry-content { display: block; }/* Indicación visual de elementos clicables */.entry .entry-header:after { content: ' (haz clic para expandir)'; font-size: 0.8em; color: #666;}.entry.active .entry-header:after { content: ' (haz clic para colapsar)'; font-size: 0.8em; color: #666; }archivo script.js
// Se utiliza en el currículum para hacer que la historia laboral sea interactiva (cada empleo es clickeable)document.addEventListener('DOMContentLoaded', function () { // Placeholder array con los datos de la historia laboral const employmentHistory = [ { id: 1, title: 'Título del trabajo', company: 'Nombre de la empresa', years: 'Año - Año', description: 'Descripción de lo que hiciste' }, { id: 2, title: 'Título del trabajo', company: 'Nombre de la empresa', years: 'Año - Año', description: 'Descripción de lo que hiciste' }, { id: 3, title: 'Título del trabajo', company: 'Nombre de la empresa', years: 'Año - Año', description: 'Descripción de lo que hiciste' } // Agregar más entradas si es necesario ]; const timeline = document.getElementById('timeline'); // Crear entradas de la línea de tiempo employmentHistory.forEach(job => { // Contenedor de entrada para el trabajo const entry = document.createElement('div'); entry.className = 'entry'; entry.id = 'entry-' + job.id; // Encabezado de título para el trabajo const header = document.createElement('div'); header.className = 'entry-header'; header.innerText = job.title; // Contenedor de contenido para el trabajo, inicialmente oculto const content = document.createElement('div'); content.className = 'entry-content'; content.innerHTML = `<strong>Empresa:</strong> ${job.company}<br> <strong>Años:</strong> ${job.years}<br> <p>${job.description}</p>`; content.style.display = 'none'; // Adjuntar el encabezado y el contenido a la entrada entry.appendChild(header); entry.appendChild(content); // Evento para alternar la visibilidad del contenido header.addEventListener('click', function () { // Comprobar si el contenido del encabezado clickeado está actualmente visible const isContentShown = content.style.display === 'block'; // Ocultar todos los contenidos abiertos document.querySelectorAll('.entry-content').forEach(el => { el.style.display = 'none'; // Ocultar contenido }); // Desactivar todos los encabezados document.querySelectorAll('.entry').forEach(el => { el.classList.remove('active'); // Eliminar clase activa }); if (!isContentShown) { // Si no estaba visible anteriormente, mostrarlo content.style.display = 'block'; entry.classList.add('active'); } // Si estaba visible, se ocultará como parte del bucle anterior }); timeline.appendChild(entry); });});Crea un Bucket de S3 y Configúralo para Alojar un Sitio Web Estático y Acceso Público
Ahora que tienes tus tres archivos de código (y no te olvides de un “headshot.jpg” para mostrar tu cara sonriente), necesitas un lugar donde ponerlos.
En AWS, S3 es una excelente opción para el almacenamiento barato de objetos (es decir, archivos). Y si solo estás utilizando código del lado del cliente como tú, entonces puedes configurar S3 para alojar sitios web estáticos.
Crea un bucket de S3
En la Consola de Administración de AWS, navega hasta S3.
Haz clic en Crear bucket.
Ingresa los detalles para tu bucket.
- Nombre del bucket: IMPORTANTE! Si planeas utilizar un dominio personalizado para tu currículum, entonces el nombre de este bucket debe coincidir exactamente con el nombre de dominio. Por ejemplo, yo utilizaré “amberaws.com” por lo que el nombre de mi bucket debe ser “amberaws.com”. Si utilizas un nombre diferente, tendrás problemas cuando llegues a la parte de Route 53 del tutorial.
- Región de AWS: Puedes elegir cualquier región que desees, pero recomendaría elegir la más cercana a ti.
- Propiedad de Objeto: Deja la opción predeterminada de ACLs desactivados (recomendado).
Desplázate hacia abajo y deselecciona la opción de Bloquear todo el acceso público. NOTA: En la mayoría de los escenarios, esto no se recomienda, como verás en la advertencia que recibirás al desactivarlo. Pero como estás creando un currículum público que DESEAS que esté abierto al mundo, desactivar esto es apropiado.
Utiliza las opciones predeterminadas para el resto de la configuración del bucket y luego haz clic en Crear bucket.
Ahora tienes un bucket vacío, pero no está listo para ser utilizado como alojamiento de sitios web. Necesitarás hacer un par de actualizaciones más.
Habilita el alojamiento web estático
Para que S3 pueda servir tus archivos como un sitio web, necesitarás habilitar eso en el bucket.
Haz clic en el bucket que acabas de crear y ve a la pestaña de Propiedades.
Desplázate hasta el final de la página y en la sección de Alojamiento de sitio web estático, haz clic en Editar.
Selecciona Habilitar. Esto abrirá opciones adicionales.
Para el documento Index, ingresa index.html. Esto especifica la página de inicio predeterminada para el sitio (tu código HTML para tu currículum vitae). Luego haz clic en Guardar cambios.
Agrega una política del bucket para permitir que el contenido del bucket sea accesible al público
Cuando creaste el bucket, dijiste que no querías bloquear todo el acceso público. Pero incluso con esa configuración, el comportamiento predeterminado de S3 es “denegar” todo. Entonces, si no dices explícitamente que las personas pueden acceder a los archivos en tu bucket, no podrán hacerlo. Concederás permisos de lectura con una política del bucket.
En la parte superior de la página, haz clic en la pestaña de Permisos.
Desplázate hacia abajo hasta la sección de Política del bucket y haz clic en Editar.
Copia la siguiente política del bucket (código JSON).
{ "Version": "2012-10-17", "Statement": [ { "Sid": "PublicReadGetObject", "Effect": "Allow", "Principal": "*", "Action": [ "s3:GetObject" ], "Resource": [ "arn:aws:s3:::Bucket-Name/*" ] } ]}Pega el código en la sección de Política del panel de control de AWS. Esta política permite “Permitir” a todos (el Principal es “*”) realizar la acción de “GetObject” (básicamente “leer”) en todos los archivos de tu bucket (“Bucket-Name/*”).
IMPORTANTE: Actualiza “Bucket-Name” con el nombre de tu bucket. Luego haz clic en Guardar cambios.
Ahora tienes un bucket configurado para hospedaje de sitios web estáticos y has aplicado una política que permitirá que las personas accedan al sitio. Ahora es el momento de agregar los impresionantes archivos de código que creaste anteriormente.
En la parte superior de la página, haz clic en la pestaña de Objetos.
Haz clic en el botón de Subir.
Arrastra y suelta tus cuatro archivos en el navegador. Esto debería incluir index.html, styles.css, script.js y headshot.jpg.
Después de cargar los archivos y ver que los cuatro se muestran en la sección de Archivos y carpetas, haz clic en el botón de Subir.
Ahora es el momento de probar que tu currículum se carga correctamente. Para hacer esto, necesitarás obtener el punto de conexión del sitio web del bucket de S3.
Navega hasta la pestaña de Propiedades del bucket.
Desplázate hasta la parte inferior de la página, hasta la sección Hosteo de sitio web estático. Haz clic en el enlace Endpoint del sitio web del Bucket (se abrirá en una nueva pestaña).
Si todo funcionó bien, deberías ver tu trabajo exhibido en el navegador. ¡Hurra!
¡Felicitaciones por alojar tu currículum en S3 con acceso público! Pero, tan impresionante como es, sería aún más impresionante si estuviera usando un dominio personalizado. Actualmente, está utilizando la URL del sitio web de S3, formateada como [nombredelbucket].s3-website-[nombredelaregión].amazonaws.com.
Trabajemos en el nombre de dominio siguiente, utilizando Route 53, que es el servicio de Amazon para nombres de dominio y DNS.
Opción de nombre de dominio 1: Registrar un nuevo nombre de dominio con Route 53
Si aún no tienes un nombre de dominio, puedes registrarlo con AWS utilizando Route 53. (Si ya tienes un nombre de dominio con otro proveedor, te daré algunas orientaciones generales sobre cómo usarlo en la siguiente sección).
Dirígete a Route 53.
En el panel de Route 53, simplemente ingresa el nombre de dominio que te interese y luego haz clic en Verificar.
Si el nombre de dominio está disponible, podrás Seleccionarlo (y si no está disponible, verás algunas alternativas). Al seleccionarlo, se agregará al carrito, te guiarán en un proceso de pago y luego el cargo aparecerá en tu factura de AWS.
Después de comprar el dominio, se creará automáticamente una zona alojada para ti. Puedes pensar en una zona alojada como un contenedor para registros y reglas que controlan cómo se enruta el tráfico.
Una zona alojada pública (con la que trabajarás) controla el tráfico desde Internet. Una zona alojada privada controla el tráfico interno de una Virtual Private Cloud (VPC) de AWS.
Puedes ver tus zonas alojadas haciendo clic en Zonas alojadas en la navegación izquierda, luego haz clic en la zona que coincide con el nombre de dominio que compraste (“amberaws.com” en mi caso).
Opción de nombre de dominio 2: Usa un nombre de dominio de un proveedor externo
Entonces, ya tienes un nombre de dominio de otro lugar, como GoDaddy, Namecheap, Google Domains u otros. Es completamente posible usar Route 53 como tu servicio de DNS (que tiene muchos beneficios y es fácil de integrar con otros servicios de AWS), mientras mantienes el nombre de dominio con tu otro proveedor.
Los detalles de cada registrador son ligeramente diferentes, así que daré algunas orientaciones generales aquí. También debes saber que la propagación de los cambios de DNS tomará más tiempo con un proveedor externo, y si algo sale mal, probablemente tendrás que trabajar directamente con ellos. ¡Pero te ayudaré a empezar!
Crea una zona hospedada y obtén tus servidores de nombres
Incluso si no estás utilizando un nombre de dominio de Route 53, aún necesitarás una zona hospedada (nuevamente, esto contiene los registros y reglas que controlan cómo se enruta el tráfico).
Haz clic en Zonas hospedadas en la navegación izquierda, luego haz clic en Crear zona hospedada.
Ingresa el nombre de dominio del proveedor de terceros, selecciona Zona hospedada pública y luego haz clic en Crear zona hospedada.
Una vez que se haya creado tu zona hospedada pública, verás cuatro servidores de nombres listados. Toma nota de estos.
A continuación, ve a la configuración de DNS de tu proveedor de dominio actual. Encuentra la configuración de los servidores de nombres y reemplázalos con los servidores de nombres de Route 53.
Para más detalles específicos, aquí tienes guías de algunos de los proveedores de nombres de dominio más populares:
Después de haber realizado las actualizaciones en el sitio de terceros, y una vez que los cambios se hayan propagado, deberías estar listo para seguir con el resto de este artículo.
Crea un registro A con un alias para apuntar al sitio web de S3
Ahora que tienes una zona hospedada pública, necesitas crear un registro que indique cómo se debe enrutar el tráfico cuando alguien visita tu nombre de dominio.
Haz clic en tu zona hospedada y luego haz clic en Crear registro.
NOTA: Si ves la vista “asistente” a continuación, haz clic en Cambiar a creación rápida. (Si no ves esta vista “mosaico”, significa que ya estás en el modo de creación rápida).
Rellena los detalles del registro.
- Nombre del registro: Deja en blanco el subdominio y utiliza solo el dominio raíz (como “amberaws.com”).
- Tipo de registro: A
- Alias: Activa esta opción. Un alias te permite enrutar a recursos de AWS como S3, CloudFront, Elastic Beanstalk, etc.
Ahora ingresa los detalles de dónde enrutar el tráfico. Puedes escribir en estas listas desplegables para filtrar los valores.
- Alias al punto de enlace del sitio web de S3
- Tu región (Estoy utilizando US West (Oregon))
- La lista desplegable final se debería completar automáticamente con tu sitio web de S3. NOTA: Si no aparece nada aquí, probablemente sea porque no has nombrado tu bucket con el mismo nombre que tu dominio. ¡Ups! Tendrás que crear de nuevo el bucket con el nombre exacto de tu dominio.
Para la política de enrutamiento, selecciona Enrutamiento simple. Para Evaluar el estado del destino, deja el valor padrón de Sí, luego haz clic en Crear registros.
Puede tomar hasta 60 segundos para que los cambios tengan efecto. Puedes ver el estado de propagación haciendo clic en el práctico botón Ver estado en la parte superior de la página.
Después de que el Estado cambie de PENDIENTE a En sincronización, deberías poder probar tus cambios.
¡Ahora vamos a probar! Si todo funcionó, cuando escribas el nombre de tu dominio en un navegador (como amberaws.com), Route 53 te dirigirá al sitio web de S3, lo cual significa que deberías ver tu (impresionante) currículum.
¡Felicitaciones! Has hecho un gran progreso. La última parte es establecer una conexión segura (HTTPS, con un certificado TLS/SSL) para que puedas deshacerte de ese molesto mensaje “No seguro” en tu navegador.
Ahora vamos a abordar esa parte utilizando AWS Certificate Manager.
Crea un certificado público TLS/SSL utilizando AWS Certificate Manager
Si necesitas un recordatorio sobre certificados, estos ayudan a garantizar una conexión segura entre los usuarios y el servidor al que están haciendo una solicitud.
Por ejemplo, si envío información bancaria a través de internet, quiero asegurarme de que está yendo a un servidor confiable y que la conexión está encriptada. E incluso para algo tan “simple” como un currículum, una conexión segura dará confianza a los espectadores de que no han terminado en un sitio web sospechoso.
En el mundo de AWS, los certificados se crean y administran en AWS Certificate Manager (ACM). (También puedes importar certificados existentes de otra autoridad si los tienes.)
Navega hasta Certificate Manager.
IMPORTANTE: Para esta sección, necesitas cambiar tu región a us-east-1 (N. Virginia). Si creas un certificado en otra región, no podrás usarlo con CloudFront (donde terminarás eventualmente).
Desde la página de inicio de Certificate Manager, haz clic en Solicitar un certificado.
Seleccione Solicitar un certificado público y luego haga clic en Siguiente.
Ingrese su nombre de dominio (por ejemplo, “amberaws.com”), deje el resto de las opciones como predeterminadas y luego haga clic en Solicitar.
La solicitud se realizó correctamente, pero tendrá un estado de “validación pendiente” hasta que valide DNS. Haga clic en Ver certificado.
Antes de que se pueda emitir un certificado, Amazon debe confirmar que usted es el propietario de este dominio y que puede modificar la configuración de DNS (en Route 53). Para iniciar este proceso, haga clic en Crear registros en Route 53.
En esta próxima pantalla se aplican varios filtros para verificar el estado de validación y si se encuentra su dominio en Route 53. Desde aquí, puede hacer clic en Crear registros, lo que en realidad – espérese – creará un registro en Route 53 por usted.
Si la creación del registro fue exitosa, debería ver un mensaje en ese sentido.
El registro se creó en Route 53. Por lo tanto, vaya a Route 53, a su zona hospedada en la que estaba trabajando anteriormente. Debería ver un nuevo registro CNAME que fue creado desde Certificate Manager.
¡Genial! Ahora tiene un certificado TLS/SSL, ¿pero qué hace con él?
Actualmente, sus archivos del sitio web están alojados en S3, pero lamentablemente no puede utilizar un certificado en un bucket de S3.
Lo que necesita en su lugar es una distribución de CloudFront que apunte al bucket de S3. Y luego se aplica el certificado a la distribución de CloudFront.
¿Sabes lo que eso significa, verdad? ¡Significa que debemos dirigirnos a CloudFront a continuación!
Crear una Distribución de CloudFront
CloudFront es la red de entrega de contenido (CDN por sus siglas en inglés) de Amazon. Se utiliza para enviar contenido a los usuarios de manera más rápida mediante su almacenamiento en “ubicaciones de borde” distribuidas por todo el mundo. Esto funciona muy bien para cosas como videos e imágenes, ya que se cargan más rápido.
Para tu sencillo currículum, debido a que los archivos son muy pequeños, probablemente no notarás mucha diferencia en el rendimiento. Pero esta es la forma en que podrás aplicar el certificado TLS/SSL que creaste en la sección anterior.
Dirígete a CloudFront.
En la página principal de CloudFront, haz clic en Crear una distribución de CloudFront.
El dominio de origen es donde se encuentran los archivos de tu sitio web, que está en S3. Si escribes S3 en el filtro, debería mostrarse tu bucket.
Pero espera ¡Recibes un mensaje sobre usar el punto de conexión del sitio web en lugar del punto de conexión del bucket. Sí, ¡eso es lo que quieres! Haz clic en Usar punto de conexión del sitio web, y AWS actualizará el punto de conexión por ti.
Hay un montón de configuraciones en el resto de esta página, pero solo necesitas actualizar algunas de ellas.
Desplázate hacia abajo hasta la sección Configuración de caché predeterminada, luego, debajo de Visor, selecciona Redirigir HTTP a HTTPS.
Desplázate hacia abajo hasta Firewall de aplicaciones web (WAF) y selecciona No habilitar protecciones de seguridad.
En la siguiente sección, Configuraciones:
- Para Nombre de dominio alternativo (CNAME), ingresa tu nombre de dominio (por ejemplo, “amberaws.com”).
- Para Certificado SSL personalizado, selecciona el certificado que configuraste anteriormente. NOTA: si lo configuraste en una región distinta a us-east-1 (N. Virginia), no aparecerá aquí. ¡Ups! Tendrás que crearlo de nuevo en us-east-1.
Desplázate hasta la parte inferior de la página.
Para Objeto raíz predeterminado, ingresa index.html (tu página de inicio predeterminada) y luego haz clic en Crear distribución.
Llevará varios minutos para que la distribución de CloudFront termine de implementarse (incluso si dice “Creado exitosamente” en la parte superior de la página). Sabrás que está listo cuando la fecha y hora aparezcan en el valor de Última modificación.
Para probar que todo funcione correctamente con CloudFront y el certificado TLS/SSL, copia el Nombre de dominio de la distribución. Abre una nueva pestaña en el navegador y navega hasta esa dirección.
Si todo ha funcionado, ahora deberías ver el icono del candado tan importante en tu navegador, indicando que estás en una conexión segura utilizando el certificado configurado a través de Certificate Manager.
¡Increíble! Pero antes de emocionarte pensando que hemos terminado, recuerda que lo que realmente quieres es ir a tu nombre de dominio personalizado para cargar el currículum, no a este largo nombre de dominio de distribución de CloudFront.
Actualizar Route 53 para apuntar a la Distribución de CloudFront
En este momento, el Registro A en Route 53 está apuntando al bucket de S3, así:
En cambio, queremos que Route 53 apunte a la distribución de CloudFront, que a su vez apunta a S3, de esta manera:
Vuelve a Route 53, a la zona de alojamiento con la que has estado trabajando. Selecciona el Registro A, luego a la derecha de la pantalla, haz clic en Editar registro.
En lugar de dirigir el tráfico a S3, actualiza las tres selecciones desplegables para apuntar a tu distribución de CloudFront.
- Alias a la distribución de CloudFront
- US East (N. Virginia) (esta opción se selecciona automáticamente y está desactivada)
- Elige tu distribución (debería rellenarse automáticamente en la tercera selección desplegable)
Haz clic en Guardar.
Mira el Resultado Final
Y ahora el momento de la verdad: si todo ha funcionado, deberías poder acceder a tu nombre de dominio personalizado y cargar tu currículum en una conexión segura.
¡Y VOILÀ! Funciona.
Los archivos del currículum (que provienen de S3 a través de CloudFront) se cargan en el nombre de dominio personalizado (desde Route 53) en una conexión segura utilizando el certificado TLS/SSL (desde Certificate Manager). Buen trabajo.
Esto es lo que has construido:
¡IMPORTANTE! Elimina tus recursos
Al principio del artículo, mencioné los costos de los servicios. Si decides dejarlos funcionando, no debería costarte una fortuna (a menos que, por supuesto, tu currículum se vuelva viral y de repente estés pagando por una gran cantidad de tráfico en Route 53 y CloudFront… quizás un buen problema?).
Pero definitivamente configura un Presupuesto de AWS para que te notifiquen cuando los cargos alcancen un umbral determinado.
Para aquellos que deseen eliminar todo lo que han construido, hagámoslo ahora.
Deshabilita y elimina la distribución de CloudFront
Ve a CloudFront y selecciona tu distribución. Antes de poder eliminarla, primero debes Deshabilitarla.
Esto llevará varios minutos en completarse, y debe finalizar antes de que puedas eliminar otras cosas. Así que déjalo correr. Cuando termine, deberías ver una fecha y hora en la columna Última modificación.
Una vez que la distribución esté deshabilitada, selecciónala y luego haz clic en Eliminar.
Eliminar registros de la zona alojada de Route 53
Navega hasta Route 53 y la zona alojada en la que has estado trabajando. Los registros no tienen ningún costo, pero si no planeas utilizarlos, es buena idea eliminarlos para evitar confusiones en el futuro.
Selecciona el Registro A y el Registro CNAME y luego haz clic en Eliminar registros.
Eliminar la zona alojada (opcional)
También puedes optar por eliminar tu zona alojada en Route 53, pero si lo haces, tu dominio podría dejar de estar disponible en internet.
Si planeas utilizar tu nombre de dominio en algún momento en el futuro, te recomendaría que mantengas la zona alojada (yo he decidido mantener la mía). Mantener la zona te costará 50 centavos al mes.
Pero si deseas continuar con la eliminación, simplemente selecciona la zona alojada y haz clic en Eliminar.
Confirma que has completado las acciones de este mensaje de advertencia, escribe “eliminar“, y luego haz clic en Eliminar.
Eliminar el certificado de Certificate Manager
Navega hasta Certificate Manager. Selecciona el certificado que creaste, luego haz clic en Eliminar. (Si la distribución de CloudFront aún no ha sido deshabilitada, recibirás un error en este paso que indica que el recurso aún está en uso.)
Vaciar el bucket de S3 y luego eliminarlo
Navega hasta S3, a la lista de todos tus buckets. Selecciona el bucket y luego haz clic en Eliminar.
Antes de poder eliminar un bucket, primero debes eliminar los archivos en él. AWS proporciona un práctico enlace para hacerlo. Haz clic en el enlace para configurar la eliminación del bucket.
Confirma que deseas eliminar permanentemente los archivos (así lo quieres) escribiendo “eliminar permanentemente” y luego haz clic en Vaciar.
Ahora que el cubo está vacío, puedes eliminarlo. Y en el mensaje de éxito en la parte superior de la pantalla, hay un enlace conveniente para hacerlo. Haz clic en eliminar configuración de cubo.
Confirma esta acción escribiendo el nombre de tu cubo, luego haz clic en Eliminar cubo.
¡Y eso es todo! Los recursos se han eliminado y no deberías incurrir en cargos adicionales.
Conclusion
¡Felicidades por llegar hasta el final! Espero que hayas logrado construir exitosamente un currículum vitae y, al mismo tiempo, afianzar tus habilidades de AWS para el futuro. Siéntete libre de compartirlo con el mundo y mucha suerte en tu búsqueda de empleo.
Para más tutoriales sobre AWS y otras tecnologías, visita Tiny Technical Tutorials en YouTube.
Leave a Reply