مقدمة

  • 4 دقائق

السيناريو

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

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

يمكنك نشر أصول الويب في التخزين السحابي، وإنشاء وتعيين شهادة SSL، وإنشاء API على خادم سحابي، وإنشاء وكيل عكسي يسمح لتطبيقك بإجراء استدعاءات إلى API، وتوزيع التطبيق عالميًا، وإعداد عملية CI/CD.

عند استخدام Azure Static Web Apps، فإنك تحصل على كل هذه الميزات بشكل جاهز.

ما هي تطبيقات 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 عبارة عن أن تحصل بالضبط على ما تحتاجه، لا أكثر، ولا أقل.

Screenshot showing the Static Apps overview.

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

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

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

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

في تمارين هذه الوحدة، ستقوم بنشر تطبيق باستخدام إطار عمل الويب المفضل لديك.

إشعار

ستنشر تطبيقًا دون واجهة برمجة تطبيقات في هذه الوحدة. راجع قسم «Next steps» في الوحدة النهائية للحصول على معلومات حول الوحدة التالية، حيث سيتم توزيع واجهة برمجة تطبيقات بجانب تطبيقك.

الميزات الرئيسية

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

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

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

اختر مسارك

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

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

├ angular-app  👈 The Angular client app
├ react-app    👈 The React client app
├ svelte-app   👈 The Svelte client app
└ vue-app      👈 The Vue client app

ما ستفعله

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

  • بناء وتشغيل التطبيق الأمامي.
  • تنشئ وتنشر تطبيق الويب تلقائيًا إلى Azure من مستودع GitHub باستخدام GitHub Actions.
  • وأخيرًا، ستستكشف وتطلق التطبيق الخاص بك، كما يلي.

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.