التمرين - إنشاء تطبيق Static Web App من Azure

  • 5 دقائق

في هذا التمرين، ستقوم بإنشاء مثيل Azure Static Web Apps بما في ذلك GitHub Action التي ستقوم تلقائيًا بإنشاء التطبيق الخاص بك ونشره.

إنشاء تطبيق ويب ثابت

الآن بعد إنشاء مستودع GitHub الخاص بك، يمكنك إنشاء مثيل Static Web Apps من مدخل Microsoft Azure.

تستخدم هذه الوحدة بيئة الاختبار المعزولة من Azure لتزويدك باشتراك مجاني مؤقت في Azure يمكنك استخدامه لإكمال التمرين. قبل المتابعة، تأكد من تنشيط بيئة الاختبار المعزولة في أعلى هذه الصفحة.

  1. سجّل الدخول إلى ⁧⁩مدخل Microsoft Azure⁧⁩، مع التأكد من استخدام نفس الحساب لتسجيل الدخول كما فعلت أنت لتنشيط بيئة الاختبار المعزولة.

  2. في الصفحة الرئيسية لـ Azure، ضمن Azure services، حدد Create a resource. يظهر جزء Create a resource.

  3. في صندوق البحث “Marketplace”، ابحث ثم حدد “Static Web App”. سيظهر جزء “Static Web App”.

  4. حدد Create. ظهور جزء إنشاء تطبيق ويب ثابت. بعد ذلك، قم بتكوين تطبيقك الجديد وربطه بمستودع “GitHub” الخاص بك.

  5. في علامة التبويب «Basics»، أدخل القِيم التالية لكل إعداد.

    الإعداد القيمة
    تفاصيل المشروع
    الاشتراك اشتراك Concierge
    مجموعة الموارد ⁧⁩[اسم مجموعة موارد بيئة الاختبار المعزولة]⁧⁩
    Static Web App details
    الاسم قم بتسمية تطبيقك. الأحرف الصالحة هي ⁧a-z⁩ (غير حساسة لحالة الأحرف)، و⁧0-9⁩، و⁧-⁩.
    خطة الاستضافة
    طبقة التسعير للتطبيق الخاص بك حدد مجاني
    Azure Functions and staging details
    “Region for Azure Functions API and staging environments” اختر أقرب منطقة إليك
    “Deployment details”
    المصدر حدد GitHub
    حساب GitHub حدد تسجيل الدخول بواسطة “GitHub”. ثم سيظهر جزء "Authorize Azure Static Web Apps". حدد “Authorize Azure-App-Service-Static-Web-Apps”. أدخل كلمة مرورك.
    المؤسسة حدد المؤسسة التي أنشأت فيها المستودع
    المستودع ⁧⁩my-static-blazor-app⁧⁩
    الفرع ⁧⁩رئيسي⁧⁩
    “Build Details”
    أنشيء إعدادات مسبقة Blazor
    موقع التطبيق العمیل
    “Api location” Api
    “Output location” wwwroot

  6. حدد «استعراض + إنشاء»>و«إنشاء».

  7. بعد اكتمال التوزيع، حدد ⁧⁩Go to resource⁧⁩. سيظهر جزء “Static Web App”.

مراجعة GitHub Action

في هذه المرحلة، أُنشئ مثيل تطبيقات الويب الثابتة في Azure، لكن تطبيقك لم يُنشر بعد. سيتم تشغيل GitHub Action الذي ينشئه Azure في المستودع تلقائيًا لتشغيل أول بنية للتطبيق الخاص بك ونشره، ولكن يستغرق الأمر بضع دقائق للانتهاء منه.

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

Browse to see the progress of the GitHub Actions workflow.

بمجرد وصولك هناك:

  1. حدد «Azure Static Web Apps CI/CD».

  2. حدد التثبيت الذي بعنوان، ci: أضف ملف سير عمل Azure Static Web Apps.

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

من هنا، يمكنك ملاحظة تقدم إنشاء تطبيقك.

عرض موقع الويب

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

حدد رابط URL في مدخل Microsoft Azure لزيارة تطبيقك في المستعرض.

Azure Static Web Apps overview page..

أصبح تطبيقك الآن متاحًا عالميًا، ولكنه لا يزال عالقًا على حالة“Loading data” نظرًا إلى عدم وجود بيانات أو “API”. ستتمكن من إضافة واجهة برمجة التطبيقات لتطبيق الويب في القسم التالي.

تهانينا! لقد نشرت تطبيقك الأول في Azure Static Web Apps!

ملاحظة

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

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

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