Hay mucho rumor sobre las aplicaciones que se ejecutan en el borde en lugar de en un servidor centralizado en el desarrollo web. Ejecutar su aplicación en el borde permite que su código esté más cerca de sus usuarios, lo que lo hace más rápido. Sin embargo, hay un espectro de aplicaciones de borde. Muchas aplicaciones solo tienen algunas partes, generalmente contenido estático, en el borde. Pero puede moverse aún más al borde, como la informática y las bases de datos. Este artículo describe cómo hacerlo.
Introducción al borde
Primero, veamos qué es realmente el borde.
El “borde” se refiere a ubicaciones diseñadas para estar cerca de los usuarios en lugar de estar en un lugar centralizado. Los servidores perimetrales son servidores más pequeños ubicados en el perímetro. Tradicionalmente, los servidores se han centralizado para que solo haya un servidor disponible. Esto hizo que los sitios web fueran más lentos y menos confiables. Eran más lentos porque el servidor a menudo puede estar lejos del usuario. Digamos que tiene dos usuarios, uno en Singapur y otro en los EE. UU., y su servidor está en los EE. UU. Para el cliente en los EE. UU., el servidor estaría cerca, pero para la persona en Singapur, la señal tendría que atravesar todo el Pacífico. Esto agrega latencia, lo que hace que su aplicación sea más lenta y menos receptiva para el usuario. Colocar sus servidores en el perímetro mitiga este problema de latencia.
Arquitectura normal del servidor
Con un diseño de servidor perimetral, sus servidores tienen versiones más livianas en múltiples áreas diferentes, por lo que un usuario en Singapur podría acceder a un servidor en Singapur y un usuario en los EE. UU. también podría acceder a un servidor cercano. Múltiples servidores en el borde también hacen que una aplicación sea más confiable porque si el servidor en Singapur se desconectara, el usuario en Singapur aún podría acceder al servidor de EE. UU.
Arquitectura de borde
Muchas aplicaciones tienen más de 100 ubicaciones de servidor diferentes en el perímetro. Sin embargo, varias ubicaciones de servidor pueden agregar un costo significativo. Para que sea más barato y fácil para los desarrolladores aprovechar el poder del perímetro, muchos servicios ofrecen la capacidad de implementarse fácilmente en el perímetro sin tener que gastar mucho dinero o tiempo administrando varios servidores. Hay muchos tipos diferentes de estos. La más básica y ampliamente utilizada es una red de entrega de contenido (CDN) perimetral, que permite servir contenido estático desde el perímetro. Sin embargo, los CDN no pueden hacer nada más complicado que servir contenido. Si necesita bases de datos o código personalizado en el perímetro, necesitará un servicio más avanzado.
Introducción a funciones perimetrales y bases de datos perimetrales
Afortunadamente, hay soluciones para esto. El primero de los cuales, para ejecutar código en el perímetro, son las funciones perimetrales. Estos son pequeños fragmentos de código, aprovisionados automáticamente cuando es necesario, que están diseñados para responder a solicitudes HTTP. También se denominan comúnmente funciones sin servidor. Sin embargo, no todas las funciones sin servidor se ejecutan en el perímetro. Algunos proveedores de funciones perimetrales son [email protected], Trabajadores de Cloudflare y Deno Deploy. En este artículo, nos centraremos en los trabajadores de Cloudflare. También podemos llevar las bases de datos al límite para garantizar que nuestras funciones sin servidor se ejecuten rápidamente incluso cuando se consulta una base de datos. También existen soluciones para bases de datos, la más sencilla de las cuales es Fauna. Con las bases de datos tradicionales, es muy difícil o casi imposible escalar a múltiples regiones diferentes. Debe administrar diferentes servidores y cómo se replican las actualizaciones de la base de datos entre ellos. Fauna, sin embargo, abstrae todo eso, lo que le permite usar una base de datos de varias regiones con solo hacer clic en un botón. También proporciona una interfaz GraphQL fácil de usar y su propio lenguaje de consulta si necesita más. Mediante el uso de Cloudflare Workers y Fauna, podemos crear una verdadera aplicación perimetral en la que todo se ejecuta en el perímetro.
Uso de Cloudflare Workers y Fauna para crear un acortador de URL
Configuración de Cloudflare Workers y el código
Los acortadores de URL deben ser rápidos, lo que hace que Cloudflare Workers y Fauna sean perfectos para esto. Para comenzar, clone el repositorio en github.com/AsyncBanana/url-shortener y configure su directorio en la carpeta generada.
git clone https://github.com/AsyncBanana/url-shortener.git
cd url-shortenerLuego, instale wrangler, la CLI necesaria para Cloudflare Workers. Después de eso, instale todas las dependencias de npm.
npm install -g @cloudflare/wrangler
npm installLuego, regístrese para los trabajadores de Cloudflare en https://dash.cloudflare.com/sign-up/workers y ejecute el inicio de sesión de wrangler. Finalmente, para finalizar la configuración de Cloudflare Workers, ejecute wrangler whoami y tome la identificación de la cuenta desde allí y colóquela dentro de wrangler.toml, que se encuentra en el acortador de URL.
configurando la fauna
Buen trabajo, ahora necesitamos configurar Fauna, que proporcionará la base de datos perimetral para nuestro acortador de URL.
Primero, regístrese para obtener una cuenta de Fauna. Una vez que haya terminado, cree una nueva base de datos haciendo clic en “crear base de datos” en el tablero. Ingrese URL-Shortener para el nombre, haga clic en clásico para la región y desmarque usar datos de demostración.
Así es como debería verse
Una vez que haya creado la base de datos, haga clic en Colecciones en la barra lateral del tablero y haga clic en “crear nueva colección”. Asigne un nombre a las URL de la colección y haga clic en Guardar.
A continuación, haga clic en la pestaña Seguridad en la barra lateral y haga clic en “Nueva clave”. A continuación, haga clic en Guardar en el modal y copie la clave API resultante. También puede nombrar la clave, pero no es obligatorio. Finalmente, copie la clave en el archivo llamado .env en el código debajo FAUNA_KEY.
Este es el aspecto que debería tener el archivo .env, excepto con API_KEY_HERE reemplazado con su clave
¡Buen trabajo! Ahora podemos empezar a codificar.
Crear el acortador de URL
Hay dos carpetas principales en el código, public y src. La carpeta pública es donde se almacenan todos los archivos de cara al usuario. src es la carpeta donde está el código del servidor. Puede revisar y editar HTML, CSS y JavaScript del lado del cliente si lo desea, pero ahora nos centraremos en el código del lado del servidor. si miras adentro src, deberías ver un archivo llamado urlManager.js. Aquí es donde irá nuestro código de acortamiento de URL.
Este es el administrador de URL
Primero, necesitamos hacer el código para crear URL acortadas. en la función createUrl, cree una consulta de base de datos ejecutando FaunaClient.query(). Ahora, usaremos Fauna Query Language (FQL) para estructurar la consulta. Fauna Query Language está estructurado usando funciones, todas disponibles bajo q en este caso. Cuando ejecuta una consulta, coloca todas las funciones como argumentos en FaunaClient.query(). Dentro FaunaClient.query(), agregar:
q.Create(q.Collection("urls"),{
data: {
url: url
}
})Lo que esto hace es crear un nuevo documento en las URL de la colección y colocar un objeto que contiene la URL para redirigir. Ahora, necesitamos obtener la identificación del documento para que podamos devolverlo como un punto de redirección. Primero, para obtener la identificación del documento en la consulta de Fauna, coloque q.Create en el segundo argumento de q.Select, siendo el primer argumento [“ref”,”id”]. Esto obtendrá la identificación del nuevo documento. Luego, devuelva el valor devuelto por la espera de FaunaClient.query(). La función ahora debería verse así:
return await FaunaClient.query(
q.Select(
["ref", "id"],
q.Create(q.Collection("urls"), {
data: {
url: url,
},
})
)
);
}Ahora, si ejecuta wrangler dev y va a localhost:8787, deberías ver la página del acortador de URL. Puede ingresar una URL y hacer clic en enviar, y debería ver otra URL generada. Sin embargo, si va a esa URL, no hará nada. Ahora necesitamos agregar la segunda parte de esto, la redirección de URL.
mirar hacia atrás urlManager.js. Deberías ver una función llamada processUrl. En esa función, pon:
const res = await FaunaClient.query(q.Get(q.Ref(q.Collection("urls"), id)));Lo que esto hace es ejecutar una consulta de Fauna que obtiene el valor del documento en las URL de la colección con el especificado id. Puede usar esto para obtener la URL de la identificación en la URL. Próximo regreso res.data.url.url.
const res = await FaunaClient.query(q.Get(q.Ref(q.Collection("urls"), id)));
return res.data.url.url¡Ahora deberías estar listo! ¡Simplemente ejecute la publicación de wrangler, vaya a su dominio workers.dev y pruébelo!
Conclusión
¡Ahora tenga un acortador de URL que se ejecuta completamente en el borde! Si desea agregar más funciones u obtener más información sobre Fauna o Cloudflare Workers, consulte a continuación. Espero que hayas aprendido algo de esto, y gracias por leer.
Próximos pasos
- Mejore aún más la velocidad de su acortador de URL agregando almacenamiento en caché
- Agregar análisis
- Leer más sobre Fauna
Más información sobre los trabajadores de Cloudflare