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

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

إشعار

للحصول على خطوات لنشر تطبيق Blazor عبر Visual Studio، راجع نشر تطبيق Blazor على Azure Static Web Apps.

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

• حساب 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. انتقل إلى مدخل Azure.

2. حدد Create a Resource.

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

4. حدد Static Web App.

5. حدد إنشاء.

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

   الخاصية	القيمة
   الاشتراك	اسم اشتراك Azure خاصتك.
   مجموعة الموارد	my-blazor-group
   الاسم	my-first-static-blazor-app
   نوع الخطة	خال
   المنطقة ل Azure Functions API والبيئات المرحلية	حدد أقرب منطقة إليك.
   Source	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. حدد الانتقال إلى المورد.

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