Neon is nu beschikbaar op de Azure Marketplace. De nieuwe integratie tussen Neon en Azure stelt u in staat om uw Neon abonnement en facturering te beheren via het Azure portal alsof Neon een Azure product was. Azure serverless en Neon zijn een natuurlijke combinatie – Azure serverless bevrijdt u van het beheren van uw webserver-infrastructuur. Neon doet hetzelfde voor databases, met aanvullende functies zoals databranche en vector database-extensies.
Dat gezegd hebbende, laten we deze nieuwe integratie uitproberen door een URL-verkorter API te bouwen met Neon, Azure serverless en Node.js.
Opmerking: U moet toegang hebben tot een terminal, een editor zoals VS Code, en Node v22 of nieuwer geïnstalleerd hebben.
Infrastructuur opzetten
We zullen vandaag een beetje anders moeten werken. In plaats van de code te schrijven, zullen we eerst onze serverless functie en database opzetten.
Stap 1. Open het Azure webportaal. Als u er nog geen heeft, moet u een Microsoft-account aanmaken.
Stap 2. U moet ook een abonnement aanmaken als u er nog geen heeft, wat u kunt doen in Azure.
Stap 3. Nu kunnen we een resourcegroep maken om onze serverloze functie en database op te slaan. Ga naar de nieuwe resourcegroep van Azure en vul het formulier in zoals dit:
- Dit is de pagina voor het maken van een Azure Resourcegroep met de resourcegroep ingesteld op “AzureNeonURLShortener” en de locatie ingesteld op West US 3.
- Gebruik over het algemeen de locatie die het dichtst bij u en uw gebruikers ligt, aangezien de locatie de standaardplaatsing van serverloze functies bepaalt en welke gebieden de laagste latentie hebben. Het is niet cruciaal in dit voorbeeld, maar u kunt zoeken via de vervolgkeuzelijst als u een andere wilt gebruiken. Merk echter op dat Neon nog niet overal in deze regio’s locaties heeft, wat betekent dat u uw database in een regio verder van uw serverloze functie zou moeten plaatsen.
Stap 4. Klik onderaan op “Controleren en maken” om toegang te krijgen tot een configuratiebeoordelingspagina. Klik vervolgens nogmaals op “Maken”.
Stap 5. Nu kunnen we een serverloze functie maken. Helaas bevat dit weer een formulier. Ga naar de pagina voor het maken van een Azure Flex-consumptie serverloze app en vul het formulier in. Gebruik de eerder gemaakte resourcegroep, kies een unieke naam voor de serverloze functie, plaats de functie in de regio van uw resourcegroep en gebruik Node v20.
Stap 6. De naam die je kiest voor je serverloze app zal het subdomein zijn dat Azure je geeft om toegang te krijgen tot je API, dus kies verstandig. Nadat je alles hebt ingevuld, klik op “Controleren en maken” en tot slot, “Maken.” Azure zou je moeten doorverwijzen naar de pagina van de nieuwe app. Nu kunnen we Neon instellen. Open de nieuwe Neon Resource-pagina op het Azure-portal, en, je raadt het al, vul het formulier in.
Hoe je een Neon Database maakt op Azure
Stap 1. Maak een nieuwe Neon-resourcepagina met “AzureURLNeonShortener” als de resourcegroep, “URLShortenerDB” als de resourcenaam, en “West US 3” als de locatie. Als het gebied dat je hebt gekozen niet beschikbaar is, kies dan de dichtstbijzijnde regio. Zodra je alles hebt ingevuld, klik op “Controleren & Maken” en vervolgens “Maken,” zoals je deed voor eerdere resources.
Stap 2. Je moet misschien even wachten totdat de Neon-database is geïnstantieerd. Zodra dit is gebeurd, open je de configuratiepagina en klik je op “Ga naar Neon.”
Stap 3. Je wordt doorgestuurd naar een aanmeldpagina. Sta Neon toe om toegang te krijgen tot je Azure-informatie, en dan zou je jezelf op een projectcreatiepagina moeten vinden. Vul onderstaand formulier in:
De project- en databasenaam zijn niet significant, maar zorg ervoor dat je de database plaatst in Azure West US 3 (of welke regio je ook kiest). Dit zal voorkomen dat databasequery’s het datacenter verlaten, waardoor de latentie wordt verminderd.
Stap 4. Klik op “Maken” onderaan de pagina, met behoud van de standaard autoscaling-configuratie. Je wordt nu doorgestuurd naar een Neon-databasepagina. Deze pagina bevat onze verbindingsreeks, die we nodig zullen hebben om verbinding te maken met onze database vanuit onze code. Klik op “Snipper kopiëren” om de verbindingsreeks te kopiëren.
Zorg ervoor dat je dit niet kwijtraakt, want we zullen het later nodig hebben, maar voor nu moeten we onze database structureren.
Stap 5. Klik op “SQL-editor” in de zijbalk en plak de volgende SQL:
CREATE TABLE IF NOT EXISTS urls(id char(12) PRIMARY KEY, url TEXT NOT NULL);
Klik vervolgens op “Uitvoeren.” Hiermee wordt de tabel gemaakt die we zullen gebruiken om URL’s op te slaan. De tabel is vrij eenvoudig: Het primaire sleutel-ID is een willekeurige string van 12 tekens die we zullen gebruiken om te verwijzen naar URL’s, en de URL is een variabele lengte string die de URL zelf zal opslaan.
Stap 6. Als je naar de tabelweergave in de zijbalk kijkt, zou je een “urls” tabel moeten zien. Tenslotte moeten we onze verbindingsreeks ophalen. Klik op “Dashboard” in het zijmenu, zoek de verbindingsreeks en klik op “Snippet kopiëren.”
Nu kunnen we beginnen met het schrijven van code.
Het bouwen van de API
Stap 1. Allereerst moeten we Azure’s serverloze CLI installeren, die ons zal helpen bij het maken van een project en uiteindelijk testen/publiceren. Open een terminal en voer het volgende uit:
npm install -g azure-functions-core-tools --unsafe-perm true
Stap 2. Als je andere pakketbeheerders zoals Yarn of pnpm wilt gebruiken, vervang dan eenvoudig npm door je voorkeurspakketbeheerder. Nu kunnen we beginnen met ons daadwerkelijke project. Open de map waarin je het project wilt hebben en voer de volgende drie commando’s uit:
func init --javascript
func new --name submit --template "HTTP trigger"
func new --name url --template "HTTP trigger"
npm install nanoid @neondatabase/serverless
Nu zou je een nieuw Azure-project in die map moeten zien. Het eerste commando maakt het project aan, de twee volgende commando’s maken onze serverloze API-routes aan, en het laatste commando installeert de Neon serverloze driver voor de communicatie met onze database en Nano ID voor het genereren van ID’s. We zouden een standaard Postgres driver kunnen gebruiken in plaats van de Neon driver, maar de driver van Neon gebruikt stateless HTTP queries om de latentie te verminderen voor eenmalige queries. Omdat we een serverloze functie draaien die mogelijk slechts één verzoek verwerkt en slechts één query verzendt, is de latentie van eenmalige query’s belangrijk.
Je zult je willen focussen op de code in src/functions, omdat daar onze routes staan. Daar zou je twee bestanden moeten zien: submit.js en redirect.js.
submit.js
submit.js zal de code bevatten die we gebruiken om URL’s in te dienen. Open eerst submit.js en vervang de code met het volgende:
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}`);
},
});
Laten we dit stap voor stap bekijken. Eerst importeren we de Azure functions API, Neon serverloze driver en Nano ID. We gebruiken hier ESM (ES-modules) in plaats van CommonJS. Later zullen we enkele wijzigingen moeten maken om dit te ondersteunen.
Vervolgens maken we de verbinding met onze database. Vervang [YOUR_POSTGRES_CONNECTION_STRING] met de string die je hebt gekopieerd van het Neon-dashboard. Om veiligheidsredenen zou je waarschijnlijk een service zoals Azure Key Vault willen gebruiken om je sleutels te beheren in een productieomgeving, maar voor nu is het plaatsen ervan in het script voldoende.
Nu zijn we op de daadwerkelijke route. De eerste paar eigenschappen definiëren wanneer onze route handler moet worden geactiveerd: We willen dat deze route wordt geactiveerd door een GET-verzoek naar submit.
Onze handler is vrij eenvoudig. We controleren eerst of er een URL is doorgegeven via de URL-queryparameter (bijv. /submit?url=https://google.com), vervolgens controleren we of het een geldige URL is via de nieuwe URL.canParse API. Vervolgens genereren we de ID met Nano ID. Omdat onze ID’s 12 tekens lang zijn, moeten we 12 doorgeven aan de Nano ID-generator. Tot slot voegen we een nieuwe rij toe met de nieuwe ID en URL in onze database. De Neon serverless driver parameteriseert automatisch query’s, dus we hoeven ons geen zorgen te maken dat kwaadwillende gebruikers SQL-opdrachten doorgeven via de URL.
redirect.js
redirect.js is waar onze daadwerkelijke URL-omleidingen zullen plaatsvinden. Vervang de code ervan door de volgende:
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);
},
});
Het eerste gedeelte van het script is hetzelfde als submit.js. Vervang opnieuw \[UW_POSTGRES_CONNECTIE_STRING\] door de string die u hebt gekopieerd vanaf het Neon-dashboard.
De route is waar het interessanter wordt. We moeten elk pad accepteren dat een omleidings-ID zou kunnen zijn, dus we gebruiken een parameter met de beperking van 12 tekens lang. Let op dat dit kan overlappen als je ooit een andere 12-karakter route hebt. Als dat het geval is, kunt u de omleidingsroute hernoemen zodat deze begint met een Z of een ander alfanumeriek groter karakter om Azure serverless de omleidingsroute later te laten laden.
Eindelijk hebben we onze daadwerkelijke handlercode. Het enige wat we hier nog moeten doen is een URL opvragen die overeenkomt met de gegeven ID en er naartoe te verwijzen als deze bestaat. We gebruiken de 308 statuscode in onze redirect om browsers en zoekmachines te vertellen de oorspronkelijke verkorte URL te negeren.
Configuratiebestanden
Er zijn nog twee wijzigingen die we moeten aanbrengen. Ten eerste willen we geen voorvoegsel /api op al onze functies. Om dit te verwijderen, open host.json, dat zich in uw projectdirectory zou moeten bevinden, en voeg het volgende toe:
"extensions": {
"http": {
"routePrefix": ""
}
}
Dit maakt het mogelijk dat uw routes werken zonder voorvoegsels. Het enige andere dat we moeten doen is het project overschakelen naar ES-modules. Open package.json en voeg het volgende toe aan het einde van het bestand:
"type": "module"
Dat is alles!
Testen en implementeren
Nu kunt u lokaal testen door func start uit te voeren. U kunt navigeren naar http://localhost:7071/submit?url=https://example.com, en vervolgens de ID gebruiken die het u geeft en navigeren naar http://localhost:7071/[UW_ID]. U zou doorgestuurd moeten worden naar example.com.
Natuurlijk kunnen we dit niet zomaar lokaal uitvoeren. Voor implementatie moeten we de Azure CLI installeren, wat u kunt doen met een van de volgende opdrachten, afhankelijk van uw besturingssysteem:
macOS (Homebrew)
brew install azure-cli
Windows (WPM)
winget install -e --id Microsoft.AzureCLI
Linux
curl -L <https://aka.ms/InstallAzureCli> | bash
Start nu de terminal opnieuw op, log in door az login uit te voeren, en voer het volgende uit in de projectdirectory:
func azure functionapp publish [FunctionAppName]
Vervang [FunctionAppName] door wat je eerder je functie hebt genoemd.
Nu zou je toegang moeten hebben tot je API op [FunctionAppName].azurewebsites.net.
Conclusie
Je zou nu een volledig functionele URL-verkorter moeten hebben. Je kunt de code hier bekijken en werken aan het toevoegen van een frontend. Als je meer wilt lezen over Neon en de functies van Azure, raden we aan om Branching te bekijken. Hoe dan ook, ik hoop dat je iets waardevols hebt geleerd van deze gids.
Source:
https://dzone.com/articles/build-url-shortener-neon-azure-serverless-functions