نشر موقع Gatsby إلى Azure Static Web Apps

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

في هذا البرنامج التعليمي، تتعلم كيفية:

• إنشاء تطبيق Gatsby
• قم بإعداد موقع Azure Static Web Apps Azure
• نشر تطبيق Gatsby لـ Azure

إذا لم يكن لديك اشتراك في Azure، فأنشئ حساب Azure مجاني قبل أن تبدأ.

المتطلبات الأساسية

• حساب Azure مع اشتراك نشط. إذا لم يكن لديك حساب، يمكنك إنشاء حساب مجانًا.
• حساب GitHub. إذا لم يكن لديك حساب، يمكنك إنشاء حساب مجانًا.
• تم تثبيت إعداد Git. إذا لم يكن لديك واحد، يمكنك تثبيت Git.
• Node.JS مثبت.

قم بإنشاء تطبيق Gatsby

قم بإنشاء تطبيق Gatsby باستخدام واجهة سطر الأوامر Gatsby (CLI):

1. قم بفتح محطة طرفية

2. استخدم أداة npx لإنشاء تطبيق جديد باستخدام Gatsby CLI. قد تستغرق بضع دقائق.

   npx gatsby new static-web-app
   

3. انتقل إلى التطبيق الذي تم إنشاؤه حديثا

   cd static-web-app
   

4. قم بتهيئة مستودع Git

   git init
   git add -A
   git commit -m "initial commit"
   

إشعار

إذا كنت تستخدم أحدث إصدار من Gatsby، فقد تحتاج إلى تعديل package.json لتضمين "محركات": { "node": ">=18.0.0" }،

ادفع تطبيقك إلى GitHub

تحتاج إلى وجود مستودع على GitHub لإنشاء مورد جديد لـAzure Static Web Apps.

1. إنشاء مستودع GitHub فارغ (لا تنشئ README) من https://github.com/new gatsby-static-web-app المسمى.

2. بعد ذلك، أضف مستودع GitHub الذي أنشأته للتو كجهاز تحكم عن بعد إلى المستودع المحلي الخاص بك. تأكد من إضافة اسم مستخدم GitHub بدلاً من العنصر النائب <YOUR_USER_NAME> في الأمر التالي.

   git remote add origin https://github.com/<YOUR_USER_NAME>/gatsby-static-web-app
   

3. ادفع مستودعك المحلي إلى GitHub.

   git push --set-upstream origin main
   

قم بنشر تطبيق الويب الخاص بك

توضح لك الخطوات التالية كيفية إنشاء تطبيق موقع ثابت جديد ونشره في بيئة إنتاج.

قم بإنشاء التطبيق

1. انتقل إلى مدخل Azure

2. حدد إنشاء مورد

3. البحث عن Static Web Apps

4. حدد تطبيقات الويب الثابتة

5. حدد إنشاء.

6. في علامة التبويب Basics، أدخل القيم التالية.

   الخاصية	القيمة
   الاشتراك	اسم اشتراك Azure خاصتك.
   مجموعة الموارد	my-gatsby-group
   الاسم	my-gatsby-app
   نوع الخطة	الحره
   المنطقة ل Azure Functions API والبيئات المرحلية	حدد أقرب منطقة إليك.
   Source	GitHub

7. حدد Sign in with GitHub ثم قم بالمصادقة باستخدام GitHub.

8. أدخل قيم GitHub التالية.

   الخاصية	القيمة
   المنظمة	حدد مؤسسة GitHub المطلوبة.
   المستودع	حدد gatsby-static-web-app.
   الفرع	حدد "main".

   إشعار

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

9. في قسم Build Details ، حدد Gatsby من القائمة المنسدلة Build Presets واحتفظ بالقيم الافتراضية.

المراجعة والإنشاء

1. حدد Review + Create للتحقق من صحة التفاصيل.

2. حدد Create لبدء إنشاء App Service Static Web App وتوفير GitHub Actions للنشر.

3. بمجرد اكتمال النشر، حدد Go to resource.

4. في شاشة المورد، حدد رابط URL لفتح التطبيق المنشور. قد تحتاج إلى الانتظار دقيقة أو دقيقتين حتى تكتمل إجراءات GitHub.

   

تنظيف الموارد

إذا كنت لن تستمر في استخدام هذا التطبيق، يمكنك حذف مورد تطبيق Azure Static Web من خلال الخطوات التالية:

1. في علامة تبويب جديدة، افتح مدخل Azure
2. في شريط البحث العلوي، ابحث عن تطبيقك بالاسم الذي قدمته سابقًا
3. انقر فوق التطبيق
4. انقر فوق الزر حذف
5. انقر فوق نعم لتأكيد إجراء الحذف

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

إضافة مجال مخصص