نشر تطبيق Blazor على Azure Static Web Apps

تنشر Azure Static Web Apps موقع ويب إلى بيئة إنتاج عن طريق إنشاء تطبيقات من مستودع GitHub مدعوم بخلفية بلا خادم. يوضح البرنامج التعليمي التالي كيفية نشر تطبيق C# Blazor WebAssembly الذي يعرض بيانات الطقس التي تم إرجاعها بواسطة واجهة برمجة تطبيقات بلا خادم.

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

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

1. إنشاء مستودع

تستخدم هذه المقالة مستودع قالب GitHub لتسهيل بدء تشغيل. يتميز القالب بتطبيق بداية يمكنك نشره في Azure Static Web Apps.

1. تأكد من تسجيل الدخول إلى GitHub وانتقل إلى الموقع التالي لإنشاء مستودع جديد: https://github.com/staticwebdev/blazor-starter/generate
2. تسمية مستودعك my-first-static-blazor-app.

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

الآن وقد تم إنشاء المستودع، قم بإنشاء تطبيق ويب ثابت من مدخل Microsoft Azure.

1. انتقل إلى مدخل Microsoft Azure.

2. حدد ⁧⁩Create a resource⁧⁩.

3. البحث عن Static Web Apps.

4. حدد Static Web App.

5. حدد Create.

6. في علامة التبويب Basics، أدخل القيم التالية.

   الخاصية	القيمة
   الاشتراك	اسم اشتراك Azure خاصتك.
   مجموعة الموارد	my-blazor-group
   الاسم	my-first-static-blazor-app
   ⁧⁩نوع الخطة⁧⁩	مجاني
   “Region for Azure Functions API and staging environments”	حدد أقرب منطقة إليك.
   المصدر	GitHub

7. حدد تسجيل الدخول باستخدام GitHub والمصادقة باستخدام GitHub، إذا تمت مطالبتك.

8. أدخل قيم GitHub التالية.

   الخاصية	القيمة
   ⁧⁩المؤسسة⁧⁩	حدد مؤسسة GitHub المطلوبة.
   ⁧⁩المستودع⁧⁩	حدد my-first-static-blazor-app.
   ⁧⁩الفرع⁧⁩	حدد ⁧⁩"main"⁧⁩.

   ملاحظة

   إذا كنت لا ترى أي مستودعات، فقد تحتاج إلى تخويل Azure Static Web Apps على GitHub. ثم استعرض للوصول إلى مستودع GitHub وانتقل إلى Settings > Applications > Authorized OAuth Apps، وحدد Azure Static Web Apps، ثم حدد Grant. بالنسبة لمستودعات المؤسسة، يجب أن تكون مالكًا للمؤسسة لمنح الأذونات.

9. في قسم Build Details ، حدد Blazor من القائمة المنسدلة Build Presets ويتم ملء القيم التالية.

   الخاصية	القيمة	الوصف
   موقع التطبيق	العمیل	مجلد يحتوي على تطبيق Blazor WebAssembly
   موقع واجهة برمجة التطبيقات	Api	مجلد يحتوي على تطبيق Azure Functions
   “Output location”	⁧⁩wwwroot⁧⁩	مجلد في إخراج البنية يحتوي على تطبيق Blazor WebAssembly المنشور

10. حدد Review + Create للتحقق من صحة التفاصيل.

11. حدد Create لبدء إنشاء تطبيق الويب الثابت وتوفير إجراءات GitHub للتوزيع.

12. بمجرد اكتمال التوزيع، حدد Go to resource.

13. حدد Go to resource.

3. عرض موقع الويب

هناك جانبان لنشر تطبيق ثابت. الأول منها يتضمن موارد Azure الأساسية التي تشكل التطبيق الخاص بك. والثاني هو سير عمل GitHub Actions الذي يقوم بإنشاء التطبيق الخاص بك ونشره.

قبل أن تتمكن من الانتقال إلى تطبيق الويب الثابت الجديد، يجب أن ينتهي تشغيل إصدار التوزيع أولا.

تعرض نافذة نظرة عامة على تطبيقات الويب الثابتة سلسلة من الارتباطات التي تساعدك على التفاعل مع تطبيق الويب الخاص بك.

1. حدد الشعار الذي يقول، انقر هنا للتحقق من حالة تشغيل GitHub Actions لمشاهدة GitHub Actions قيد التشغيل مقابل المستودع الخاص بك. بمجرد التحقق من اكتمال مهمة النشر، يمكنك الانتقال إلى موقع الويب الخاص بك عبر عنوان URL الذي تم إنشاؤه.

   

2. بمجرد اكتمال سير عمل الإجراءات GitHub، يمكنك تحديد رابط URL لفتح موقع الويب في علامة تبويب جديدة.

   

4. فهم نظرة عامة على التطبيق

تشكل المشاريع التالية معا الأجزاء المطلوبة لإنشاء تطبيق Blazor WebAssembly يعمل في المستعرض المدعوم من الواجهة الخلفية لواجهة برمجة تطبيقات Azure Functions.

مشروع Visual Studio	الوصف
Api	ينفذ تطبيق C# Azure Functions نقطة نهاية واجهة برمجة التطبيقات التي توفر معلومات الطقس لتطبيق Blazor WebAssembly. WeatherForecastFunction يرجع صفيفًا من كائنات WeatherForecast.
العمیل	مشروع Blazor WebAssembly للواجهة الأمامية. يتم تنفيذ مسار احتياطي لضمان عمل التوجيه من جانب العميل.
مُشترك	يحتفظ بالفئات الشائعة المشار إليها بواسطة كل من مشاريع واجهة برمجة التطبيقات والعميل، والتي تسمح للبيانات بالتدفق من نقطة نهاية واجهة برمجة التطبيقات إلى تطبيق الويب الأمامي. الفئة WeatherForecast تتم مشاركتها بين كلا التطبيقين.

تطبيق الويب الثابت Blazor

مسار احتياطي

يعرض التطبيق عناوين URL مثل /counter و /fetchdata، والتي تعين مسارات محددة للتطبيق. نظرا لأن هذا التطبيق يتم تنفيذه كصفحة واحدة، يتم تقديم index.html الملف لكل مسار. للتأكد من أن طلبات إرجاع index.htmlأي مسار ، يتم تنفيذ مسار احتياطي في staticwebapp.config.json الملف الموجود في المجلد الجذر لمشروع العميل.

{
  "navigationFallback": {
    "rewrite": "/index.html"
  }
}

يضمن تكوين JSON أن الطلبات إلى أي مسار في التطبيق ترجع index.html الصفحة.

تنظيف الموارد

إذا كنت لن تستخدم هذا التطبيق، يمكنك حذف مثيل Azure Static Web Apps من خلال الخطوات التالية:

1. قم بفتح ⁧⁩مدخل Azure⁧⁩.
2. ابحث عن my-blazor-group من شريط البحث العلوي.
3. حدد اسم المجموعة.
4. حدد⁧⁩حذف⁧⁩.
5. حدد Yes لتأكيد حذف المورد.

الخطوات التالية

المصادقة والتفويض

المقالات ذات الصلة

• إعداد المصادقة والتخويل
• تكوين إعدادات التطبيق
• تمكين المراقبة
• Azure CLI