تمرين - البناء والنشر على 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.

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

Our built app.

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

عند الانتقال إلى الدليل 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 وسجل الدخول. يجب أن تكون الآن على URL مثل هذا https://github.com/<your username>?tab=repositories

  2. انقر الآن على الزر new كما هو موضح أدناه:

    Create new GitHub repo.

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

    GitHub naming.

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

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

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

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

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

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

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

الأساسيات

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

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

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

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

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

  3. انقر فوق الزر ⁧⁩⁩Sign-in with GitHub⁦⁧ وقم بالمصادقة باستخدام GitHub

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

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

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

    الإعداد القيمة
    موقع التطبيق اترك الإعداد الافتراضي
    موقع واجهة برمجة التطبيقات اترك الإعداد الافتراضي
    “Output location” عام

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

Click review + create

Review + create

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

  1. انقر فوق الزر ⁧⁩Create⁧⁩

    Click create button.

  2. بمجرد اكتمال التوزيع، انقر فوق الزر ⁧⁩Go to resource⁧⁩

    Go to resource.

مراجعة إجراء GitHub

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

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

Browser to see the progress of the GitHub Action.

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

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

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

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

Screenshot that shows the published app in the browser.

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

ملاحظة

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

لقد نجحت! لقد قمت بنشر تطبيق Gatsby الخاص بك على السحابة.