البناء والنشر على Azure Static Web Apps

مكتمل

حتى هذه النقطة، ركزنا على تأليف تطبيق Gatsby الخاص بنا باستخدام React وGraphQL والمكونات الإضافية. تتمثل الخطوة التالية، بعد الانتهاء من التأليف، في بناء التطبيق. بعد ذلك، ستكون قادراً على التوزيع على أي خادم ويب أو خدمة استضافة يمكنها تقديم الملفات الثابتة.

بناء تطبيقك

توفر أداة سطر الأوامر في Gatsby أمرًا لبناء مشروعك لإنشاء شيء يمكنك نشره في أي مكان تريد. تتكون البنية من HTML وJavaScript وCSS وأي أصول إضافية قمت بتضمينها.

إنشاء البنية

يقوم Gatsby بتشغيل المحول البرمجي React تحته مباشرة، وبذلك عندما يعد البنية - فهو يقوم بالعديد من الأمور. فهو يحول رمز React برمجيًا عن طريق ترجمة JSX إلى JavaScript وHTML. كما أنه يستخرج جميع تعليمات JavaScript البرمجية، ويضعها في حزمة من المجموعات. ثم يتم تحسين كل مجموعة، بمعنى أن تتم إزالة المسافة البيضاء، وإعادة تسمية المتغيرات، وتحسين التعبيرات بشكل عام من أجل السرعة. وتمر الأنماط بعملية مماثلة. إذا اخترت مكتبة مثل LESS، أو SCSS، أو Stylus من أجل CSS الخاص بك، ستكون هناك خطوة أولية يتم خلالها التحويل البرمجي لـ CSS لديك من لغة عالية المستوى إلى CSS. لا توجد أية إجراءات إضافية مطلوبة لنشر الملفات في هذه المرحلة. إنها مجرد مجموعة من الملفات الثابتة التي يمكن استضافتها بواسطة أي خادم ويب يمكنه تقديم الملفات.

توزيع البنية

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

Azure Static Web Apps

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

وبالحديث عن البناء، فإن الخدمة تقوم فعلاً بخطوة البناء من أجلك، ولذلك ليس هناك حاجة لبناء أي شيء مقدمًا. وتقوم بذلك عن طريق تحديد موقع الأمر build في package.json في مشروع Gatsby. كل ما عليك القيام به هو وضع مشروعك في مستودع GitHub.

في الوقت الحالي، توجد التعليمات البرمجية الخاصة بك داخل دليل ما على جهازك، لذا ستحتاج إلى القيام ببعض الخطوات لتوزيع Azure:

  1. إنشاء مستودع GitHub والدفع إليه: يقوم Gatsby بإنشاء مستودع Git من أجلك، والذي يجب دفعه إلى GitHub.

  2. إنشاء مثيل Azure Static Web Apps: عند قيامك باستخدام مدخل Azure لإنشاء مثيل Azure Static Web Apps، فسوف توفر عنوان URL إلى مستودع GitHub واسم الدليل الفرعي حيث توجد الملفات الثابتة في مشروعك. في حالة Gatsby، يسمى هذا الدليل public/.