تمرين - البناء والنشر على Azure Static Web Apps

  • 5 دقائق

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

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

بناء موقعك

عندما يتعلق الأمر ببناء موقعك وجعله جاهزًا للتوزيع، يتولى Gatsby إتمام الأعمال الشاقة بالنيابة عنا.

قم بتشغيل الأمر التالي من دليل المشروع لديك:

gatsby build

سيقوم هذا الأمر بإنشاء إصدار إنتاج. ستنتهي جميع ملفاتك في دليل public/فرعي .

بمجرد انتهاء العملية من البناء، يمكنك الانتقال إلى الدليل public/ الخاص بك وفتح الملفات في أي مستعرض. يمكنك استكشاف البنية الخاصة بك حيث ستتم استضافتها في الويب باستخدام http-server، وهي أداة سطر أوامر تقدم الملفات المحلية عبر HTTP حتى تتمكن من رؤيتها في أي مستعرض.

الآن ستستضيف التطبيق بأكمله من خادم ويب محلي. cd في المحطة الطرفية الخاصة بك إلى public/ الدليل واكتب الأمر التالي:

npx http-server -p 5000

استعرض إلى http://localhost:5000.

يجب أن تشاهد الآن المحتوى التالي معروضًا:

Screenshot showing your built app.

لقد بنيت موقعك وحولته من تطبيق Gatsby إلى مجموعة من الصفحات الثابتة التي تحتوي فقط على HTML وCSS وJavaScript!

من VS Code، انتقل إلى الدليل الخاص بك public/ ، وحدد موقع المكون المعروض about في public/about/index.html. بسبب عملية التحسين، تمت إزالة كافة المسافات البيضاء ويتم تمثيل الصفحة كخط واحد طويل. ومع ذلك، يجب أن تكون قادرا على تحديد موقع العنوان والوصف المعروضين ويجب أن يبدو كما يلي:

// excerpt from about/index.html

<h2>Gatsby Default Starter</h2><div>Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.</div>

دفع تعليماتك البرمجية إلى GitHub

لإعداد التطبيق للتوزيع، يجب اتخاذ الخطوات التالية:

  1. تهيئة مستودع Git.
  2. إنشاء مستودع GitHub ودفع مستودع Git المحلي إليه.

إضافة الصفحة حول

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

git add .
git commit -m "adding About page to site"

إنشاء مستودع GitHub ودفع التعليمات البرمجية

  1. انتقل إلى GitHub وسجل الدخول.

  2. انتقل إلى صفحة المستودعات.

    Screenshot of the repository button in GitHub.

  3. انقر الآن فوق الزر الجديد كما هو موضح أدناه:

    Screenshot of the create a new GitHub repo button.

  4. قم بتسمية المستودع gatsby-app وانقر فوق create repository كما هو موضح أدناه:

    Screenshot showing how to name GitHub repository.

  5. وأخيرًا، أضف مستودع GitHub الخاص بك كبعيد وادفع. اكتب الأوامر التالية لإنجاز ذلك (استبدل الجزء <user> باسم مستخدم GitHub الخاص بك):

    git remote add origin https://github.com/<user>/gatsby-app.git
git push -u origin master

أنت الآن جاهز للنشر في Azure Static Web Apps!

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

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

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

  1. سجّل الدخول إلى مدخل Microsoft Azure، مع التأكد من استخدام نفس الحساب لتسجيل الدخول كما فعلت لتنشيط بيئة الاختبار المعزولة.
  2. في الشريط العلوي، ابحث عن "Static Web Apps".
  3. حدد "Static Web Apps".
  4. حدد إنشاء.

أساسيات

بعد ذلك، قم بتكوين تطبيقك الجديد وربطه بمستودع GitHub الخاص بك.

  1. إدخال تفاصيل المشروع

    الإعداد القيمة‬
    الاشتراك اشتراك Concierge
    مجموعة الموارد [اسم مجموعة موارد بيئة الاختبار المعزولة]

  2. إدخال تفاصيل تطبيقات الويب الثابتة

    الإعداد القيمة
    الاسم تسمية تطبيقك. الأحرف الصالحة هي a-z (غير حساسة لحالة الأحرف)، و0-9، و_.
    المنطقة حدد المنطقة الأقرب إليك
    SKU الحره

  3. إذا طلب منك ذلك، فانقر فوق زر تسجيل الدخول باستخدام GitHub وقم بالمصادقة باستخدام GitHub

  4. أدخل تفاصيل النشر

    الإعداد القيمة‬
    المنظمة حدد المؤسسة التي أنشأت فيها المستودع
    المستودع تطبيق gatsby
    الفرع الرئيسي أو الرئيسي

    إشعار

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

  5. استخدم القائمة المنسدلة تفاصيل البناء لتحديد Gatsby لتعبئة معلومات البناء.

    الإعداد القيمة‬
    موقع التطبيق اترك الإعداد الافتراضي
    موقع واجهة برمجة التطبيقات اترك الإعداد الافتراضي
    موقع الإخراج عام

  6. انقر فوق الزر "مراجعة + إنشاء"

    Screenshot showing the review and create button.

مراجعة + إنشاء

تابع لإنشاء التطبيق.

  1. انقر فوق الزر "إنشاء"

    Screenshot showing the click create button.

  2. بمجرد اكتمال التوزيع، انقر فوق الزر انتقال إلى المورد

    Screenshot showing the Go to resource button.

مراجعة GitHub Action

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

يمكنك التحقق من حالة إجراء البناء والنشر الخاص بك بالنقر فوق الارتباط الموضح أدناه:

Screenshot showing how to browse to see the progress of the GitHub Action.

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

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

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

Screenshot that shows the Azure portal with a link to the URL for the app.

إشعار

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

تهانينا! لقد نشرت أول تطبيق Gatsby على السحابة باستخدام Azure Static Web Apps.