Crie um encurtador de URL com Neon, Funções Serverless do Azure

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

Dito isso, vamos experimentar essa nova integração construindo uma API de encurtador de URL com Neon, Azure serverless e Node.js.

Observação: Você deve ter acesso a um terminal, um editor como o VS Code e o Node v22 ou posterior instalados.

Configurando a infraestrutura

Vamos ter que fazer as coisas um pouco ao contrário hoje. 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, precisará criar uma conta da 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 definida como West US 3.
• Em geral, use a localização mais próxima de você e de seus usuários, pois a localização determinará a posição padrão das funções serverless e quais regiões têm a menor latência. Não é vital neste exemplo, mas você pode pesquisar nas opções se desejar usar outra. No entanto, observe que a Neon ainda não possui 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 da 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 exclusivo para a função serverless, 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 sua API, então escolha com sabedoria. Depois de preencher tudo, clique em “Revisar e Criar” e, finalmente, em “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, você adivinhou, 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 grupo de recursos, “URLShortenerDB” como nome do recurso e “West US 3” como localização. Se a região escolhida não estiver disponível, escolha a região mais próxima. Depois de completar tudo, clique em “Revisar e Criar” e então em “Criar”, como fez para os recursos anteriores.

Passo 2. Você talvez precise esperar um pouco para o banco de dados Neon ser instanciado. Assim que estiver pronto, abra a página de configuração e clique em “Ir para o 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 qualquer região que 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 de escalonamento automático padrão. Você deve ser redirecionado para uma página de 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 criará a tabela que usaremos para armazenar URLs. A tabela é bem simples: a chave primária ID é uma string aleatória de 12 caracteres que usaremos para nos referir às URLs, e a URL é uma string de comprimento variável que armazenará a própria URL.

Passo 6. Se você olhar a visualização da Tabela na navegação lateral, deverá ver uma tabela “urls”. Finalmente, 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 código.

Construindo a API

Passo 1. Primeiro, devemos instalar o 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ê quiser usar outros gerenciadores de pacotes como Yarn ou pnpm, basta substituir npm pelo seu gerenciador de pacotes preferido. Agora, podemos começar nosso projeto real. Abra a pasta onde você 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ê deve 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 interface 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 usa 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 é lá que estão nossas rotas. Você deve 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 do 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 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, apenas colocá-las no script será suficiente.

Agora, estamos na rota atual. 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 é bastante simples. Primeiro, verificamos se uma URL foi passada pelo parâmetro de consulta da URL (por exemplo, /submit?url=https://google.com), em seguida, verificamos se é uma URL válida por meio da nova API URL.canParse. Em seguida, geramos o ID com o Nano ID. Como nossos IDs têm 12 caracteres de comprimento, temos que passar 12 para o gerador Nano ID. Por fim, inserimos uma nova linha com o novo ID e URL em nosso banco de dados. O driver sem servidor Neon automaticamente parametriza consultas, portanto, não precisamos nos preocupar com usuários maliciosos passando declarações SQL na URL.

redirect.js

redirect.js é onde acontecerão nossos redirecionamentos de URL reais. 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 Neon.

A rota é onde as coisas ficam mais interessantes. Precisamos aceitar qualquer caminho que possa ser um ID de redirecionamento, portanto, usamos um parâmetro com a restrição de 12 caracteres de comprimento. Observe 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 atual. Tudo o que precisamos fazer aqui é consultar uma URL correspondente ao ID fornecido e redirecionar para ela, caso exista. Usamos o código de status 308 em nosso redirecionamento para informar aos navegadores e mecanismos de busca que eles devem ignorar a URL encurtada original.

Arquivos de Configuração

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

"extensions": {

    "http": {

      "routePrefix": ""

    }

  }

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

"type": "module"

É isso!

Testando e Fazendo o Deploy

Agora, você pode tentar testar localmente executando func start. Você pode acessar http://localhost:7071/submit?url=https://example.com, em seguida, use o ID que ele te dá e acesse http://localhost:7071/[SEU_ID]. Você deve ser redirecionado para example.com.

É claro que não podemos apenas executar isso localmente. Para fazer o deploy, precisamos instalar a 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 [NomeDoAplicativoDaFunção] pelo nome que você deu à sua função anteriormente.

Agora, você deve ser capaz de acessar sua API em [NomeDoAplicativoDaFunção].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 um front end. Se deseja continuar lendo sobre as funcionalidades do Neon e do Azure, recomendamos verificar Ramificação. De qualquer forma, esperamos que você tenha aprendido algo valioso com este guia.