السابق

التالي

تمرين - إنشاء الطرق الاحتياطية الخاصة بك

مكتمل

حان الآن وقت إنشاء مسار احتياطي حتى يتمكن المستخدمون من الانتقال إلى تطبيقك بنجاح.

سحب أحدث رمز

أضافت Azure Static Web Apps ملف سير عمل إجراءات GitHub Actions إلى الفرع الذي حددته في التمرين السابق. أولا، يمكنك الحصول على هذا الملف عن طريق سحب التعليمات البرمجية الخاصة بك من Git.

اسحب تغييرات الرمز من Git باتباع الخطوات التالية:

1. افتح حل ShoppingList في Visual Studio.

2. اسحب آخر التغييرات من GitHub.

   

يمكنك الآن مشاهدة ملف سير العمل في المجلد .github/workflows في Windows Explorer (الملف ليس جزءاً من حل Visual Studio).

إنشاء قاعدة توجيه

قبل نشر تطبيقك، يمكنك إنشاء قواعد توجيه تتضمن مسارا احتياطيا.

إنشاء الملف staticwebapp.config.json

إذا لم يكن لديك الملف “staticwebapp.config.js” بالفعل في مشروعك، يمكنك إنشاء واحدًا عبر الخطوات التالية:

1. في Visual Studio، انقر بزر الماوس الأيمن فوق المجلد wwwroot داخل مشروع العميل .

2. حدد Add -> New Item.

3. حدد “JSON File” من القوالب المتوفرة، وقم بتسميته “staticwebapp.config.json”، ثم اضغط على مفتاح “Enter”.

بمجرد إنشاء “staticwebapp.config.json”، قم بتحديثه ليشمل المسار الاحتياطي التالي:

{
  "navigationFallback": {
    "rewrite": "index.html",
    "exclude": ["/_framework/*", "/css/*"]
  }
}

انقل التغييرات إلى Git

الآن، احفظ التغييرات التي قمت بها ثم انقلها إلى “GitHub”. بعد ذلك، ادفع هذه التغييرات إلى “GitHub”.

جرب المسار الاحتياطي

يقوم سير عمل GitHub Actions بإنشاء تطبيقك ونشره.

انتقل إلى مستودعك في المتصفح ومشاهدة تقدم إجراء GitHub Action. اتبع هذه الخطوات التالية لعرض التقدم:

1. حدد قائمة “Actions”.

2. أسفل قائمة “Workflow”، انقر فوق عنصر سير عمل Azure Static Web Apps CI/CD.

3. حدد أحدث رابط (بالأعلى) في الإجراء الذي شُغلَ على اليمين.

4. انقر فوق رابط "Build and Deploy Job".

يمكنك رؤية تقدم إجراء GitHub الخاص بك أثناء إنشاء تطبيق الويب وواجهة برمجة التطبيقات ونشرها.

بعد إعادة نشر التطبيق، استعرض للوصول إليه. لاحظ أن عنوان URL يعرض /products. الآن قم بتحديث المتصفح عن طريق الضغط على F5 لاختبار المسار الاحتياطي الخاص بك. يجب إعادة تحميل التطبيق لديك بنجاح بفضل المسار الاحتياطي الخاص بك في قاعدة التحويل الخاصة بك!

متابعة