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

  • 5 دقائق

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

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

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

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

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

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

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

  4. حدد إنشاء. ظهور جزء إنشاء تطبيق ويب ثابت. بعد ذلك، قم بتكوين تطبيقك الجديد وربطه بمستودع “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”
    Source حدد GitHub
    حساب GitHub حدد تسجيل الدخول بواسطة “GitHub”. ثم سيظهر جزء "Authorize Azure Static Web Apps". حدد “Authorize Azure-App-Service-Static-Web-Apps”. ‏‏أدخل كلمة المرور.
    مؤسسة حدد المؤسسة التي أنشأت فيها المستودع
    المستودع my-static-blazor-app
    فرع أساسي
    تفاصيل الإصدار
    أنشيء إعدادات مسبقة Blazor
    موقع التطبيق العميل
    “Api location” Api
    “Output location” wwwroot

  6. اختر إنشاء>مراجعة + إنشاء.

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

مراجعة GitHub Action

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

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

Screenshot showing how to 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 لزيارة تطبيقك في المستعرض.

Screenshot of the Azure Static Web Apps overview page.

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

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

إشعار

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

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

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