تخطيط تطبيق Static Web App الخاص بك من Azure

  • 5 دقائق

هدفك المطلق هو استضافة التطبيق الخاص بك في Azure. تراعي Azure Static Web Apps توفير جميع موارد Azure الضرورية لك.

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

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

تطبيقات الويب الثابتة Azure

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

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

توصيل مثيل تطبيقات Static Web Apps بـ GitHub

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

كما تحتاج أيضًا إلى تحديد مجلد ذي ثلاثة مسارات داخل المستودع حتى يمكن إنشاء التطبيق ونشره تلقائيًا:

‏‏الموقع مثال على الموقع الوصف مطلوب
موقع التطبيق / موقع رمز المصدر لتطبيق الويب نعم
موقع مخرجات بنية التطبيق dist موقع مخرجات بنية التطبيق، نسبةً إلى موقع التطبيق لا
موقع واجهة برمجة التطبيقات api موقع رمز المصدر لواجهة برمجة التطبيقات لا

إن App artifact location هو مسار نسبي إلى دليل مخرجات بنية التطبيق الخاصة بالتطبيق. على سبيل المثال، اعتبر أن لدينا تطبيقًا على my-app، والذي يخرج أصول إنشائه في مجلد my-app/dist. في هذه الحالة، يمكنك تحديد dist لهذا الموقع.

من رمز المصدر إلى الأصول الثابتة مع GitHub Actions

يحتوي مستودع GitHub على التعليمة البرمجية المصدر، لذا يجب بناؤه قبل نشره.

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

تتم إضافة GitHub Action إلى المستودع في المجلد ⁧⁩.github/workflows.⁧⁩ يمكنك مراجعة أو تعديل هذا الملف كما يتطلب. يتم تخزين الإعدادات التي تقوم بإدخالها عند إنشاء المورد في ملف GitHub Action.

واجهة برمجة التطبيقات المتكاملة مع Azure Functions

إذا كان تطبيقك يتطلب API، فإنه يمكنك تنفيذه كمشروع Azure Functions في مستودعك. سيتم نشر API تلقائيًا وستتم استضافته بواسطة مثيل Static Web Apps. سير عمل GitHub Actions الذي يقوم بإنشاء ونشر تطبيقك يحدد موقع واجهة برمجة التطبيقات داخل المستودع باسم المجلد الذي تحدده.

عادةً ما تضع تطبيق API في مجلد يسمى API أو وظائف، ولكن يمكنك تسميته بما تفضله.

ماذا لو ليست لديك واجهة برمجة التطبيقات؟ لا تخف. إذا تعذر على Azure Static Web Apps العثور على واجهة برمجة تطبيقات في المجلد الذي أشرت إليه، فلن تنشر واجهة برمجة تطبيقات، لكنها ستستمر في نشر تطبيقك.

معالجة المسارات الاحتياطية

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

تدعم تطبيقات Azure Static Web Apps قواعد التحويل المخصصة والمعرَّفة في ملف staticwebapp.config.json الاختياري الواقع في مجلد مخرجات بنية التطبيق.

يمكنك تكوين تطبيقك لاستخدام القواعد التي تنفذ مسارًا احتياطيًا كما هو موضح في المثال التالي الذي يستخدم حرف بدل للمسار باستخدام تصفية الملفات:

{
  "navigationFallback": {
    "rewrite": "index.html",
    "exclude": ["/images/*.{png,jpg,gif,ico}", "/*.{css,scss,js}"]
  }
}

تخبر هذه القاعدة Azure Static Web Apps بتقديم index.html في حال عدم العثور على طلب لمورد، باستثناء الصور وملفات CSS الموضحة في تعبير exclude.

موقع الملف للمسار

تتوقع Azure Static Web Apps أن يكون ملفك staticwebapp.config.json واقعًا في output_location بشكلٍ افتراضي. إذا كانت عملية البناء تنسخ ملف staticwebapp.config.json إلى output_location، فلا يوجد شيء آخر يمكنك القيام به.

يوجد ملف staticwebapp.config.json لتطبيقك في المجلد angular-app/src/assets

يوجد ملف staticwebapp.config.json في مجلد react-app

يوجد ملف staticwebapp.config.json في مجلد react-app/public

يوجد ملف staticwebapp.config.json في مجلد vue-app/public

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

فما الذي تحتاجه لتتمكن من نشر تطبيق الويب الخاص بك إلى Azure Static Web Apps؟ كل ما تحتاجه هو وجود تطبيقك في مستودع GitHub الخاص بك.

اختبر معلوماتك

1.

ما هو القسم من ملف staticwebapp.config.js الذي قد تود وضعه في المسار الاحتياطي؟