مقدمة

  • 2 دقائق

تُطلق شركتك تطبيق ويب خاصاً بقائمة التسوق. يمكن للعملاء إضافة سلع من قائمتهم وتعديلها وعرضها وإزالتها، من خلال الموقع.

أثناء إنشاء التطبيق، تتمثّل مخاوفك الأولى في أن تطبيقك وواجهة برمجة التطبيقات تُستضاف بشكل آمن، ومتوفرة عالمياً وتُنشر تلقائياً. بدلاً من إنشاء خادم ويب للتعامل مع كل هذه المخاوف، قررت استخدام حل استضافة يخدم أصولك وواجهة برمجة التطبيقات بسهولة، دون إجراء الكثير من الإعداد أو التكوين.

ما Azure Static Web Apps؟

تحل Azure Static Web Apps المشكلات الصعبة على طول الطريق من التعليمات البرمجية المصدر إلى التوفر العالمي.

أثناء تركيزك على تطوير تطبيقك، تعمل Azure Static Web Apps تلقائيًا على إنشائها واستضافتها من GitHub أو Azure DevOps.

عادةً ما يتم إنشاء تطبيقات الويب الثابتة باستخدام مكتبات وأطر عمل مثل Angular أو React أو Svelte أو Vue. تتضمن هذه التطبيقات أصول HTML وCSS وJavaScript والصور التي تُشكل التطبيق. عند استخدام تصميم خادم ويب تقليدي، تعمل هذه الملفات من خادم واحد إلى جنب أي نقاط نهاية مطلوبة لواجهة برمجة التطبيقات.

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

يمنحك نموذج Azure Static Web Apps ما تحتاجه بالضبط لا أكثر ولا أقل.

Static Apps overview.

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

تستضيف Azure تطبيق الويب الخاص بك وتخدمه. تعمل Azure Functions على تشغيل وظيفة واجهة برمجة التطبيقات الخلفية، والتي توفر زيادة الحجم وتقليله تلقائياً بناءً على الطلب.

واجهات برمجة التطبيقات الاختيارية

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

تستضيف Azure تطبيق الويب الخاص بك وتخدمه بينما تعمل Azure Functions على تشغيل وظيفة واجهة برمجة التطبيقات في الخلفية، والتي توفر زيادة الحجم وتقليله تلقائياً بناءً على الطلب.

الميزات الأساسية

  • تُقرب استضافة الويب الموزعة عالمياً المحتوى الثابت مثل HTML وCSS وJavaScript والصور إلى المستخدمين
  • دعم واجهة برمجة تطبيقات المتكاملة المقدم من Azure Functions
  • تكامل GitHub وAzure DevOps من الدرجة الأولى حيث تعمل تغييرات المستودع على إطلاق عمليات الإنشاء والتوزيع.
  • شهادات SSL مجانية، تُجدد تلقائياً
  • معاينة عناوين URL الفريدة لمعاينة طلبات السحب

الأهداف التعليمية

في هذه الوحدة، ستقوم بإنشاء وتعديل وتوزيع تطبيق ويب وAPI على Azure Static Web Apps.

اختر مسارك

توفر هذه الوحدة أربعة أشكال مختلفة من نموذج التطبيق لتختار من بينها: وهي Angular وReact وSvelte وVue. تكمن قوة Azure Static Web Apps في أن كل هذه الأنواع "تؤدي الغرض تماماً".

تشتمل التعليمة البرمجية للبدء على التطبيقات الأربعة ونقطة البداية لواجهة برمجة التطبيقات التي ستستخدمها.

├ angular-app  👈 The Angular client app
├ api-starter  👈 The API starter app. You'll use this later
├ react-app    👈 The React client app
├ svelte-app   👈 The Svelte client app
└ vue-app      👈 The Vue client app

ماذا ستفعل

بمجرد اختيار تطبيق عميلك، ستقوم بما يلي:

  1. إنشاء تطبيق الويب ونشره تلقائياً في Azure من مستودع GitHub باستخدام GitHub Actions
  2. إنشاء واجهة برمجة التطبيقات الخاصة بك باستخدام Azure Functions
  3. تعديل تطبيق الويب الخاص بك لعمل طلبات HTTP لواجهة برمجة التطبيقات الخاصة بك
  4. إنشاء تطبيق الويب ونشره تلقائياً في Azure من مستودع GitHub باستخدام GitHub Actions
  5. وأخيرًا، ستستكشف وتطلق التطبيق الخاص بك، كما هو موضح أدناه

A screenshot illustrating the angular sample application.

A screenshot illustrating the react sample application.

A screenshot illustrating the svelte sample application.

A screenshot illustrating the vue sample application.

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

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