בנה מקצר כתובות URL עם Neon, פונקציות אזור שרת שאינן דורשות שרת

ניאון כעת זמין בשוק ה-Azure. האינטגרציה החדשה בין ניאון ל-Azure מאפשרת לך לנהל את מנוי הניאון והחיובים שלך דרך פורטל ה-Azure כאילו ניאון הוא מוצר של Azure. Azure Serverless וניאון הם שילוב טבעי – Azure Serverless משחרר אותך מניהול התשתיות של השרת האינטרנט שלך. ניאון עושה אותו הדבר עבור מסדי הנתונים, מציע תכונות נוספות כמו ענף נתונים והרחבות מסדי נתונים מוליכות.

עם זאת, בואו ננסה את האינטגרציה החדשה זו על ידי בניית API לקיצור כתובות URL עם ניאון, Azure Serverless ו- Node.js.

הערה: יש לך צורך בגישה לטרמינל, עורך כמו VS Code ותקנה את Node v22 או גרסה מאוחרת יותר.

הגדרת התשתיות

יהיה עלינו לעשות דברים אחור-קדימה היום. במקום לכתוב את הקוד, נגדיר תחילה את הפונקציה הלא-שרתית שלנו ואת מסד הנתונים.

שלב 1. פתח את פורטל האינטרנט של Azure. אם אין לך חשבון, יהיה עליך ליצור חשבון מיקרוסופט.

שלב 2. עליך גם ליצור מנוי אם אין לך כבר, תוכל לעשות זאת ב-Azure.

שלב 3. עכשיו, אנחנו יכולים ליצור קבוצת משאבים כדי לאחסן את הפונקציה חסרת השרת שלנו ואת מסד הנתונים. עבור ל עמוד קבוצת המשאבים החדשה של Azure ומלא את הטופס כך:

• זוהי עמוד יצירת קבוצת משאבים של Azure עם קבוצת המשאבים מוגדרת ל"אזור קצר URL של Azure" והמיקום מוגדר למערב ארה"ב 3.
• באופן כללי, השתמש במיקום הקרוב ביותר אליך ואל המשתמשים שלך, שכן המיקום יקבע את המיקום ברירת המחדל של פונקציות חסרות השרת ואילו אזורים יש להם את השיהוי הנמוך ביותר. זה לא חיוני בדוגמה זו, אבל אתה יכול לחפש דרך הרשימה הנפתחת אם אתה רוצה להשתמש באחרת. עם זאת, שים לב ש-Neon עדיין אין מיקומים בכל האזורים הללו, מה שאומר שתצטרך למקם את מסד הנתונים שלך באזור רחוק יותר מהפונקציה חסרת השרת שלך.

שלב 4. לחץ על "סקירה ויצירה" בתחתית כדי לגשת לעמוד סקירת קונפיגורציה. לאחר מכן לחץ שוב על "צור".

שלב 5. עכשיו, אנחנו יכולים ליצור פונקציה חסרת שרת. למרבה הצער, זה כולל טופס נוסף. עבור ל עמוד יצירת אפליקציית צריכה גמישה חסרת שרת של Azure והשלים את הטופס. השתמש בקבוצת המשאבים שנוצרה קודם, בחר שם פונקציה חסרת שרת ייחודי, הנח את הפונקציה באזור קבוצת המשאבים שלך, והשתמש ב-Node v20.

שלב 6. השם שתבחר עבור האפליקציה ללא שרת שלך יהיה תת-הדומיין שאז'ור נותן לך כדי לגשת ל-API שלך, לכן בחר בחוכמה. לאחר שתסיים למלא את כל הפרטים, לחץ על "סקירה וצור" ולבסוף, "צור." אז'ור אמור להפנות אותך לדף האפליקציה החדשה. עכשיו אנחנו יכולים להקים את ניאון. פתח את דף המשאב החדש של ניאון בפורטל אז'ור, וניחשת נכון, מלא את הטופס.

איך ליצור מסד נתונים של ניאון באז'ור

שלב 1. צור דף משאב חדש של ניאון עם "AzureURLNeonShortener" כקבוצת משאבים, "URLShortenerDB" כשם המשאב, ו"West US 3" כמיקום. אם האזור שבחרת אינו זמין, בחר באזור הקרוב ביותר. לאחר שCompletes את הכל, לחץ על "סקירה וצור" ולאחר מכן "צור," כפי שעשית עבור משאבים קודמים.

שלב 2. ייתכן שתצטרך לחכות מעט עד שמסד הנתונים של ניאון יתניע. ברגע שזה קורה, פתח את דף התצורה שלו ולחץ על "עבור לניאון."

שלב 3. תופנה לדף הכניסה. אפשר לניאון לגשת למידע שלך באז'ור, ולאחר מכן תמצא את עצמך בדף יצירת פרויקט. מלא את הטופס למטה:

שם הפרויקט ומסד הנתונים אינם משמעותיים, אך ודא למקם את מסד הנתונים באזור אז'ור West US 3 (או בכל אזור שבחרת). זה יימנע משאילתות מסד נתונים לצאת ממרכז הנתונים, מה שמפחית את השיהוי.

שלב 4. לחץ על "צור" בתחתית הדף, תוך שמירה על הגדרת האוטו-סקיילינג ברירת המחדל. עכשיו אתה אמור להיות מופנה לדף בסיס הנתונים של ניאון. דף זה מכיל את מחרוזת החיבור שלנו, אשר נצטרך כדי להתחבר לבסיס הנתונים שלנו מהקוד שלנו. לחץ על "העתק קטע" כדי להעתיק את מחרוזת החיבור.

ודא שאתה לא מאבד את זה, כי נצטרך את זה מאוחר יותר, אבל בינתיים, אנחנו צריכים לארגן את בסיס הנתונים שלנו.

שלב 5. לחץ על “עורך SQL” בתפריט הצדדי, והדבק את ה-SQL הבא:

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

ואז לחץ על "הרץ." זה ייצור את הטבלה בה נשתמש כדי לאחסן כתובות URL. הטבלה די פשוטה: המפתח הראשי ID הוא מחרוזת אקראית באורך 12 תווים אותה נשתמש כדי להתייחס לכתובות URL, והכתובת URL היא מחרוזת באורך משתנה שתאחסן את הכתובת עצמה.

שלב 6. אם תסתכל על תצוגת הטבלה בתפריט הצדדי, אתה אמור לראות טבלת “urls”. לבסוף, אנחנו צריכים להשיג את מחרוזת החיבור שלנו. לחץ על “לוח מחוונים” בתפריט הצדדי, מצא את מחרוזת החיבור ולחץ על “העתק קטע.”

עכשיו, אנחנו יכולים להתחיל לכתוב קוד.

בניית ה-API

שלב 1. קודם כל, אנחנו חייבים להתקין את ה-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 שרת קטן לתקשורת עם מסד הנתונים שלנו ואת ה- 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}`);

  },

});

בוא נפרק את זה שלב אחרי שלב. תחילה, אנחנו מייבאים את API של פונקציות Azure, את דרייבר ה- Neon שרת קטן ואת Nano ID. אנחנו משתמשים ב־ESM (ES Modules) כאן במקום CommonJS. יהיה עלינו לבצע כמה שינויים מאוחר יותר כדי לתמוך בזה.

לאחר מכן, אנחנו יוצרים את החיבור למסד הנתונים שלנו. החלף את [YOUR_POSTGRES_CONNECTION_STRING] במחרוזת שהעתקת מלוח המחוונים של Neon. מסיבות אבטחה, כנראה שתרצה להשתמש בשירות כמו Azure Key Vault כדי לנהל את המפתחות שלך בסביבת הפקודה, אך לעכשיו תמיד אפשר לשים אותם בתוך התסריט.

עכשיו, אנחנו נמצאים במסלול הקיים. כמה מהמאפיינים הראשונים מגדירים מתי עלינו להפעיל את הידית שלנו: אנו רוצים שהמסלול הזה יופעל על ידי בקשה מסוג GET ל-submit.

הידית שלנו יחסית פשוטה. קודם כל, אנו בודקים אם עבר URL דרך פרמטר השאילתה של ה-URL (למשל, /submit?url=https://google.com), לאחר מכן אנו בודקים אם זהו URL חוקי באמצעות ה-API החדש URL.canParse. לאחר מכן, אנו מייצרים את ה-ID עם Nano ID. מכיוון שה-ID שלנו באורך של 12 תווים, עלינו להעביר 12 לגנרטור Nano ID. לבסוף, אנו מכניסים שורה חדשה עם ה-ID וה-URL החדשים למסד הנתונים שלנו. מנהל השרתים ללא שרת Neon מפרמטר אוטומטית את השאילתות, כך שאין לנו צורך לדאוג למשתמשים זדוניים שמעבירים פקודות 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. שוב, החלף את \[YOUR\_POSTGRES\_CONNECTION\_STRING\] במחרוזת שהעתקת מלוח המחוונים של Neon.

המסלול הוא המקום שבו הדברים נעשים מעניינים יותר. אנו צריכים לקבל כל נתיב שאפשר שיהיה ID להפניה, לכן אנו משתמשים בפרמטר עם המגבלה של 12 תווים. שים לב שזה יכול לחפוף אם אי פעם יהיה לך מסלול נוסף באורך 12 תווים. אם זה קורה, תוכל לשנות את שם המסלול להפניה כך שיתחיל ב-Z או בתו אחר גדול יותר באלפבית כדי לגרום ל-Azure ללא שרת לטעון את מסלול ההפניה אחר כך.

לבסוף, יש לנו את קוד הטפסים האמיתי שלנו. כל מה שאנחנו צריכים לעשות כאן הוא לשאול על כתובת ה-URL שתואמת את המזהה הנתון ולהפנות אליה אם היא קיימת. אנו משתמשים בקוד המצב 308 בהפניה שלנו כדי להודיע לדפדפנים ולמנועי החיפוש להתעלם מה-URL המקוצר המקורי.

קבצי התצורה

ישנם שני שינויים נוספים שאנחנו צריכים לבצע. ראשית, אנחנו לא רוצים תחילת כתובת ה-URL להיות /api בכל הפונקציות שלנו. כדי להסיר זאת, פתחו את host.json, שצריך להיות בתיקיית הפרויקט שלכם, והוסיפו את הבא:

"extensions": {

    "http": {

      "routePrefix": ""

    }

  }

זה מאפשר לנתיבים שלכם לפעול ללא כל תחילות. הדבר האחרון שאנחנו צריכים לעשות הוא להחליף את הפרויקט למודולי ES. פתחו את package.json והכניסו את הבא בסוף הקובץ:

"type": "module"

זהו!

בדיקה ופרסום

עכשיו, תוכלו לנסות לבדוק את הפונקציה מקומית על ידי הרצת func start. תוכלו לנווט אל http://localhost:7071/submit?url=https://example.com, ואז להשתמש במזהה שהוא נותן לך ולנווט אל 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]

החלף [שם_פונקציה] בשם הפונקציה שנתת לה מראש.

עכשיו אתה יכול לגשת לממשק התכנות שלך בכתובת [שם_פונקציה].azurewebsites.net.

מסקנה

עכשיו יש לך שורטנר כתובות URL תקין. תוכל לגשת לקוד כאן ולעבוד על הוספת ממשק קדמי. אם ברצונך להמשיך לקרוא על תכונות ה-Neon וה-Azure, אנחנו ממליצים לבדוק את הפיצול לסניף. בכל מקרה, אני מקווה שרכשת משהו שימושי ממדריך זה.