Construa um Encurtador de URL com Neon, Funções Serverless do Azure

O Neon agora está disponível no marketplace do Azure. A nova integração entre o Neon e o Azure permite que você gerencie sua assinatura e cobrança do Neon através do portal do Azure como se o Neon fosse um produto do Azure. O Azure serverless e o Neon são uma combinação natural — o Azure serverless libera você da gestão da infraestrutura do seu servidor web. O Neon faz o mesmo para bancos de dados, oferecendo recursos adicionais como ramificação de dados e extensões de banco de dados vetoriais.

Isso dito, vamos experimentar essa nova integração criando uma API encurtadora de URL com Neon, Azure serverless e Node.js.

Nota: Você deve ter acesso a um terminal, um editor como o VS Code e o Node v22 ou posterior instalado.

Configurando a Infraestrutura

Hoje vamos fazer as coisas um pouco ao contrário. Em vez de escrever o código, primeiro vamos configurar nossa função serverless e banco de dados.

Passo 1. Abra o portal web do Azure. Se você ainda não tiver uma, precisará criar uma conta Microsoft.

Passo 2. Você também terá que criar uma assinatura se ainda não tiver uma, o que você pode fazer no Azure.

Passo 3. Agora, podemos criar um grupo de recursos para armazenar nossa função serverless e banco de dados. Acesse a nova página de grupo de recursos do Azure e preencha o formulário da seguinte maneira:

• Esta é a página de criação de Grupo de Recursos do Azure com o grupo de recursos definido como “AzureNeonURLShortener” e a localização configurada para Oeste dos EUA 3.
• Em geral, use a localização mais próxima de você e de seus usuários, pois a localização determinará a colocação padrão das funções serverless e quais áreas têm a menor latência. Não é vital neste exemplo, mas você pode pesquisar na lista suspensa se quiser usar outra. No entanto, observe que o Neon ainda não tem localizações em todas essas regiões, o que significa que você teria que colocar seu banco de dados em uma região mais distante de sua função serverless.

Passo 4. Clique em “Revisar e Criar” na parte inferior para acessar uma página de revisão de configuração. Em seguida, clique em “Criar” novamente.

Passo 5. Agora, podemos criar uma função serverless. Infelizmente, isso inclui outro formulário. Acesse a página de criação de aplicativo serverless Azure Flex Consumption e preencha o formulário. Use o grupo de recursos criado anteriormente, escolha um nome de função serverless único, coloque a função na região do seu grupo de recursos e use o Node v20.

Passo 6. O nome que você escolher para o seu aplicativo serverless será o subdomínio que o Azure lhe dá para acessar a sua API, então escolha com sabedoria. Depois de preencher tudo, clique em “Revisar e Criar” e, finalmente, “Criar”. O Azure deve redirecioná-lo para a página do novo aplicativo. Agora podemos configurar o Neon. Abra a nova página de Recurso do Neon no portal do Azure e, como você imaginou, preencha o formulário.

Como Criar um Banco de Dados Neon no Azure

Passo 1. Crie uma nova página de recurso do Neon com “AzureURLNeonShortener” como o grupo de recursos, “URLShortenerDB” como o nome do recurso e “West US 3” como a localização. Se a região que você escolheu não estiver disponível, escolha a região mais próxima. Depois de completar tudo, clique em “Revisar e Criar” e depois em “Criar”, como você fez para os recursos anteriores.

Passo 2. Você pode precisar esperar um pouco para que o banco de dados Neon seja instanciado. Depois que isso acontecer, abra a página de configuração e clique em “Ir para Neon.”

Passo 3. Você será redirecionado para uma página de login. Permita que o Neon acesse suas informações do Azure e então você deverá se encontrar em uma página de criação de projeto. Preencha o formulário abaixo:

O nome do projeto e do banco de dados não são significativos, mas certifique-se de localizar o banco de dados no Azure West US 3 (ou em qualquer região que você escolher). Isso evitará que as consultas ao banco de dados saiam do data center, diminuindo a latência.

Passo 4. Clique em “Criar” na parte inferior da página, mantendo a configuração padrão de dimensionamento automático. Você será redirecionado para uma página do banco de dados Neon. Esta página contém nossa string de conexão, que precisaremos para conectar ao nosso banco de dados a partir do nosso código. Clique em “Copiar trecho” para copiar a string de conexão.

Certifique-se de não perder isso, pois precisaremos mais tarde, mas, por enquanto, precisamos estruturar nosso banco de dados.

Passo 5. Clique em “Editor SQL” na navegação lateral e cole o seguinte SQL:

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

Em seguida, clique em “Executar”. Isso irá criar a tabela que usaremos para armazenar URLs. A tabela é bastante simples: A chave primária ID é uma string aleatória de 12 caracteres que usaremos para fazer referência às URLs, e a URL é uma string de comprimento variável que irá armazenar a própria URL.

Passo 6. Se você olhar a visualização da Tabela na navegação lateral, deverá ver uma tabela “urls”. Por fim, precisamos obter nossa string de conexão. Clique em “Painel” na navegação lateral, encontre a string de conexão e clique em “Copiar trecho”.

Agora, podemos começar a escrever o código.

Construindo a API

Passo 1. Primeiro, precisamos instalar a CLI sem servidor da Azure, que nos ajudará a criar um projeto e eventualmente testá-lo/publicá-lo. Abra um terminal e execute:

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

Passo 2. Se você deseja usar outros gerenciadores de pacotes como Yarn ou pnpm, basta substituir npm pelo seu gerenciador de pacotes preferido. Agora, podemos começar em nosso projeto real. Abra a pasta na qual deseja que o projeto esteja e execute os seguintes três comandos:

func init --javascript

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

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

npm install nanoid @neondatabase/serverless

Agora, você deverá ver um novo projeto Azure nessa pasta. O primeiro comando cria o projeto, os dois comandos seguintes criam nossas rotas de API serverless, e o comando final instala o driver serverless Neon para interagir com nosso banco de dados e o Nano ID para gerar IDs. Poderíamos usar um driver Postgres padrão em vez do driver Neon, mas o driver da Neon utiliza consultas HTTP stateless para reduzir a latência para consultas únicas. Como estamos executando uma função serverless que pode processar apenas uma solicitação e enviar apenas uma consulta, a latência da consulta única é importante.

Você vai querer focar no código em src/functions, pois é onde estão nossas rotas. Você deverá ver dois arquivos lá: submit.js e redirect.js.

submit.js

submit.js irá armazenar o código que usamos para enviar URLs. Primeiro, abra submit.js e substitua seu código pelo seguinte:

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 analisar isso passo a passo. Primeiro, importamos a API de funções Azure, o driver serverless Neon e o Nano ID. Estamos usando ESM (ES Modules) aqui em vez de CommonJS. Precisaremos fazer algumas alterações mais tarde para dar suporte a isso.

Em seguida, criamos a conexão com nosso banco de dados. Substitua [SUA_STRING_DE_CONEXÃO_POSTGRES] pela string que você copiou do painel da Neon. Por motivos de segurança, provavelmente você gostaria de usar um serviço como Azure Key Vault para gerenciar suas chaves em um ambiente de produção, mas por enquanto, simplesmente colocá-las no script será o suficiente.

Agora, estamos na rota real. As primeiras propriedades definem quando nosso manipulador de rota deve ser acionado: queremos que esta rota seja acionada por uma solicitação GET para submit.

Nosso manipulador é bem simples. Primeiro, verificamos se uma URL foi passada através do parâmetro de consulta da URL (por exemplo, /submit?url=https://google.com), depois verificamos se é uma URL válida através da nova API URL.canParse. Em seguida, geramos o ID com Nano ID. Como nossos IDs têm 12 caracteres, precisamos passar 12 para o gerador Nano ID. Finalmente, inserimos uma nova linha com o novo ID e URL em nosso banco de dados. O driver sem servidor Neon parametriza automaticamente as consultas, então não precisamos nos preocupar com usuários mal-intencionados passando declarações SQL na URL.

redirect.js

redirect.js é onde nossos redirecionamentos de URL reais acontecerão. Substitua seu código pelo seguinte:

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

  },

});

A primeira seção do script é a mesma que submit.js. Mais uma vez, substitua \[YOUR\_POSTGRES\_CONNECTION\_STRING\] pela string que você copiou do painel do Neon.

A rota é onde as coisas ficam mais interessantes. Precisamos aceitar qualquer caminho que possa ser um ID de redirecionamento, então usamos um parâmetro com a restrição de 12 caracteres de comprimento. Note que isso pode se sobrepor se você tiver outra rota de 12 caracteres. Se isso acontecer, você pode renomear a rota de redirecionamento para começar com um Z ou outro caractere alfanumérico maior para fazer com que o Azure serverless carregue a rota de redirecionamento depois.

Finalmente, temos nosso código de manipulador real. Tudo o que precisamos fazer aqui é consultar um URL que corresponda ao ID fornecido e redirecionar para ele, se existir. Usamos o código de status 308 em nosso redirecionamento para informar aos navegadores e mecanismos de busca que ignorem o URL encurtado original.

Arquivos de Configuração

Ainda há duas mudanças que precisamos fazer. Primeiro, não queremos um prefixo /api em todas as nossas funções. Para remover isso, abra o host.json, que deve estar no diretório do seu projeto, e adicione o seguinte:

"extensions": {

    "http": {

      "routePrefix": ""

    }

  }

Isso permite que suas rotas operem sem nenhum prefixo. A outra coisa que precisamos fazer é mudar o projeto para Módulos ES. Abra o package.json e insira o seguinte no final do arquivo:

"type": "module"

É isso!

Testando e Implementando

Agora, você pode testar localmente executando func start. Você pode acessar http://localhost:7071/submit?url=https://example.com, depois usar o ID que ele fornece e acessar http://localhost:7071/[SEU_ID]. Você deve ser redirecionado para example.com.

Claro, não podemos apenas executar isso localmente. Para implementar, precisamos instalar o Azure CLI, o que você pode fazer com um dos seguintes comandos, dependendo do seu sistema operacional:

macOS (Homebrew)

brew install azure-cli

Windows (WPM)

winget install -e --id Microsoft.AzureCLI

Linux

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

Agora, reinicie o terminal, faça login executando az login e execute o seguinte no diretório do projeto:

func azure functionapp publish [FunctionAppName]

Substitua [FunctionAppName] pelo nome que você deu à sua função anteriormente.

Agora, você deve ser capaz de acessar sua API em [FunctionAppName].azurewebsites.net.

Conclusão

Agora você deve ter um Encurtador de URL totalmente funcional. Você pode acessar o código aqui e trabalhar na adição de uma interface. Se você deseja continuar lendo sobre as funcionalidades do Neon e do Azure, recomendamos conferir Ramificação. De qualquer forma, espero que você tenha aprendido algo valioso com este guia.