Share via

كيفية القيام بما يلي: نشر تطبيقات Fluid باستخدام تطبيقات ويب ثابتة Azure

  • مقالة

توضح هذه المقالة كيفية نشر تطبيقات Fluid باستخدام Azure Static Web Apps. يحتوي مستودع FluidHelloWorld على تطبيق Fluid يسمى DiceRoller الذي يمكن جميع العملاء المتصلين من لفة الموت وعرض النتيجة. في هذه الكيفية، يمكنك نشر تطبيق DiceRoller إلى Azure Static Web Apps باستخدام ملحق Visual Studio Code.

إذا لم يكن لديك اشتراك Azure، فأنشئ حساباً تجريبياً مجانياً.

المتطلبات الأساسية

نسخ المستودع واستنساخه

انتقل إلى 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 الخاص بك.

  1. في Visual Studio Code، حدد أيقونة مستكشف Azure ، ثم حدد تسجيل الدخول إلى Azure، واتبع المطالبات.

    Sign in to Azure through VS Code

  2. بعد تسجيل الدخول، تحقق من أن عنوان البريد الإلكتروني لحساب Azure يظهر في شريط المعلومات وأن اشتراكك (اشتراكاتك) يظهر في مستكشف Azure :

    VS Code Azure explorer showing subscriptions

إنشاء تطبيق ويب ثابت

  1. داخل Visual Studio Code، حدد شعار Azure في Activity Bar لفتح نافذة ملحقات Azure.

    An image of the Azure Logo on a white background.

    إشعار

    يجب تسجيل الدخول إلى Azure وGitHub في Visual Studio Code للمتابعة. إذا لم تقم بالتسجيل، فسوف يقوم الملحق بمساعدتك على التسجيل في القسمين معًا أثناء عملية إنشاء الحساب.

  2. حدد F1 لفتح لوحة أوامر Visual Studio Code.

  3. أدخل Create static web app في مربع الأوامر.

  4. حدد Azure Static Web Apps: Create static web app... وحدد Enter.

    الإعداد القيمة‬
    الاسم أدخل my-first-static-web-app
    المنطقة حدد أقرب منطقة إليك.
    إعداد مسبق للبناء حدد مخصص.

  5. أدخل قيم الإعدادات الخاصة بها والتي تتطابق مع اختيار إطار العمل المحدد مسبقا.

    الإعداد القيمة‬
    موقع التعليمات البرمجية للتطبيق أدخل /src
    موقع التعليمات البرمجية لدالة Azure واجهة برمجة التطبيقات

  6. بمجرد إنشاء التطبيق، يظهر إشعار تأكيد في Visual Studio Code.

    An image of the notification shown in Visual Studio Code when the app is created. The notification reads: Successfully created new static web app my-first-static-web-app. GitHub Actions is building and deploying your app, it will be available once the deployment completes.

    بالرغم من أن التوزيع قيد التقدم، يقوم ملحق Visual Studio Code بإبلاغك بحالة الإصدار.

    An image of the Static Web Apps extension UI, which shows a list of static web apps under each subscription. The highlighted static web app has a status of Waiting for Deployment displayed next to it.

    بمجرد اكتمال عملية التوزيع، يمكنك الانتقال مباشرة إلى موقع الويب الخاص بك.

  7. لعرض موقع الويب في المستعرض، انقر بزر الماوس الأيمن فوق المشروع في ملحق Static Web Apps، وحدد Browse Site.

    An image of the menu that is shown when right-clicking on a static web app. The Browse Site option is highlighted.

  8. يعد موقع التعليمات البرمجية للتطبيق و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.

An image of the menu that is shown when right-clicking on a static web app. The Delete option is highlighted.