النيون متاح الآن في سوق Azure. يتيح التكامل الجديد بين Neon و Azure لك إدارة اشتراكك وفواتيرك من خلال بوابة Azure كما لو كان Neon منتجًا من Azure. تعتبر Azure بدون خادم و Neon تركيبة طبيعية – حيث تخلصك Azure بدون خادم من إدارة بنية خادم الويب الخاصة بك. ويفعل Neon الشيء نفسه بالنسبة لقواعد البيانات، حيث يقدم ميزات إضافية مثل تفرع البيانات وإضافات قاعدة البيانات المتجهة.
هذا قال، دعونا نجرب هذا التكامل الجديد من خلال بناء واجهة برمجة تطبيقات تقصير الروابط باستخدام Neon، و Azure بدون خادم، و Node.js.
ملاحظة: يجب أن يكون لديك وصول إلى Terminal، ومحرر مثل VS Code، و Node v22 أو أحدث مثبت.
إعداد البنية التحتية
سيتعين علينا القيام بالأشياء بطريقة عكسية قليلاً اليوم. بدلاً من كتابة الكود، سنقوم أولاً بإعداد وظيفة الخادم بدون خادم وقاعدة البيانات الخاصة بنا.
الخطوة 1. افتح بوابة الويب Azure. إذا لم يكن لديك واحدة بالفعل، ستحتاج إلى إنشاء حساب Microsoft.
الخطوة 2. ستحتاج أيضًا إلى إنشاء اشتراك إذا لم يكن لديك واحد بالفعل، ويمكنك القيام بذلك في Azure.
الخطوة 3. الآن، يمكننا إنشاء مجموعة موارد لتخزين وظيفة الخادم اللاخادم وقاعدة البيانات الخاصة بنا. انتقل إلى صفحة مجموعة الموارد الجديدة في Azure واملأ النموذج على النحو التالي:
- هذه هي صفحة إنشاء مجموعة موارد Azure مع تعيين مجموعة الموارد على “AzureNeonURLShortener” وتعيين الموقع على West US 3.
- عمومًا، استخدم الموقع الأقرب إليك وإلى مستخدميك، حيث يحدد الموقع مكان وضع الوظائف الخادم اللاخادم افتراضيًا والمناطق التي تحتوي على أقل تأخير. ليس أمرًا حيويًا في هذا المثال، ولكن يمكنك البحث من خلال القائمة المنسدلة إذا كنت ترغب في استخدام موقع آخر. ومع ذلك، لاحظ أن شركة Neon ليست لديها مواقع في جميع هذه المناطق بعد، مما يعني أنه يجب عليك وضع قاعدة البيانات في منطقة أبعد عن وظيفتك الخادمية.
الخطوة 4. انقر على “مراجعة وإنشاء” في الأسفل للوصول إلى صفحة مراجعة التكوين. ثم انقر “إنشاء” مرة أخرى.
الخطوة 5. الآن، يمكننا إنشاء وظيفة خادم لاخادم. للأسف، يتضمن ذلك نموذجًا آخر. انتقل إلى صفحة إنشاء تطبيق خادم لاخادم Azure Flex Consumption وأكمل النموذج. استخدم مجموعة الموارد التي تم إنشاؤها سابقًا، اختر اسم فريد لوظيفة الخادم اللاخادم، ضع الوظيفة في منطقة مجموعة الموارد الخاصة بك، واستخدم Node v20.
الخطوة 6. الاسم الذي تختاره لتطبيقك بدون خادم سيكون هو النطاق الفرعي الذي توفره Azure للوصول إلى واجهة برمجة التطبيقات الخاصة بك، لذا اختر بحكمة. بعد الانتهاء من ملء كل شيء، انقر على “مراجعة وإنشاء” وأخيراً، “إنشاء”. يجب أن تقوم Azure بإعادة توجيهك إلى صفحة التطبيق الجديد. الآن يمكننا إعداد Neon. افتح صفحة المورد الجديد لـ Neon في بوابة Azure، وخمن ماذا، املأ النموذج.
كيفية إنشاء قاعدة بيانات Neon على Azure
الخطوة 1. أنشئ صفحة مورد جديدة لـ Neon مع “AzureURLNeonShortener” كمجموعة المورد، “URLShortenerDB” كاسم المورد، و”West US 3″ كموقع. إذا كانت المنطقة التي اخترتها غير متاحة، اختر المنطقة الأقرب التالية. بمجرد الانتهاء من كل شيء، انقر على “مراجعة وإنشاء” ثم “إنشاء”، كما فعلت مع الموارد السابقة.
الخطوة 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);
ثم انقر على “تشغيل”. سيؤدي ذلك إلى إنشاء الجدول الذي سنستخدمه لتخزين الروابط. الجدول بسيط جدًا: مفتاحه الأساسي ID هو سلسلة عشوائية مكونة من 12 حرفًا سنستخدمها للإشارة إلى الروابط، والرابط هو سلسلة بطول متغير ستخزن الرابط نفسه.
الخطوة 6. إذا نظرت إلى عرض الجدول في شريط التنقل الجانبي، يجب أن ترى جدول “urls”. أخيرًا، نحتاج إلى الحصول على سلسلة الاتصال الخاصة بنا. انقر على “لوحة التحكم” في شريط التنقل الجانبي، وابحث عن سلسلة الاتصال، وانقر على “نسخ المقتطف”.
الآن، يمكننا البدء في كتابة الكود.
بناء واجهة برمجة التطبيقات
الخطوة 1. أولاً، يجب علينا تثبيت CLI بدون خادم من Azure، والذي سيساعدنا في إنشاء مشروع وفي النهاية اختباره/نشره. افتح terminal وقم بتشغيل:
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 جديد في هذا المجلد. الأمر الأول ينشئ المشروع، والأمرين التاليين ينشئان مسارات واجهة برمجة التطبيقات بدون خادم، والأمر الأخير يثبت برنامج التشغيل بدون خادم Neon للتفاعل مع قاعدة البيانات الخاصة بنا وNano ID لتوليد المعرفات. يمكننا استخدام برنامج تشغيل Postgres القياسي بدلاً من برنامج تشغيل Neon، لكن برنامج تشغيل Neon يستخدم استعلامات HTTP بدون حالة لتقليل زمن الانتظار للاستعلامات الفردية. لأنه لدينا دالة بدون خادم قد تعالج طلبًا واحدًا فقط وترسل استعلامًا واحدًا، فإن زمن الانتظار للاستعلام الفردي مهم.
سوف تحتاج إلى التركيز على الشيفرة في src/functions، حيث توجد مساراتنا. يجب أن ترى هناك ملفين: submit.js وredirect.js.
submit.js
submit.js سيخزن الشيفرة التي نستخدمها لتقديم الروابط. أولاً، افتح 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، وبرنامج التشغيل بدون خادم Neon، وNano ID. نحن نستخدم ESM (وحدات ES) هنا بدلاً من CommonJS. سنحتاج إلى إجراء بعض التغييرات لاحقًا لدعم ذلك.
بعد ذلك، نقوم بإنشاء الاتصال بقاعدة البيانات الخاصة بنا. استبدل [YOUR_POSTGRES_CONNECTION_STRING] بالسلسلة التي قمت بنسخها من لوحة إدارة Neon. لأسباب أمنية، من المحتمل أن ترغب في استخدام خدمة مثل Azure Key Vault لإدارة مفاتيحك في بيئة الإنتاج، ولكن في الوقت الحالي، يكفي فقط وضعها في البرنامج النصي.
الآن، نحن في المسار الفعلي. تعرف الخصائص الأولى عندما يجب تنشيط معالج المسار لدينا: نريد تنشيط هذا المسار بواسطة طلب GET لطريقة الإرسال.
معالجنا بسيط جدًا. نتحقق أولاً مما إذا تم تمرير عنوان URL من خلال معلمة استعلام URL (على سبيل المثال ، /submit؟url=https://google.com) ، ثم نتحقق مما إذا كان عنوان URL صالحًا عن طريق واجهة برمجة التطبيق الجديدة URL.canParse. بعد ذلك ، نقوم بتوليد معرف بواسطة Nano ID. نظرًا لأن معرفاتنا تحتوي على 12 حرفًا ، يجب أن نمرر 12 إلى مولد Nano ID. في النهاية ، نقوم بإدراج صف جديد بالمعرف وعنوان URL الجديد في قاعدة البيانات لدينا. يقوم برنامج تشغيل Neon serverless بتعيين المعاملات تلقائيًا في الاستعلامات ، لذا لا داعي للقلق بشأن المستخدمين الخبيثين الذين يمرون بيانات SQL إلى عنوان URL.
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.
المسار هو المكان الذي تصبح الأمور فيه أكثر إثارة للاهتمام. نحن بحاجة إلى قبول أي مسار يمكن أن يكون معرف توجيه ، لذا نستخدم معلمة مع قيد مكون من 12 حرفًا. لاحظ أن هذا قد يتداخل إذا كان لديك أي مسار آخر من 12 حرفًا. إذا كان الأمر كذلك ، يمكنك إعادة تسمية مسار التوجيه ليبدأ بحرف Z أو حرف آخر أكبر حسب الترتيب الأبجدي الرقمي لتحميل مسار التوجيه بعد ذلك على خادم Azure serverless.
أخيرًا، لدينا رمز المعالج الفعلي الخاص بنا. كل ما علينا فعله هنا هو الاستعلام عن عنوان URL مطابق للمعرف المعطى وإعادة توجيه إليه إذا كان موجودًا. نستخدم رمز الحالة 308 في إعادة التوجيه الخاصة بنا لإخبار المتصفحات ومحركات البحث بتجاهل عنوان URL المختصر الأصلي.
ملفات التكوين
هناك تغييران آخران علينا إجراؤهما. أولاً، لا نريد بادئة /api على جميع وظائفنا. لإزالتها، افتح ملف host.json، الذي يجب أن يكون في دليل المشروع الخاص بك، وأضف ما يلي:
"extensions": {
"http": {
"routePrefix": ""
}
}
هذا يتيح لمساراتك العمل دون أي بادئات. الشيء الآخر الذي علينا القيام به هو تبديل المشروع إلى ES Modules. افتح 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]
استبدل [FunctionAppName] بأي اسم قمت بتسميته لوظيفتك سابقًا.
الآن، يجب أن تكون قادرًا على الوصول إلى واجهة برمجة التطبيقات الخاصة بك على [FunctionAppName].azurewebsites.net.
الخاتمة
يجب أن يكون لديك الآن مختصر URL يعمل بشكل كامل. يمكنك الوصول إلى الكود هنا والعمل على إضافة واجهة أمامية. إذا كنت ترغب في مواصلة القراءة حول ميزات نيون وأزور، نوصي بالاطلاع على التفرع. على أي حال، آمل أن تكون قد تعلمت شيئًا قيمًا من هذا الدليل.
Source:
https://dzone.com/articles/build-url-shortener-neon-azure-serverless-functions