كيفية القيام بما يلي: نشر تطبيقات Fluid باستخدام تطبيقات ويب ثابتة Azure
توضح هذه المقالة كيفية نشر تطبيقات Fluid باستخدام Azure Static Web Apps. يحتوي مستودع FluidHelloWorld على تطبيق Fluid يسمى DiceRoller الذي يمكن جميع العملاء المتصلين من لفة الموت وعرض النتيجة. في هذه الكيفية، يمكنك نشر تطبيق DiceRoller إلى Azure Static Web Apps باستخدام ملحق Visual Studio Code.
إذا لم يكن لديك اشتراك Azure، فأنشئ حساباً تجريبياً مجانياً.
المتطلبات الأساسية
- حساب GitHub
- حساب Azure
- Visual Studio Code
- ملحق Azure Static Web Apps ل Visual Studio Code
- قم بتثبيت Git
نسخ المستودع واستنساخه
انتقل إلى https://github.com/microsoft/FluidHelloWorld وانقر فوق الزر Fork لإنشاء نسخة المستودع الخاصة بك من مستودع FluidHelloWorld.
ثم انسخ نسخة المستودع إلى جهازك المحلي باستخدام الأمر التالي.
git clone -b main-azure https://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/FluidHelloWorld.git
تأكد من استبدال هذه القيمة <YOUR_GITHUB_ACCOUNT_NAME>
باسم مستخدم GitHub الخاص بك.
بعد ذلك، افتح Visual Studio Code وانتقل إلى File > Open Folder لفتح المستودع المستنسخ في المحرر.
الاتصال إلى Azure Fluid Relay
يمكنك الاتصال ب Azure Fluid Relay من خلال توفير معرف المستأجر والمفتاح الذي تم إنشاؤه بشكل فريد لك عند إنشاء مورد Azure. يمكنك إنشاء تنفيذ موفر الرمز المميز الخاص بك أو يمكنك استخدام تطبيقي موفر الرمز المميز اللذين يوفرهما AzureFunctionTokenProvider
إطار عمل Fluid .
لمعرفة المزيد حول استخدام InsecureTokenProvider للتطوير المحلي، راجع الاتصال إلى الخدمة والمصادقة والتخويل في تطبيقك.
استخدام AzureFunctionTokenProvider
AzureFunctionTokenProvider هو موفر رمز مميز لا يعرض المفتاح السري في التعليمات البرمجية من جانب العميل ويمكن استخدامه في سيناريوهات الإنتاج. يمكن استخدام تنفيذ موفر الرمز المميز هذا لإحضار رمز مميز من نقطة نهاية HTTPS المسؤولة عن توقيع رموز الوصول المميزة باستخدام مفتاح المستأجر. يوفر هذا طريقة آمنة لإنشاء الرمز المميز وتمريره مرة أخرى إلى تطبيق العميل.
import { AzureClient, AzureFunctionTokenProvider } from "@fluidframework/azure-client";
const config = {
tenantId: "myTenantId",
tokenProvider: new AzureFunctionTokenProvider("https://myAzureAppUrl"+"/api/GetAzureToken", { userId: "test-user",userName: "Test User" }),
endpoint: "https://myServiceEndpointUrl",
type: "remote",
};
const clientProps = {
connection: config,
};
const client = new AzureClient(clientProps);
لاستخدام موفر الرمز المميز هذا، تحتاج إلى نشر نقطة نهاية HTTPS التي ستوقع الرموز المميزة، وتمرير عنوان URL إلى نقطة النهاية الخاصة بك إلى AzureFunctionTokenProvider.
نشر Azure Function باستخدام تطبيقات Azure Static Web
تسمح لك Azure Static Web Apps بتطوير موقع ويب كامل المكدس دون الحاجة إلى التعامل مع التكوين من جانب الخادم لبيئة استضافة ويب بأكملها. يمكنك نشر Azure Functions جنبا إلى جنب مع موقع الويب الثابت الخاص بك. باستخدام هذه الإمكانية، يمكنك نشر وظيفة Azure التي يتم تشغيلها بواسطة HTTP والتي ستوقع الرموز المميزة.
لمزيد من المعلومات حول نشر واجهات برمجة التطبيقات التي تعمل بوظيفة Azure إلى تطبيق الويب الثابت، راجع إضافة واجهة برمجة تطبيقات إلى Azure Static Web Apps باستخدام Azure Functions.
إشعار
يمكنك استخدام مثال التعليمات البرمجية لدالة Azure في تنفيذ دالة Azure لتوقيع الرموز المميزة لتنفيذ وظيفتك.
بمجرد نشر Azure Function، يجب تحديث عنوان URL الذي تم تمريره إلى AzureFunctionTokenProvider.
import { AzureClient } from "@fluidframework/azure-client";
const config = {
tenantId: "myTenantId",
tokenProvider: new AzureFunctionTokenProvider("https://myStaticWebAppUrl/api/GetAzureToken", { userId: "test-user",userName: "Test User" }),
endpoint: "https://myServiceEndpointUrl",
type: "remote",
};
const clientProps = {
connection: config,
};
const client = new AzureClient(config);
npm run build
قم بتشغيل الأمر من الدليل الجذر لإعادة إنشاء التطبيق. سيؤدي ذلك إلى إنشاء dist
مجلد مع التعليمات البرمجية للتطبيق الذي يجب نشره إلى تطبيق الويب الثابت.
تسجيل الدخول إلى Azure
إذا كنت تستخدم بالفعل ملحقات خدمة Azure، يجب أن تكون قد سجلت الدخول بالفعل ويمكنك تخطي هذه الخطوة.
بمجرد تثبيت ملحق في Visual Studio Code، تحتاج إلى تسجيل الدخول إلى حساب Azure الخاص بك.
في Visual Studio Code، حدد أيقونة مستكشف Azure ، ثم حدد تسجيل الدخول إلى Azure، واتبع المطالبات.
بعد تسجيل الدخول، تحقق من أن عنوان البريد الإلكتروني لحساب Azure يظهر في شريط المعلومات وأن اشتراكك (اشتراكاتك) يظهر في مستكشف Azure :
إنشاء تطبيق ويب ثابت
داخل Visual Studio Code، حدد شعار Azure في Activity Bar لفتح نافذة ملحقات Azure.
إشعار
يجب تسجيل الدخول إلى Azure وGitHub في Visual Studio Code للمتابعة. إذا لم تقم بالتسجيل، فسوف يقوم الملحق بمساعدتك على التسجيل في القسمين معًا أثناء عملية إنشاء الحساب.
حدد F1 لفتح لوحة أوامر Visual Studio Code.
أدخل Create static web app في مربع الأوامر.
حدد Azure Static Web Apps: Create static web app... وحدد Enter.
الإعداد القيمة الاسم أدخل my-first-static-web-app المنطقة حدد أقرب منطقة إليك. إعداد مسبق للبناء حدد مخصص. أدخل قيم الإعدادات الخاصة بها والتي تتطابق مع اختيار إطار العمل المحدد مسبقا.
الإعداد القيمة موقع التعليمات البرمجية للتطبيق أدخل /src موقع التعليمات البرمجية لدالة Azure واجهة برمجة التطبيقات بمجرد إنشاء التطبيق، يظهر إشعار تأكيد في Visual Studio Code.
بالرغم من أن التوزيع قيد التقدم، يقوم ملحق Visual Studio Code بإبلاغك بحالة الإصدار.
بمجرد اكتمال عملية التوزيع، يمكنك الانتقال مباشرة إلى موقع الويب الخاص بك.
لعرض موقع الويب في المستعرض، انقر بزر الماوس الأيمن فوق المشروع في ملحق Static Web Apps، وحدد Browse Site.
يعد موقع التعليمات البرمجية للتطبيق وAzure Function وإخراج البنية جزءا من
azure-static-web-apps-xxx-xxx-xxx.yml
ملف سير العمل الموجود في/.github/workflows
الدليل. يتم إنشاء هذا الملف تلقائيا عند إنشاء تطبيق ويب ثابت. وهو يحدد GitHub Actions لإنشاء تطبيق الويب الثابت ونشره.
تنظيف الموارد
إذا كنت ستتوقف عن استخدام هذا التطبيق، يمكنك حذف تطبيقات الويب الثابتة Azure عن طريق تشغيل الملحق التالي:
في نافذة Visual Studio Code Explorer، ارجع إلى قسم Static Web Apps وانقر بزر الماوس الأيمن فوق my-first-static-web-app وحدد Delete.