Posted 2022-11-29Updated 2023-07-21AWS / Serverless Deployments4 minutes read (About 652 words)

Utilizando AWS Lambda para alojar un sitio web estático

Seguramente has utilizado lambda para crear alguna API o realizar funciones de procesamiento, pero, ¿Sabías que puedes desplegar un sitio web estático utilizando solamente Lambda?

Creando una nueva función Lambda

Desde la consola de administración de AWS utilizamos el buscador y colocamos Lambda. Seleccionamos la primera opción que se nos muestra.

Una vez en la página principal de Lambda, seleccionamos la opción de crear una nueva función.

Dentro del asistente de creación, seleccionamos la primera opción, Author from scratch, si tu consola de administración está en otro idioma, el orden de las opciones no cambia, solo debes utilizar los mismos botones.

Llenamos los datos que se nos solicitan en la sección de información básica (Basic Information), los datos por defecto funcionan bien para este tutorial por lo que únicamente debemos escoger un nombre para la función.

Bajamos un poco más y expandimos el menú de configuración avanzada (Advanced Settings). Seleccionamos la opción de “Enable Function URL” y en “Auth type” seleccionamos “None”. Esto nos creará un URL público desde donde podremos acceder a nuestra función. Por último, presionamos “Create function” para crear nuestra función.

Una vez creada la función nos encontramos con el panel de administración desde donde podremos modificar nuestro código, permisos, integraciones y demás. Una de las primeras cosas que veremos es un mapa con las integraciones de nuestra función y en la izquierda encontraremos la URL de invocación.

Habilitación del URL de la función Lambda

Esta URL ya es accesible, podemos ver que al presionarla, nos muestra un nuevo tab con un mensaje que dice “Hello from Lambda!”, este es el código por defecto al crear una nueva función.

Si seguimos bajando, encontraremos un editor de código desde donde podremos modificar nuestra función. Hacemos doble click sobre el archivo index.mjs y podremos ver el código fuente.

Sustituimos este código por el que colocaré a continuación, el objetivo de este es leer una página de HTML desde el mismo directorio y retornarla al cliente que realizar la solicitud.

import { readFileSync } from "fs";
const html = readFileSync('index.html', { encoding:'utf-8' });


export const handler = async (event) => {
    const response = {
        statusCode: 200,
        headers: {
            'Content-Type': 'text/html',
        },
        body: html,
    };
    return response;
};

Luego, presionamos el botón de File y seleccionamos “New File” esto abrirá una nueva pestaña en el editor y sobre esta, presionamos “Ctrl + S” para guardar el archivo, el nombre que colocaremos será index.html

Por último, modificamos el contenido de este archivo con la página HTML de nuestra preferencia, puede ser tan simple o tan complicada como deseemos, pero tomemos en cuenta que de momento únicamente devolvemos el archivo HTML al cliente, por lo que todos los scripts y estilos deben estar definidos dentro del mismo archivo HTML, no archivos externos. Dejo un ejemplo de una página HTML a continuación.

<!DOCTYPE html>
<Html>
   <Head>
      <title>  
         Mi primera página en AWS
      </title>
      <meta charset="UTF-8">
   </Head>
   <Body>
      <h1>Hola Creador</h1>
      <h2>Esta es tu primera página en AWS Lambda</h2>
   </Body>
</Html>

Cuando terminemos de modificar, debemos guardar los cambios hechos en cada pestaña y por último, hacemos click en “Deploy” para que se desplieguen nuestros cambios. Mientras no presiones el botón de deploy, un indicador visual nos recordará que nuestros cambios aún no se han hecho efectivos.

Desplegar los cambios en la función Lambda

Por último solo nos queda recargar el URL de invocación de la función y veremos nuestro sitio web estático con “Server side rendering”, un concepto del que hablaré en otro artículo.