使用Neon和Azure无服务器函数构建一个网址缩短器

教程

Azure

Neon现已在Azure市场上推出。Neon和Azure之间的新集成使您可以通过Azure门户管理Neon订阅和计费，就好像Neon是Azure产品一样。Azure无服务器和Neon是自然组合- Azure无服务器使您摆脱管理网络服务器基础设施的负担。Neon也是如此，为数据库提供额外功能，如数据分支和向量数据库扩展。

话虽如此，让我们通过使用Neon、Azure无服务器和Node.js构建一个URL缩短API来尝试这个新集成。

注意：您应该能够访问终端、像VS Code这样的编辑器，并安装了Node v22或更新版本。

建立基础设施

我们今天要做一些略微反常的事情。我们将首先设置我们的无服务器函数和数据库，而不是编写代码。

步骤1。打开Azure Web门户。如果您还没有帐户，您需要创建一个Microsoft帐户。

步骤2。如果您还没有订阅，您还需要创建一个，您可以在Azure中完成。

第三步。现在，我们可以创建一个资源组来存储我们的无服务器函数和数据库。前往Azure的新资源组页面，并填写表单如下：

这是Azure资源组创建页面，资源组设置为“AzureNeonURLShortener”，位置设置为West US 3。
一般来说，请选择距离您和您的用户最近的位置，因为位置将确定无服务器函数的默认放置位置以及哪些区域具有最低的延迟。在这个示例中并不是必要的，但是您可以通过下拉列表搜索其他位置。然而，请注意Neon尚未在所有这些地区设立位置，这意味着您需要将数据库放置在离您的无服务器函数更远的地区。

第四步。点击底部的“查看并创建”以访问配置审查页面。然后再次点击“创建”

第五步。现在，我们可以创建一个无服务器函数。不幸的是，这又涉及到另一个表单。前往Azure Flex消耗无服务器应用创建页面并填写表单。使用先前创建的资源组，选择一个独特的无服务器函数名称，将函数放置在资源组区域内，并使用Node v20。

第6步。您为无服务器应用程序选择的名称将是Azure提供给您访问API的子域，因此请谨慎选择。填写完所有内容后，单击“审阅并创建”，最后单击“创建”。Azure应将您重定向到新应用程序页面。现在我们可以设置Neon。在Azure门户上打开新的Neon资源页面，然后填写表单。

如何在Azure上创建Neon数据库

第1步。使用“AzureURLNeonShortener”作为资源组，“URLShortenerDB”作为资源名称，将位置设置为“West US 3”创建一个新的Neon资源页面。如果您选择的区域不可用，请选择下一个最近的区域。完成所有操作后，单击“审阅并创建”，然后像之前的资源一样单击“创建”

第2步。您可能需要等待一段时间才能实例化Neon数据库。完成后，打开其配置页面，然后单击“转到Neon”

第3步。您将被重定向到登录页面。允许Neon访问您的Azure信息，然后您应该会看到一个项目创建页面。填写下面的表单：

项目和数据库名称并不重要，但请确保将数据库定位在Azure West US 3（或您选择的任何地区）。这样将防止数据库查询离开数据中心，减少延迟。

步骤 4。点击页面底部的“创建”，保持默认的自动缩放配置。您现在应该被重定向到 Neon 数据库页面。此页面上有我们的连接字符串，我们将在代码中连接到数据库时需要它。点击“复制代码片段”以复制连接字符串。

确保不要丢失此信息，因为我们稍后会用到，但现在我们需要构建我们的数据库。

步骤 5。在侧边导航中点击“SQL 编辑器”，并粘贴以下 SQL：

SQL

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

然后点击“运行”。这将创建我们用来存储 URL 的表。该表非常简单：主键 ID 是一个 12 个字符的随机字符串，我们将用它来引用 URL，而 URL 是一个可变长度的字符串，用于存储 URL 本身。

步骤 6。如果您查看侧边导航中的表视图，您应该会看到一个“urls”表。最后，我们需要获取我们的连接字符串。在侧边导航中点击“仪表板”，找到连接字符串，然后点击“复制代码片段”。

现在，我们可以开始编写代码。

构建 API

步骤 1。首先，我们必须安装 Azure 的无服务器 CLI，它将帮助我们创建一个项目，并最终进行测试/发布。打开终端并运行：

Plain Text

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

步骤 2。如果您想使用其他包管理工具，如 Yarn 或 pnpm，只需将 npm 替换为您喜欢的包管理工具。现在，我们可以开始我们的实际项目。打开您希望项目所在的文件夹，并运行以下三个命令：

Plain Text

func init --javascript

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

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

npm install nanoid @neondatabase/serverless

现在，您应该在该文件夹中看到一个新的Azure项目。第一个命令创建项目，接下来的两个命令创建我们的无服务器API路由，最后一个命令安装Neon无服务器驱动程序，用于与我们的数据库进行交互，以及用于生成ID的Nano ID。我们可以使用标准的Postgres驱动程序代替Neon驱动程序，但Neon的驱动程序使用无状态的HTTP查询，以减少一次性查询的延迟。因为我们正在运行一个可能只处理一个请求并发送一个查询的无服务器函数，一次性查询的延迟是很重要的。

您需要关注src/functions中的代码，因为这是我们的路由所在的地方。您应该在那里看到两个文件：submit.js和redirect.js。

submit.js

submit.js将存储我们用于提交URL的代码。首先，打开submit.js并将其代码替换为以下内容：

TypeScript

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

让我们逐步来分解这个过程。首先，我们导入Azure函数API、Neon无服务器驱动程序和Nano ID。这里我们使用ESM（ES模块）而不是CommonJS。稍后我们需要做一些更改来支持这一点。

接下来，我们创建与我们的数据库的连接。将[YOUR_POSTGRES_CONNECTION_STRING]替换为您从Neon仪表板复制的字符串。出于安全原因，您可能希望在生产环境中使用类似Azure Key Vault这样的服务来管理您的密钥，但现在，只需将它们放在脚本中即可。

现在，我们来到了实际路由。前几个属性定义了我们的路由处理程序应该何时触发：我们希望通过GET请求到submit来触发此路由。

我们的处理程序非常简单。我们首先检查是否通过URL查询参数传递了URL（例如，/submit?url=https://google.com），然后我们通过新的URL.canParse API检查它是否是一个有效的URL。接下来，我们使用Nano ID生成ID。因为我们的ID是12个字符长，所以我们必须将12传递给Nano ID生成器。最后，我们将新ID和URL插入到我们的数据库中。Neon无服务器驱动程序会自动对查询进行参数化，因此我们不需要担心恶意用户将SQL语句传递到URL中。

redirect.js

redirect.js是我们实际URL重定向将发生的地方。用以下代码替换它的代码：

TypeScript

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

脚本的第一部分与submit.js相同。再次用你从Neon仪表板复制的字符串替换\[YOUR\_POSTGRES\_CONNECTION\_STRING\]。

路由是让事情变得更有趣的地方。我们需要接受任何可能是重定向ID的路径，因此我们使用一个约束为12个字符长的参数。请注意，如果您以后有另一个12个字符长的路由，这可能会重叠。如果是这样，您可以将重定向路由重命名为以Z或其他字母数字大的字符开头，以便Azure无服务器在加载重定向路由之后加载。

最后，我们有我们实际的处理程序代码。我们需要做的就是查询匹配给定ID的URL，并在存在时重定向到它。我们在重定向中使用308状态码来告诉浏览器和搜索引擎忽略原始的缩短URL。

配置文件

我们还需要进行两项更改。首先，我们不希望在所有函数上都有一个/api前缀。为了移除这个前缀，打开应该在项目目录中的host.json文件，并添加以下内容：

TypeScript

"extensions": {
    "http": {
      "routePrefix": ""
    }
  }

这样可以使您的路由在没有任何前缀的情况下运行。我们需要做的另一件事是将项目切换为ES模块。打开package.json，并在文件末尾插入以下内容：

Plain Text

"type": "module"

就是这样！

测试和部署

现在，您可以通过运行func start来尝试在本地进行测试。您可以导航到http://localhost:7071/submit?url=https://example.com，然后使用它给您的ID并导航到http://localhost:7071/[YOUR_ID]。您应该被重定向到example.com。

当然，我们不能只在本地运行。要部署，我们需要安装Azure CLI，您可以使用以下命令之一来完成，取决于您的操作系统：

macOS（Homebrew）

Plain Text

brew install azure-cli

Windows（WPM）

Plain Text

winget install -e --id Microsoft.AzureCLI

Linux

Plain Text

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

现在，重新启动终端，运行az login进行登录，然后在项目目录中运行以下命令：

Plain Text

func azure functionapp publish [FunctionAppName]

将[FunctionAppName]替换为您之前为函数命名的名称。

现在，您应该能够通过[FunctionAppName].azurewebsites.net访问您的API。

结论

现在您应该拥有一个功能齐全的URL缩短器。您可以在这里访问代码，并着手添加前端。如果您想继续了解Neon和Azure的功能，我们建议查看分支。无论如何，我希望您从本指南中学到了一些有价值的内容。

Source:
https://dzone.com/articles/build-url-shortener-neon-azure-serverless-functions