使用 Neon 和 Azure 无服务器函数构建 URL 缩短服务

Neon現在在Azure市場上可用。Neon和Azure之間的新整合允許您通過Azure門戶管理您的Neon訂閱和計費，就像Neon是Azure產品一樣。Azure無伺服器和Neon是一個天然組合 — Azure無伺服器使您免於管理網頁伺服器基礎設施。Neon對於數據庫也是如此，提供額外功能，如數據分支和向量數據庫擴展。

話雖如此，讓我們通過使用Neon、Azure無伺服器和Node.js來構建一個URL縮短API來嘗試這個新的整合。

註：您應該能夠訪問終端、像VS Code這樣的編輯器，並安裝Node v22或更新版本。

設置基礎設施

今天我們將採取有點不同的方式。我們將首先設置無伺服器功能和數據庫，而不是編寫代碼。

步驟1。打開Azure網站門戶。如果您還沒有，您需要創建一個Microsoft帳戶。

步驟2。如果您還沒有訂閱，您還需要創建一個訂閱，您可以在Azure中進行。

步驟 3。現在，我們可以創建一個資源群組來存儲我們的無服務器函數和數據庫。進入Azure 的新資源群組頁面，並填寫表單如下：

• 這是 Azure 資源群組創建頁面，資源群組設置為「AzureNeonURLShortener」，位置設置為 West US 3。
• 通常，使用距離您和用戶最近的位置，因為位置將決定無服務器函數的默認放置位置以及哪些區域具有最低的延遲時間。在這個示例中並不是必要的，但如果您想使用其他位置，可以通過下拉菜單搜索。但請注意，Neon 還沒有所有這些地區的據點，這意味著您必須將您的數據庫放在離您的無服務器函數更遠的地區。

步驟 4。點擊底部的「審核並創建」以訪問配置審核頁面。然後再次點擊「創建」。

步驟 5。現在，我們可以創建一個無服務器函數。不幸的是，這又涉及到另一個表單。進入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：

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，這將幫助我們創建項目，最終測試/發布它。打開終端並運行：

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

步驟 2。如果您希望使用其他包管理器，如 Yarn 或 pnpm，只需將npm替換為您喜歡的包管理器。現在，我們可以開始進入我們的實際項目。打開您想要項目位於其中的文件夾，並運行以下三個命令：

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，並用以下代碼替換它：

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 functions 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 serverless 驅動程序會自動對查詢進行參數化，因此我們不必擔心惡意用戶將 SQL 語句傳遞到 URL 中。

redirect.js

redirect.js 是我們實際 URL 重定向將發生的地方。將其代碼替換為以下內容：

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 serverless 在載入重定向路徑之後載入。

最後，我們有了實際的處理程式碼。我們在這裡所需要做的就是查詢符合給定 ID 的 URL，如果存在的話就將使用者重新導向到該 URL。我們在重新導向時使用 308 狀態碼，以告訴瀏覽器和搜索引擎忽略原始的縮短 URL。

配置文件

我們還需要進行兩個修改。首先，我們不希望所有函數都有 /api 前綴。要刪除這個前綴，打開 host.json 檔案，該檔案應該在您的項目目錄中，然後添加以下內容：

"extensions": {

    "http": {

      "routePrefix": ""

    }

  }

這樣可以讓您的路由不帶任何前綴。我們還需要做的另一件事是將項目切換為 ES 模組。打開 package.json 檔案，在檔案末尾插入以下內容：

"type": "module"

就這樣！

測試和部署

現在，您可以通過運行 func start 來進行本地測試。您可以在瀏覽器中輸入 http://localhost:7071/submit?url=https://example.com，然後使用它給您的 ID，在瀏覽器中輸入 http://localhost:7071/[YOUR_ID]。您應該會被重新導向到 example.com。

當然，我們不能只在本地運行這個。要進行部署，我們需要安裝 Azure CLI，您可以根據您的操作系統選擇以下其中一個命令進行安裝：

macOS（使用 Homebrew）

brew install azure-cli

Windows（使用 WPM）

winget install -e --id Microsoft.AzureCLI

Linux

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

現在，重新啟動終端，運行 az login 以進行登錄，然後在項目目錄中運行以下命令：

func azure functionapp publish [FunctionAppName]

將[FunctionAppName]替換為您之前命名的函數。

現在，您應該能夠在[FunctionAppName].azurewebsites.net訪問您的API。

結論

現在，您應該擁有一個完全功能的URL縮短器。您可以在這裡訪問代碼這裡並開始添加前端。如果您想繼續了解Neon和Azure的功能，我們建議查看分支。無論如何，我希望您從本指南中學到了有價值的東西。