Neon ahora está disponible en el mercado de Azure. La nueva integración entre Neon y Azure te permite gestionar tu suscripción y facturación de Neon a través del portal de Azure como si Neon fuera un producto de Azure. Azure serverless y Neon son una combinación natural: Azure serverless te libera de gestionar la infraestructura de tu servidor web. Neon hace lo mismo con las bases de datos, ofreciendo funciones adicionales como ramificación de datos y extensiones de bases de datos vectoriales.
Dicho esto, probemos esta nueva integración construyendo una API acortadora de URL con Neon, Azure serverless y Node.js.
Nota: Deberías tener acceso a un terminal, un editor como VS Code y Node v22 o posterior instalado.
Configuración de la infraestructura
Vamos a tener que hacer las cosas un poco al revés hoy. En lugar de escribir el código, primero configuraremos nuestra función serverless y base de datos.
Paso 1. Abre el portal web de Azure. Si aún no tienes uno, necesitarás crear una cuenta de Microsoft.
Paso 2. También tendrás que crear una suscripción si aún no tienes una, lo cual puedes hacer en Azure.
Paso 3. Ahora, podemos crear un grupo de recursos para almacenar nuestra función serverless y base de datos. Ve a la nueva página de creación de grupo de recursos de Azure y completa el formulario de esta manera:
- Esta es la página de creación de Grupo de Recursos de Azure con el grupo de recursos configurado como “AzureNeonURLShortener” y la ubicación establecida en West US 3.
- En general, utiliza la ubicación más cercana a ti y a tus usuarios, ya que la ubicación determinará la ubicación predeterminada de las funciones serverless y qué áreas tienen la menor latencia. No es vital en este ejemplo, pero puedes buscar a través del menú desplegable si deseas utilizar otra. Sin embargo, ten en cuenta que Neon aún no tiene ubicaciones en todas estas regiones, lo que significa que tendrías que colocar tu base de datos en una región más lejana de tu función serverless.
Paso 4. Haz clic en “Revisar y Crear” en la parte inferior para acceder a una página de revisión de configuración. Luego haz clic en “Crear” nuevamente.
Paso 5. Ahora, podemos crear una función serverless. Desafortunadamente, incluye otro formulario. Ve a la página de creación de la aplicación serverless de consumo Flex de Azure y completa el formulario. Utiliza el grupo de recursos creado anteriormente, elige un nombre único para la función serverless, coloca la función en la región de tu grupo de recursos y utiliza Node v20.
Paso 6. El nombre que elijas para tu aplicación sin servidor será el subdominio que Azure te proporciona para acceder a tu API, así que elige sabiamente. Después de completar todo, haz clic en “Revisar y crear” y finalmente, “Crear”. Azure debería redirigirte a la página de la nueva aplicación. Ahora podemos configurar Neon. Abre la nueva página de recursos de Neon en el portal de Azure y, como podrás imaginar, completa el formulario.
Cómo crear una base de datos Neon en Azure
Paso 1. Crea una nueva página de recursos de Neon con “AzureURLNeonShortener” como grupo de recursos, “URLShortenerDB” como nombre del recurso y “West US 3” como ubicación. Si la región que elegiste no está disponible, elige la región más cercana. Una vez que completes todo, haz clic en “Revisar y crear” y luego en “Crear”, como lo hiciste con los recursos anteriores.
Paso 2. Es posible que tengas que esperar un poco para que la base de datos de Neon se instancie. Una vez que lo haga, abre su página de configuración y haz clic en “Ir a Neon”.
Paso 3. Serás redirigido a una página de inicio de sesión. Permite que Neon acceda a tu información de Azure y luego deberías encontrarte en una página de creación de proyecto. Completa el formulario a continuación:
El nombre del proyecto y de la base de datos no son significativos, pero asegúrate de ubicar la base de datos en Azure West US 3 (o en la región que elijas). Esto evitará que las consultas de la base de datos salgan del centro de datos, lo que disminuirá la latencia.
Paso 4. Haz clic en “Crear” en la parte inferior de la página, manteniendo la configuración de autoscaling predeterminada. Ahora deberías ser redirigido a una página de base de datos de Neon. Esta página tiene nuestra cadena de conexión, que necesitaremos para conectarnos a nuestra base de datos desde nuestro código. Haz clic en “Copiar fragmento” para copiar la cadena de conexión.
Asegúrate de no perder esto, ya que lo necesitaremos más tarde, pero por ahora, necesitamos estructurar nuestra base de datos.
Paso 5. Haz clic en “Editor SQL” en la navegación lateral y pega el siguiente SQL:
CREATE TABLE IF NOT EXISTS urls(id char(12) PRIMARY KEY, url TEXT NOT NULL);
Luego haz clic en “Ejecutar”. Esto creará la tabla que usaremos para almacenar URLs. La tabla es bastante simple: la clave primaria ID es una cadena aleatoria de 12 caracteres que usaremos para referirnos a las URLs, y la URL es una cadena de longitud variable que almacenará la URL en sí.
Paso 6. Si miras la vista de Tabla en la navegación lateral, deberías ver una tabla “urls”. Finalmente, necesitamos obtener nuestra cadena de conexión. Haz clic en “Tablero” en la navegación lateral, encuentra la cadena de conexión y haz clic en “Copiar fragmento.”
Ahora, podemos empezar a escribir código.
Construyendo la API
Paso 1. Primero, debemos instalar el CLI sin servidor de Azure, que nos ayudará a crear un proyecto y eventualmente probar/publicarlo. Abre una terminal y ejecuta:
npm install -g azure-functions-core-tools --unsafe-perm true
Paso 2. Si deseas usar otros administradores de paquetes como Yarn o pnpm, simplemente reemplaza npm con tu administrador de paquetes preferido. Ahora, podemos comenzar con nuestro proyecto real. Abre la carpeta donde deseas que esté el proyecto y ejecuta los siguientes tres comandos:
func init --javascript
func new --name submit --template "HTTP trigger"
func new --name url --template "HTTP trigger"
npm install nanoid @neondatabase/serverless
Ahora, deberías ver un nuevo proyecto de Azure en esa carpeta. El primer comando crea el proyecto, los dos siguientes comandos crean nuestras rutas de API sin servidor, y el comando final instala el controlador sin servidor de Neon para la interfaz con nuestra base de datos y Nano ID para generar IDs. Podríamos usar un controlador estándar de Postgres en lugar del controlador de Neon, pero el controlador de Neon utiliza consultas HTTP sin estado para reducir la latencia de consultas únicas. Dado que estamos ejecutando una función sin servidor que podría procesar solo una solicitud y enviar una consulta, la latencia de consulta única es importante.
Deberías centrarte en el código en src/functions, ya que ahí es donde están nuestras rutas. Deberías ver dos archivos allí: submit.js y redirect.js.
submit.js
submit.js almacenará el código que usamos para enviar URLs. Primero, abre submit.js y reemplaza su código con el siguiente:
import { app } from "@azure/functions";
import { neon } from "@neondatabase/serverless";
import { nanoid } from "nanoid";
const sql = neon("[YOUR_POSTGRES_CONNECTION_STRING]");
app.http("submit", {
methods: ["GET"],
authLevel: "anonymous",
route: "submit",
handler: async (request, context) => {
if (!request.query.get("url"))
return {
body: "No url provided",
status: 400,
};
if (!URL.canParse(request.query.get("url")))
return {
body: "Error parsing url",
status: 400,
};
const id = nanoid(12);
await sql`INSERT INTO urls(id,url) VALUES (${id},${request.query.get(
"url"
)})`;
return new Response(`Shortened url created with id ${id}`);
},
});
Vamos a desglosar esto paso a paso. Primero, importamos la API de funciones de Azure, el controlador sin servidor de Neon y Nano ID. Estamos usando ESM (Módulos ESM) aquí en lugar de CommonJS. Más adelante tendremos que hacer algunos cambios para dar soporte a esto.
A continuación, creamos la conexión a nuestra base de datos. Reemplaza [TU_CADENA_DE_CONEXIÓN_DE_POSTGRES] con la cadena que copiaste del panel de control de Neon. Por razones de seguridad, probablemente querrías usar un servicio como Azure Key Vault para gestionar tus claves en un entorno de producción, pero por ahora, simplemente colocarlas en el script servirá.
Ahora estamos en la ruta actual. Las primeras propiedades definen cuándo debe activarse nuestro controlador de ruta: queremos que esta ruta se active mediante una solicitud GET a submit.
Nuestro controlador es bastante simple. Primero verificamos si se ha pasado una URL a través del parámetro de consulta de la URL (por ejemplo, /submit?url=https://google.com), luego verificamos si es una URL válida a través de la nueva API URL.canParse. A continuación, generamos el ID con Nano ID. Dado que nuestros IDs tienen 12 caracteres de longitud, debemos pasar 12 al generador de Nano ID. Finalmente, insertamos una nueva fila con el nuevo ID y la URL en nuestra base de datos. El controlador sin servidor Neon parametriza automáticamente las consultas, por lo que no necesitamos preocuparnos por usuarios maliciosos que pasen declaraciones SQL en la URL.
redirect.js
redirect.js es donde ocurrirán nuestras redirecciones de URL reales. Reemplaza su código con lo siguiente:
import { app } from "@azure/functions";
import { neon } from "@neondatabase/serverless";
const sql = neon("[YOUR_POSTGRES_CONNECTION_STRING]");
app.http("redirect", {
methods: ["GET"],
authLevel: "anonymous",
route: "{id:length(12)}",
handler: async (request, context) => {
const url =
await sql`SELECT * FROM urls WHERE urls.id=${request.params.id}`;
if (!url[0]) return new Response("No redirect found", { status: 404 });
return Response.redirect(url[0].url, 308);
},
});
La primera sección del script es la misma que submit.js. Una vez más, reemplaza \[YOUR\_POSTGRES\_CONNECTION\_STRING\] con la cadena que copiaste del panel de control de Neon.
La ruta es donde las cosas se ponen más interesantes. Necesitamos aceptar cualquier ruta que pueda ser un ID de redirección, así que usamos un parámetro con la restricción de 12 caracteres de longitud. Ten en cuenta que esto podría superponerse si alguna vez tienes otra ruta de 12 caracteres. Si es así, puedes renombrar la ruta de redirección para que comience con una Z u otro carácter alfanuméricamente mayor para hacer que Azure sin servidor cargue la ruta de redirección después.
Finalmente, tenemos nuestro código de controlador actual. Todo lo que necesitamos hacer aquí es buscar una URL que coincida con el ID proporcionado y redirigir a ella si existe. Usamos el código de estado 308 en nuestra redirección para indicar a los navegadores y motores de búsqueda que ignoren la URL acortada original.
Archivos de configuración
Hay dos cambios más que necesitamos hacer. Primero, no queremos un prefijo /api en todas nuestras funciones. Para eliminar esto, abre host.json, que debería estar en el directorio de tu proyecto, y agrega lo siguiente:
"extensions": {
"http": {
"routePrefix": ""
}
}
Esto permite que tus rutas funcionen sin ningún prefijo. La otra cosa que necesitamos hacer es cambiar el proyecto a módulos ES. Abre package.json e inserta lo siguiente al final del archivo:
"type": "module"
¡Eso es todo!
Pruebas e implementación
Ahora, puedes probar localmente ejecutando func start. Puedes navegar a http://localhost:7071/submit?url=https://example.com, luego usa el ID que te proporciona y navega a http://localhost:7071/[TU_ID]. Deberías ser redirigido a example.com.
Por supuesto, no podemos simplemente ejecutar esto localmente. Para implementar, necesitamos instalar la CLI de Azure, lo cual puedes hacer con uno de los siguientes comandos, dependiendo de tu sistema operativo:
macOS (Homebrew)
brew install azure-cli
Windows (WPM)
winget install -e --id Microsoft.AzureCLI
Linux
curl -L <https://aka.ms/InstallAzureCli> | bash
Ahora, reinicia la terminal, inicia sesión ejecutando az login y ejecuta lo siguiente en el directorio del proyecto:
func azure functionapp publish [FunctionAppName]
Reemplaza [FunctionAppName] con el nombre que le diste a tu función anteriormente.
Ahora deberías poder acceder a tu API en [FunctionAppName].azurewebsites.net.
Conclusión
Ahora deberías tener un acortador de URL completamente funcional. Puedes acceder al código aquí y trabajar en agregar un front end. Si deseas seguir leyendo sobre las características de Neon y Azure, te recomendamos consultar Branching. De cualquier manera, espero que hayas aprendido algo valioso de esta guía.
Source:
https://dzone.com/articles/build-url-shortener-neon-azure-serverless-functions