نشر واجهة برمجة التطبيقات باستخدام GitHub Actions

  • 3 دقائق

أضفت واجهة برمجة التطبيقات الخاصة بك إلى تطبيق الويب الخاص بك وكلاهما يعمل محلياً. حان الوقت الآن لنشر واجهة برمجة التطبيقات والتطبيق الخاص بك على Azure Static Web Apps.

عندما أنشأت مثيل تطبيقات الويب الثابتة من Azure وطلبت منه مشاهدة فرعك الرئيسي، أُنشئَ إجراء GitHub لك. يستمع إجراء GitHub لعمليات التثبيت ويسحب الطلبات إلى الفرع الرئيسي لمستودعك. ثم عندما يكتشف إجراء GitHub هذه التغييرات، فإنه ينشئ تطبيقك وينشره.

قد تتذكر عندما أنشأت مورد تطبيقات الويب الثابتة من Azure الذي جعلك توفر موقع المجلد لواجهة برمجة التطبيقات الخاصة بك. وفرت القيمة الافتراضية لـ api. ولكن، نظراً لعدم وجود واجهة برمجة تطبيقات في مجلد api في ذلك الوقت، لم تحاول Azure Static Web Apps نشر واجهة برمجة تطبيقات.

تغيرَ كل شيء الآن.

تكوين GitHub Action

يحتوي المجلد .github/workflows على ملف إجراء GitHub الخاص بك. يحتوي الملف على الإعدادات الخاصة بمواقع تطبيق الويب وواجهة برمجة التطبيقات وأدوات الإنشاء الخاصة بك. المواقع التي اخترتها عند إنشاء مورد تطبيقات الويب الثابتة من Azure موجودة الآن في هذا الملف، كما هو موضح أدناه:

app_location: 'angular-app' # App source code path
api_location: 'api' # Api source code path - optional
output_location: 'dist/angular-app' # Built app content directory - optional

app_location: 'react-app' # App source code path
api_location: 'api' # Api source code path - optional
output_location: 'build' # Built app content directory - optional

app_location: 'svelte-app' # App source code path
api_location: 'api' # Api source code path - optional
output_location: 'public' # Built app content directory - optional

app_location: 'vue-app' # App source code path
api_location: 'api' # Api source code path - optional
output_location: 'dist' # Built app content directory - optional

api_location عُينت على القيمة الصحيحة لتُشير إلى واجهة برمجة التطبيقات في مجلد api الخاص بك.

تشغيل إجراء GitHub

إجراء GitHub مستعد لإنشاء تطبيق الويب وواجهة برمجة التطبيقات الخاصة بك ونشرها بمجرد اكتشاف تغيير في فرعك الرئيسي. يمكنك إما التثبيت مباشرة وإما إنشاء طلب سحب إلى الفرع الرئيسي. سيؤدي كلاهما إلى تشغيل إجراء GitHub. ستؤدي التغييرات التي اكتُشفت في الفرع الرئيسي إلى تشغيل إجراء GitHub لنشر التطبيق على عنوان URL نفسه لموقع الويب المباشر الخاص بك.

معاينة عناوين URL

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

يوضح الجدول التالي كيف تنشر Azure Static Web Apps تطبيقك على عناوين URL مختلفة. يُنشر تطبيقك على عنوان URL واحد بينما يُنشر طلب السحب إلى الفرع نفسه على عنوان URL آخر.

المصدر الوصف عنوان URL
الفرع الرئيسي عنوان URL لموقع الويب المباشر https://purple-rain-062d03304.azurestaticapps.net/
طلب السحب رقم 5 معاينة عنوان URL https://purple-rain-062d03304-5.azurestaticapps.net/

تعمل حالياً في فرع api. ستقدم طلب سحب من فرع api الخاص بك إلى الفرع الرئيسي. عند إنشاء طلب السحب مقابل الفرع الرئيسي، ينشر إجراء GitHub التطبيق لمعاينة عنوان URL.

بمجرد انتهاء سير العمل من إنشاء تطبيقك ونشره، يُضيف روبوت GitHub تعليقاً على طلب السحب الخاص بك، والذي يحتوي على عنوان URL لبيئة ما قبل الإنتاج. يمكنك النقر فوق هذا الارتباط لرؤية تغييراتك المرحلية.

بعد ذلك، ستُنشئ طلب سحب وتزور الإصدار المرحلي من تطبيقك.