السابق

التالي

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

مكتمل

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

سحب أحدث رمز

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

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

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

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

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

إنشاء قاعدة التحويل

قبل نشر تطبيقك، ستنشئ قاعدة التحويل متضمنة مسارًا احتياطيًا.

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

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

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

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 Action الخاص بك كما أنه ينشيء وينشر تطبيق الويب الخاص بك وواجهة برمجة التطبيقات.

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

متابعة