NeonとAzureサーバーレス関数を使ってURL短縮サービスを構築する

Neonは現在、Azureマーケットプレイスで利用可能です。NeonとAzureの新しい統合により、NeonをAzure製品のようにAzureポータルを通じてNeonのサブスクリプションと請求を管理できるようになります。AzureサーバーレスとNeonは自然な組み合わせです — Azureサーバーレスは、ウェブサーバーインフラストラクチャの管理から解放してくれます。Neonはデータベースに対しても同様のことを行い、データブランチやベクターデータベース拡張などの追加機能を提供します。

それでは、この新しい統合を試して、Neon、Azureサーバーレス、およびNode.jsを使用してURL短縮APIを構築してみましょう。

注意: ターミナル、VS Codeのようなエディタ、およびNode v22以降がインストールされている必要があります。

インフラの設定

今日は少し逆のことをしなければなりません。コードを書く代わりに、まずサーバーレス関数とデータベースを設定します。

ステップ1。Azureウェブポータルを開きます。まだアカウントを持っていない場合は、Microsoftアカウントを作成する必要があります。

ステップ2。すでにサブスクリプションを持っていない場合は、サブスクリプションを作成する必要があります。これは、Azureで行うことができます。

ステップ 3。次に、サーバーレス関数とデータベースを保存するリソースグループを作成します。Azureの新しいリソースグループページに移動し、次のようにフォームに記入します：

• これは、リソースグループが「AzureNeonURLShortener」に設定され、ロケーションがWest US 3に設定されたAzureリソースグループ作成ページです。
• 一般的に、ロケーションはあなたとあなたのユーザーに最も近いものを使用してください。ロケーションはサーバーレス関数のデフォルト配置を決定し、レイテンシーが最も低い地域を示します。この例では重要ではありませんが、別のロケーションを使用したい場合はドロップダウンから検索できます。ただし、Neonはまだこれらのすべての地域にロケーションを持っていないため、サーバーレス関数からさらに離れた地域にデータベースを配置する必要があります。

ステップ 4。下部の「レビュー & 作成」をクリックして、構成レビューページにアクセスします。次に、再度「作成」をクリックします。

ステップ 5。次に、サーバーレス関数を作成します。残念ながら、もう一つのフォームが含まれています。Azure Flexの消費サーバーレスアプリ作成ページに移動し、フォームに記入します。前に作成したリソースグループを使用し、ユニークなサーバーレス関数名を選択し、関数をリソースグループの地域に配置し、Node v20を使用します。

ステップ6。サーバーレスアプリの名前は、APIにアクセスするためのAzureが提供するサブドメインになるので、慎重に選んでください。すべての入力が完了したら、「レビューと作成」をクリックし、最後に「作成」をクリックします。Azureは新しいアプリのページにリダイレクトされます。これでNeonを設定できます。Azureポータルで新しいNeonリソースページを開き、予想通りフォームに入力してください。

AzureでNeonデータベースを作成する方法

ステップ1。リソースグループに「AzureURLNeonShortener」、リソース名に「URLShortenerDB」、ロケーションに「West US 3」を指定して新しいNeonリソースページを作成します。選択した地域が利用できない場合は、次に近い地域を選んでください。すべての入力が完了したら、「レビューと作成」をクリックし、その後「作成」をクリックします。以前のリソースと同様です。

ステップ2。Neonデータベースがインスタンス化されるまで少し待つ必要があるかもしれません。インスタンス化されたら、その設定ページを開き、「Go To 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はURLを参照するために使用する12文字のランダムな文字列であり、URLはURLそのものを保存する可変長の文字列です。

ステップ6。サイドナビゲーションの「テーブルビュー」を見ると、「urls」というテーブルが表示されるはずです。最後に、接続文字列を取得する必要があります。「ダッシュボード」をクリックし、接続文字列を見つけて「スニペットをコピー」をクリックしてください。

これで、コードの記述を開始できます。

APIの構築

ステップ1。最初に、AzureのサーバーレスCLIをインストールする必要があります。これにより、プロジェクトを作成し、最終的にテスト/公開するのに役立ちます。ターミナルを開いて、次のコマンドを実行してください：

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

ステップ2。Yarnやpnpmなどの他のパッケージマネージャーを使用したい場合は、npmを好みのパッケージマネージャーに置き換えてください。これで、実際のプロジェクトを開始できます。プロジェクトを作成したいフォルダーを開き、次の3つのコマンドを実行してください。

func init --javascript

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

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

npm install nanoid @neondatabase/serverless

今、そのフォルダーに新しいAzureプロジェクトが表示されるはずです。最初のコマンドはプロジェクトを作成し、その後の2つのコマンドはサーバーレスAPIルートを作成し、最後のコマンドはデータベースとのインターフェイスのためのNeonサーバーレスドライバーとID生成のためのNano IDをインストールします。Neonドライバーの代わりに標準のPostgresドライバーを使用することもできますが、Neonのドライバーは一時的なクエリの遅延を減らすために状態を持たないHTTPクエリを使用しています。一回限りのクエリーの遅延は重要です。サーバーレス関数を実行しており、1つのリクエストを処理して1つのクエリを送信する可能性があるためです。

src/functions内のコードに焦点を当てる必要があります。そこには2つのファイルがあります: 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をインポートします。ここではCommonJSの代わりにESM（ES Modules）を使用しています。後でこれをサポートするためにいくつかの変更を加える必要があります。

次に、データベースへの接続を作成します。 [YOUR_POSTGRES_CONNECTION_STRING] をNeonダッシュボードからコピーした文字列で置き換えてください。セキュリティ上の理由から、本番環境ではキーを管理するためにAzure Key Vaultのようなサービスを使用することが望ましいですが、今のところはスクリプトに配置するだけで問題ありません。

今、私たちは実際のルートにいます。最初のいくつかのプロパティは、ルートハンドラーがいつトリガーされるべきかを定義します：このルートは、submitへのGETリクエストによってトリガーされることを望んでいます。

私たちのハンドラーは非常にシンプルです。まず、URLクエリパラメータを介してURLが渡されているかを確認します（例：/submit?url=https://google.com）、次に、新しいURL.canParse APIを使用して、それが有効なURLかどうかを確認します。次に、Nano IDを使用してIDを生成します。私たちのIDは12文字の長さであるため、Nano IDジェネレーターに12を渡す必要があります。最後に、新しいIDとURLをデータベースに挿入します。Neonのサーバーレスドライバーは自動的にクエリをパラメータ化するため、悪意のあるユーザーがURLにSQL文を渡すことを心配する必要はありません。

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と同じです。再度、\[YOUR\_POSTGRES\_CONNECTION\_STRING\]をNeonダッシュボードからコピーした文字列に置き換えます。

ルートは、さらに興味深いものになります。リダイレクトIDとなる可能性のある任意のパスを受け入れる必要があるため、12文字の長さの制約を持つパラメータを使用します。これは、別の12文字のルートがある場合に重複する可能性があることに注意してください。もし重複する場合は、リダイレクトルートの名前をZやその他のアルファベット順で大きい文字から始めるように変更して、Azureのサーバーレスがリダイレクトルートを後に読み込むようにできます。

最終的に、実際のハンドラーコードを取得しました。ここで行う必要があるのは、指定されたIDに一致するURLをクエリし、存在する場合はそれにリダイレクトすることです。リダイレクト時に308ステータスコードを使用して、ブラウザや検索エンジンに元の短縮URLを無視するように伝えます。

設定ファイル

行う必要がある変更がさらに2つあります。まず、すべての機能に/api接頭辞を付けたくありません。これを削除するには、プロジェクトディレクトリにあるはずのhost.jsonを開き、以下を追加します：

"extensions": {

    "http": {

      "routePrefix": ""

    }

  }

これにより、ルートが接頭辞なしで動作するようになります。もう1つ行う必要があることは、プロジェクトをES Modulesに切り替えることです。package.jsonを開き、ファイルの最後に以下を挿入します：

"type": "module"

以上です！

テストとデプロイ

今、func startを実行してローカルでテストできます。http://localhost:7071/submit?url=https://exampleに移動し、提供されるIDを使用してhttp://localhost:7071/[YOUR_ID]に移動します。そうするとexample.comにリダイレクトされます。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]を置き換えてください。

これで、APIに[FunctionAppName].azurewebsites.netからアクセスできるはずです。

結論

これで完全に機能するURL短縮サービスができました。コードにはこちらからアクセスして、フロントエンドの追加を行うことができます。NeonとAzureの機能についてさらに読みたい場合は、Branchingをチェックすることをお勧めします。いずれにせよ、このガイドから何か価値あるものを学んでいただければ幸いです。