Créer un raccourcisseur d’URL avec Neon, Azure Serverless Functions

Le Neon est maintenant disponible sur le marché Azure. La nouvelle intégration entre Neon et Azure vous permet de gérer votre abonnement Neon et votre facturation à travers le portail Azure comme si Neon était un produit Azure. Le serverless Azure et Neon sont une combinaison naturelle — le serverless Azure vous libère de la gestion de votre infrastructure de serveur web. Neon fait de même pour les bases de données, offrant des fonctionnalités supplémentaires comme le data branching et les extensions de base de données vectorielles.

Cela dit, essayons cette nouvelle intégration en construisant une API de raccourcisseur d’URL avec Neon, le serverless Azure et Node.js.

Remarque : Vous devez avoir accès à un terminal, un éditeur comme VS Code et Node v22 ou une version ultérieure installée.

Mise en place de l’infrastructure

Nous allons devoir faire les choses un peu à l’envers aujourd’hui. Au lieu d’écrire le code, nous allons d’abord configurer notre fonction serverless et notre base de données.

Étape 1. Ouvrez le portail web Azure. Si vous n’en avez pas déjà un, vous devrez créer un compte Microsoft.

Étape 2. Vous devrez également créer un abonnement si vous n’en avez pas déjà un, ce que vous pouvez faire dans Azure.

Étape 3. Maintenant, nous pouvons créer un groupe de ressources pour stocker notre fonction serverless et notre base de données. Accédez à la nouvelle page de création de groupe de ressources d’Azure et remplissez le formulaire comme ceci :

• Il s’agit de la page de création de groupe de ressources Azure avec le groupe de ressources défini sur « AzureNeonURLShortener » et l’emplacement défini sur West US 3.
• En général, utilisez l’emplacement le plus proche de vous et de vos utilisateurs, car l’emplacement déterminera le placement par défaut des fonctions serverless et les zones ayant la latence la plus faible. Ce n’est pas vital dans cet exemple, mais vous pouvez rechercher dans la liste déroulante si vous souhaitez en utiliser un autre. Cependant, notez que Neon n’a pas encore d’emplacements dans toutes ces régions, ce qui signifie que vous devriez placer votre base de données dans une région plus éloignée de votre fonction serverless.

Étape 4. Cliquez sur « Examiner et créer » en bas pour accéder à une page d’examen de configuration. Ensuite, cliquez à nouveau sur « Créer ».

Étape 5. Maintenant, nous pouvons créer une fonction serverless. Malheureusement, cela inclut un autre formulaire. Accédez à la page de création d’application serverless Azure Flex consumption et remplissez le formulaire. Utilisez le groupe de ressources précédemment créé, choisissez un nom unique pour la fonction serverless, placez la fonction dans la région de votre groupe de ressources et utilisez Node v20.

Étape 6. Le nom que vous choisissez pour votre application sans serveur sera le sous-domaine qu’Azure vous donne pour accéder à votre API, choisissez donc judicieusement. Après avoir rempli toutes les informations, cliquez sur « Revoir et créer » et enfin, « Créer ». Azure devrait vous rediriger vers la page de la nouvelle application. Maintenant, nous pouvons configurer Neon. Ouvrez la nouvelle page de ressource Neon sur le portail Azure et, comme vous l’avez deviné, remplissez le formulaire.

Comment créer une base de données Neon sur Azure

Étape 1. Créez une nouvelle page de ressource Neon avec « AzureURLNeonShortener » comme groupe de ressources, « URLShortenerDB » comme nom de ressource et « West US 3 » comme emplacement. Si la région que vous avez choisie n’est pas disponible, choisissez la région la plus proche. Une fois que vous avez tout rempli, cliquez sur « Revoir et créer » puis sur « Créer », comme vous l’avez fait pour les ressources précédentes.

Étape 2. Il se peut que vous deviez attendre un peu que la base de données Neon s’instancie. Une fois que c’est fait, ouvrez sa page de configuration et cliquez sur « Accéder à Neon ».

Étape 3. Vous serez redirigé vers une page de connexion. Autorisez Neon à accéder à vos informations Azure, puis vous vous retrouverez sur une page de création de projet. Remplissez le formulaire ci-dessous :

Le nom du projet et de la base de données n’est pas important, mais assurez-vous de localiser la base de données dans Azure West US 3 (ou dans la région de votre choix). Cela empêchera les requêtes de la base de données de quitter le centre de données, réduisant ainsi la latence.

Étape 4. Cliquez sur « Créer » en bas de la page, en gardant la configuration d’auto-échelonnage par défaut. Vous devriez maintenant être redirigé vers une page de base de données Neon. Cette page contient notre chaîne de connexion, dont nous aurons besoin pour nous connecter à notre base de données à partir de notre code. Cliquez sur « Copier le snippet » pour copier la chaîne de connexion.

Assurez-vous de ne pas la perdre, car nous en aurons besoin plus tard, mais pour l’instant, nous devons structurer notre base de données.

Étape 5. Cliquez sur « Éditeur SQL » dans la navigation latérale, et collez le SQL suivant :

CREATE TABLE IF NOT EXISTS urls(id char(12) PRIMARY KEY, url TEXT NOT NULL);

Ensuite, cliquez sur « Exécuter ». Cela créera la table que nous utiliserons pour stocker les URL. La table est assez simple : La clé primaire ID est une chaîne aléatoire de 12 caractères que nous utiliserons pour faire référence aux URL, et l’URL est une chaîne de longueur variable qui stockera l’URL elle-même.

Étape 6. Si vous regardez la vue Table dans la navigation latérale, vous devriez voir une table « urls ». Enfin, nous devons obtenir notre chaîne de connexion. Cliquez sur « Tableau de bord » dans la navigation latérale, trouvez la chaîne de connexion, et cliquez sur « Copier le snippet ».

Maintenant, nous pouvons commencer à écrire du code.

Construction de l’API

Étape 1. Tout d’abord, nous devons installer l’interface en ligne de commande sans serveur d’Azure, qui nous aidera à créer un projet et éventuellement le tester/publier. Ouvrez un terminal et exécutez :

npm install -g azure-functions-core-tools --unsafe-perm true

Étape 2. Si vous souhaitez utiliser d’autres gestionnaires de paquets comme Yarn ou pnpm, remplacez simplement npm par votre gestionnaire de paquets préféré. Maintenant, nous pouvons commencer notre projet réel. Ouvrez le dossier dans lequel vous souhaitez que le projet soit, et exécutez les trois commandes suivantes :

func init --javascript

func new --name submit --template "HTTP trigger"

func new --name url --template "HTTP trigger"

npm install nanoid @neondatabase/serverless

Maintenant, vous devriez voir un nouveau projet Azure dans ce dossier. La première commande crée le projet, les deux commandes suivantes créent nos routes d’API sans serveur, et la dernière commande installe le pilote sans serveur Neon pour interagir avec notre base de données et Nano ID pour générer des identifiants. Nous pourrions utiliser un pilote Postgres standard au lieu du pilote Neon, mais le pilote de Neon utilise des requêtes HTTP sans état pour réduire la latence des requêtes ponctuelles. Étant donné que nous exécutons une fonction sans serveur qui pourrait ne traiter qu’une seule requête et envoyer une seule requête, la latence des requêtes ponctuelles est importante.

Vous devriez vous concentrer sur le code dans src/functions, car c’est là que se trouvent nos routes. Vous devriez y voir deux fichiers : submit.js et redirect.js.

submit.js

submit.js stockera le code que nous utilisons pour soumettre des URL. Tout d’abord, ouvrez submit.js et remplacez son code par ce qui suit :

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}`);

  },

});

Expliquons cela étape par étape. Tout d’abord, nous importons l’API des fonctions Azure, le pilote sans serveur Neon et Nano ID. Nous utilisons ESM (ES Modules) ici au lieu de CommonJS. Nous devrons apporter quelques modifications plus tard pour prendre en charge cela.

Ensuite, nous créons la connexion à notre base de données. Remplacez [YOUR_POSTGRES_CONNECTION_STRING] par la chaîne que vous avez copiée depuis le tableau de bord Neon. Pour des raisons de sécurité, vous voudriez probablement utiliser un service comme Azure Key Vault pour gérer vos clés dans un environnement de production, mais pour l’instant, les placer simplement dans le script fera l’affaire.

Maintenant, nous sommes sur la route réelle. Les premières propriétés définissent quand notre gestionnaire de route doit être déclenché : nous voulons que cette route soit déclenchée par une requête GET à submit.

Notre gestionnaire est assez simple. Nous vérifions d’abord si une URL a été transmise par le paramètre de requête d’URL (par exemple, /submit?url=https://google.com), puis nous vérifions si c’est une URL valide via la nouvelle API URL.canParse. Ensuite, nous générons l’ID avec Nano ID. Comme nos IDs font 12 caractères de long, nous devons passer 12 au générateur Nano ID. Enfin, nous insérons une nouvelle ligne avec le nouvel ID et l’URL dans notre base de données. Le pilote Neon serverless paramètre automatiquement les requêtes, nous n’avons donc pas à nous soucier des utilisateurs malveillants qui passent des instructions SQL dans l’URL.

redirect.js

redirect.js est l’endroit où nos redirections d’URL réelles se produiront. Remplacez son code par le suivant :

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 première section du script est identique à submit.js. Une fois de plus, remplacez \[YOUR_POSTGRES_CONNECTION_STRING\] par la chaîne que vous avez copiée depuis le tableau de bord Neon.

La route est là où les choses deviennent plus intéressantes. Nous devons accepter n’importe quel chemin qui pourrait être un ID de redirection, nous utilisons donc un paramètre avec la contrainte de 12 caractères de long. Notez que cela pourrait se chevaucher si vous avez déjà une autre route de 12 caractères. Si c’est le cas, vous pouvez renommer la route de redirection pour qu’elle commence par un Z ou un autre caractère alphanumérique supérieur afin que le serveur sans serveur Azure charge la route de redirection après.

Finalement, nous avons notre code de gestionnaire réel. Tout ce que nous devons faire ici, c’est interroger une URL correspondant à l’ID donné et rediriger vers celle-ci si elle existe. Nous utilisons le code d’état 308 dans notre redirection pour indiquer aux navigateurs et aux moteurs de recherche d’ignorer l’URL raccourcie d’origine.

Fichiers de configuration

Il y a deux autres modifications que nous devons apporter. Premièrement, nous ne voulons pas de préfixe /api sur toutes nos fonctions. Pour le supprimer, ouvrez host.json, qui devrait se trouver dans votre répertoire de projet, et ajoutez ce qui suit:

"extensions": {

    "http": {

      "routePrefix": ""

    }

  }

Cela permet à vos routes de fonctionner sans préfixes. L’autre chose que nous devons faire est de passer le projet en modules ES. Ouvrez package.json et insérez ce qui suit à la fin du fichier:

"type": "module"

C’est tout!

Tests et déploiement

Maintenant, vous pouvez essayer de tester localement en exécutant func start. Vous pouvez accéder à http://localhost:7071/submit?url=https://example.com, puis utilisez l’ID qu’il vous donne et accédez à http://localhost:7071/[VOTRE_ID]. Vous devriez être redirigé vers example.com.

Bien sûr, nous ne pouvons pas simplement exécuter cela localement. Pour le déployer, nous devons installer Azure CLI, ce que vous pouvez faire avec l’une des commandes suivantes, selon votre système d’exploitation:

macOS (Homebrew)

brew install azure-cli

Windows (WPM)

winget install -e --id Microsoft.AzureCLI

Linux

curl -L <https://aka.ms/InstallAzureCli> | bash

Maintenant, redémarrez le terminal, connectez-vous en exécutant az login, et exécutez ce qui suit dans le répertoire du projet:

func azure functionapp publish [FunctionAppName]

Remplacez [FunctionAppName] par le nom que vous avez donné à votre fonction précédemment.

Maintenant, vous devriez pouvoir accéder à votre API à l’adresse [FunctionAppName].azurewebsites.net.

Conclusion

Vous devriez maintenant disposer d’un raccourcisseur d’URL entièrement fonctionnel. Vous pouvez accéder au code ici et travailler sur l’ajout d’une interface utilisateur. Si vous souhaitez continuer à découvrir les fonctionnalités de Neon et Azure, nous vous recommandons de consulter Branching. Quoi qu’il en soit, j’espère que vous avez appris quelque chose de précieux grâce à ce guide.