Erstellen Sie einen URL-Shortener mit Neon, Azure Serverless Functions

Neon ist nun im Azure-Marktplatz verfügbar. Die neue Integration zwischen Neon und Azure ermöglicht es Ihnen, Ihr Neon-Abonnement und die Abrechnung über das Azure-Portal zu verwalten, als ob Neon ein Azure-Produkt wäre. Azure Serverless und Neon sind eine natürliche Kombination – Azure Serverless befreit Sie von der Verwaltung Ihrer Webserver-Infrastruktur. Neon tut dasselbe für Datenbanken und bietet zusätzliche Funktionen wie Datenverzweigung und Vektordatenbank-Erweiterungen.

Das gesagt, lassen Sie uns diese neue Integration ausprobieren, indem wir eine URL-Verkürzungsschnittstelle mit Neon, Azure Serverless und Node.js erstellen.

Hinweis: Sie sollten Zugriff auf ein Terminal, einen Editor wie VS Code und Node v22 oder neuer installiert haben.

Einrichten der Infrastruktur

Heute müssen wir die Dinge etwas umgekehrt angehen. Anstatt den Code zu schreiben, werden wir zuerst unsere serverlose Funktion und Datenbank einrichten.

Schritt 1. Öffnen Sie das Azure-Webportal. Wenn Sie noch keins haben, müssen Sie ein Microsoft-Konto erstellen.

Schritt 2. Sie müssen auch ein Abonnement erstellen, wenn Sie noch keins haben, was Sie in Azure tun können.

Schritt 3. Jetzt können wir eine Ressourcengruppe erstellen, um unsere serverlose Funktion und Datenbank zu speichern. Gehe zur neuen Ressourcengruppe von AzureSeiteund fülle das Formular wie folgt aus:

• Dies ist die Seite zur Erstellung der Azure-Ressourcengruppe mit der Ressourcengruppe, die auf „AzureNeonURLShortener“ und dem Standort auf West US 3 gesetzt ist.
• Im Allgemeinen solltest du den Standort wählen, der dir und deinen Nutzern am nächsten ist, da der Standort die Standardplatzierung der serverlosen Funktionen bestimmt und welche Bereiche die niedrigste Latenz haben. Es ist in diesem Beispiel nicht entscheidend, aber du kannst im Dropdown-Menü suchen, wenn du einen anderen verwenden möchtest. Beachte jedoch, dass Neon noch nicht in all diesen Regionen verfügbar ist, was bedeutet, dass du deine Datenbank in einer Region weiter von deiner serverlosen Funktion platzieren müsstest.

Schritt 4. Klicke unten auf „Überprüfen & Erstellen“, um auf eine Konfigurationsübersichtsseite zuzugreifen. Klicke dann erneut auf „Erstellen“.

Schritt 5. Jetzt können wir eine serverlose Funktion erstellen. Leider enthält dies ein weiteres Formular. Gehe zur Seite zur Erstellung einer Azure Flex Verbrauchs-App und fülle das Formular aus. Verwende die zuvor erstellte Ressourcengruppe, wähle einen einzigartigen Namen für die serverlose Funktion, platziere die Funktion in der Region deiner Ressourcengruppe und verwende Node v20.

Schritt 6. Der Name, den Sie für Ihre serverlose App wählen, wird die Subdomain sein, die Azure Ihnen gibt, um auf Ihre API zuzugreifen, also wählen Sie weise. Nachdem Sie alles ausgefüllt haben, klicken Sie auf „Überprüfen und Erstellen“ und schließlich auf „Erstellen“. Azure sollte Sie zur Seite der neuen App umleiten. Jetzt können wir Neon einrichten. Öffnen Sie die neue Neon-Ressourcenseite im Azure-Portal und, wie Sie es sich gedacht haben, füllen Sie das Formular aus.

So erstellen Sie eine Neon-Datenbank auf Azure

Schritt 1. Erstellen Sie eine neue Neon-Ressourcenseite mit „AzureURLNeonShortener“ als Ressourcengruppe, „URLShortenerDB“ als Ressourcenname und „West US 3“ als Standort. Wenn das von Ihnen gewählte Gebiet nicht verfügbar ist, wählen Sie die nächstgelegene Region. Sobald Sie alles abgeschlossen haben, klicken Sie auf „Überprüfen & Erstellen“ und dann auf „Erstellen“, wie Sie es bei den vorherigen Ressourcen getan haben.

Schritt 2. Möglicherweise müssen Sie einen Moment warten, bis die Neon-Datenbank instanziiert wird. Sobald dies geschieht, öffnen Sie die Konfigurationsseite und klicken Sie auf „Zu Neon gehen“.

Schritt 3. Sie werden zu einer Anmeldeseite umgeleitet. Erlauben Sie Neon den Zugriff auf Ihre Azure-Informationen, und dann sollten Sie sich auf einer Seite zur Erstellung eines Projekts befinden. Füllen Sie das folgende Formular aus:

Der Name des Projekts und der Datenbank sind nicht bedeutend, aber stellen Sie sicher, dass Sie die Datenbank in Azure West US 3 (oder welcher Region auch immer Sie wählen) platzieren. Dies verhindert, dass Datenbankabfragen das Rechenzentrum verlassen, was die Latenz verringert.

Schritt 4. Klicken Sie am unteren Rand der Seite auf „Erstellen“, wobei die Standardautoskalierungskonfiguration beibehalten wird. Sie sollten jetzt auf eine Neon-Datenbankseite umgeleitet werden. Diese Seite enthält unsere Verbindungszeichenfolge, die wir benötigen, um von unserem Code aus eine Verbindung mit unserer Datenbank herzustellen. Klicken Sie auf „Snippet kopieren“, um die Verbindungszeichenfolge zu kopieren.

Stellen Sie sicher, dass Sie dies nicht verlieren, da wir es später benötigen, aber jetzt müssen wir unsere Datenbank strukturieren.

Schritt 5. Klicken Sie auf der Seitenleiste auf „SQL-Editor“ und fügen Sie den folgenden SQL-Code ein:

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

Dann klicken Sie auf „Ausführen“. Dadurch wird die Tabelle erstellt, die wir verwenden werden, um URLs zu speichern. Die Tabelle ist ziemlich einfach: Der Primärschlüssel ID ist eine 12-stellige zufällige Zeichenfolge, die wir verwenden werden, um auf URLs zu verweisen, und die URL ist eine Zeichenfolge variabler Länge, die die URL selbst speichert.

Schritt 6. Wenn Sie die Tabellenansicht in der Seitenleiste ansehen, sollten Sie eine „urls“-Tabelle sehen. Schließlich müssen wir unsere Verbindungszeichenfolge erhalten. Klicken Sie auf der Seitenleiste auf „Dashboard“, suchen Sie die Verbindungszeichenfolge und klicken Sie auf „Snippet kopieren.“

Jetzt können wir mit dem Schreiben des Codes beginnen.

Erstellen der API

Schritt 1. Zuerst müssen wir das serverlose CLI von Azure installieren, das uns dabei helfen wird, ein Projekt zu erstellen und es schließlich zu testen/zu veröffentlichen. Öffnen Sie ein Terminal und führen Sie folgendes aus:

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

Schritt 2. Wenn Sie andere Paketmanager wie Yarn oder pnpm verwenden möchten, ersetzen Sie einfach npm durch Ihren bevorzugten Paketmanager. Nun können wir mit unserem eigentlichen Projekt beginnen. Öffnen Sie den Ordner, in dem sich das Projekt befinden soll, und führen Sie die folgenden drei Befehle aus:

func init --javascript

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

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

npm install nanoid @neondatabase/serverless

Nun sollte ein neues Azure-Projekt in diesem Ordner zu sehen sein. Der erste Befehl erstellt das Projekt, die beiden folgenden Befehle erstellen unsere serverlosen API-Routen, und der letzte Befehl installiert den Neon serverlosen Treiber zur Kommunikation mit unserer Datenbank und Nano ID zur Generierung von IDs. Anstelle des Neon-Treibers könnten wir auch einen Standard-Postgres-Treiber verwenden, aber Neons Treiber verwendet zustandslose HTTP-Abfragen, um die Latenz für einmalige Abfragen zu reduzieren. Da wir eine serverlose Funktion ausführen, die möglicherweise nur eine Anfrage verarbeitet und eine Abfrage sendet, ist die Latenz für einmalige Abfragen wichtig.

Sie sollten sich auf den Code in src/functions konzentrieren, da sich dort unsere Routen befinden. Dort sollten zwei Dateien zu sehen sein: submit.js und redirect.js.

submit.js

submit.js wird den Code speichern, den wir zum Einreichen von URLs verwenden. Öffnen Sie zuerst submit.js und ersetzen Sie den Code durch den folgenden:

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

  },

});

Lassen Sie uns das Schritt für Schritt durchgehen. Zuerst importieren wir die Azure-Funktions-API, den Neon serverlosen Treiber und Nano ID. Hier verwenden wir ESM (ES-Module) anstelle von CommonJS. Wir müssen später einige Änderungen vornehmen, um dies zu unterstützen.

Dann erstellen wir die Verbindung zu unserer Datenbank. Ersetzen Sie [IHR_POSTGRES_VERBINDUNGSSTRING] durch den String, den Sie aus dem Neon-Dashboard kopiert haben. Aus Sicherheitsgründen möchten Sie wahrscheinlich in einer Produktionsumgebung einen Dienst wie Azure Key Vault verwenden, um Ihre Schlüssel zu verwalten, aber vorerst reicht es aus, sie einfach im Skript zu platzieren.

Jetzt sind wir bei der eigentlichen Route. Die ersten paar Eigenschaften definieren, wann unser Routenhandler ausgelöst werden soll: Wir wollen, dass diese Route durch eine GET-Anfrage an submit ausgelöst wird.

Unser Handler ist ziemlich einfach. Zuerst überprüfen wir, ob eine URL über den URL-Abfrageparameter übergeben wurde (z. B. /submit?url=https://google.com), dann überprüfen wir, ob es sich um eine gültige URL handelt, über die neue URL.canParse API. Als Nächstes generieren wir die ID mit Nano ID. Da unsere IDs 12 Zeichen lang sind, müssen wir 12 an den Nano ID-Generator übergeben. Schließlich fügen wir eine neue Zeile mit der neuen ID und URL in unsere Datenbank ein. Der serverlose Neon-Treiber parameterisiert Abfragen automatisch, sodass wir uns keine Sorgen über böswillige Benutzer machen müssen, die SQL-Anweisungen in die URL eingeben.

redirect.js

redirect.js ist der Ort, an dem unsere tatsächlichen URL-Weiterleitungen stattfinden werden. Ersetzen Sie den Code durch Folgendes:

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

  },

});

Der erste Abschnitt des Skripts ist derselbe wie submit.js. Ersetzen Sie erneut \[YOUR\_POSTGRES\_CONNECTION\_STRING\] mit dem String, den Sie vom Neon-Dashboard kopiert haben.

Die Route ist der Punkt, an dem es interessanter wird. Wir müssen jeden Pfad akzeptieren, der eine Weiterleitungs-ID sein könnte, daher verwenden wir einen Parameter mit der Einschränkung von 12 Zeichen. Beachten Sie, dass dies überlappen könnte, wenn Sie jemals eine andere 12-Zeichen-Route haben. Wenn dies der Fall ist, können Sie die Weiterleitungsroute umbenennen, sodass sie mit einem Z oder einem anderen alphanumerisch größeren Zeichen beginnt, damit Azure serverlos die Weiterleitungsroute später lädt.

Schließlich haben wir unseren tatsächlichen Handler-Code. Alles, was wir hier tun müssen, ist nach einer URL zu suchen, die mit der angegebenen ID übereinstimmt, und darauf umzuleiten, wenn eine existiert. Wir verwenden den Statuscode 308 in unserer Umleitung, um Browsern und Suchmaschinen mitzuteilen, dass sie die ursprüngliche verkürzte URL ignorieren sollen.

Konfigurationsdateien

Es gibt zwei weitere Änderungen, die wir vornehmen müssen. Erstens möchten wir kein Präfix /api für alle unsere Funktionen. Um dies zu entfernen, öffnen Sie die Datei host.json, die sich in Ihrem Projektverzeichnis befinden sollte, und fügen Sie folgendes hinzu:

"extensions": {

    "http": {

      "routePrefix": ""

    }

  }

Dadurch können Ihre Routen ohne Präfixe funktionieren. Das einzige andere, was wir tun müssen, ist das Projekt auf ES-Module umzustellen. Öffnen Sie die Datei package.json und fügen Sie am Ende der Datei folgendes ein:

"type": "module"

Das war’s!

Testen und Bereitstellen

Jetzt können Sie lokal testen, indem Sie func start ausführen. Navigieren Sie zu http://localhost:7071/submit?url=https://example.com, verwenden Sie dann die ID, die Ihnen gegeben wird, und navigieren Sie zu http://localhost:7071/[IHRE_ID]. Sie sollten zu example.com umgeleitet werden.

Natürlich können wir dies nicht nur lokal ausführen. Um bereitzustellen, müssen wir die Azure CLI installieren, was Sie mit einem der folgenden Befehle je nach Betriebssystem tun können:

macOS (Homebrew)

brew install azure-cli

Windows (WPM)

winget install -e --id Microsoft.AzureCLI

Linux

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

Starten Sie nun das Terminal neu, melden Sie sich an, indem Sie az login ausführen, und führen Sie das folgende im Projektverzeichnis aus:

func azure functionapp publish [FunctionAppName]

Ersetzen Sie [FunctionAppName] durch den Namen Ihrer zuvor benannten Funktion.

Jetzt sollte es möglich sein, auf Ihre API unter [FunctionAppName].azurewebsites.net zuzugreifen.

Abschluss

Sie sollten nun einen voll funktionsfähigen URL-Verkürzer haben. Sie können auf den Code hier zugreifen und daran arbeiten, eine Benutzeroberfläche hinzuzufügen. Wenn Sie mehr über Neon und die Funktionen von Azure erfahren möchten, empfehlen wir, sich Branching anzusehen. Auf jeden Fall hoffe ich, dass Sie aus diesem Leitfaden etwas Wertvolles gelernt haben.