نشر موقع 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):
قم بفتح محطة طرفية
استخدم أداة npx لإنشاء تطبيق جديد باستخدام Gatsby CLI. قد تستغرق بضع دقائق.
npx gatsby new static-web-app
انتقل إلى التطبيق الذي تم إنشاؤه حديثا
cd static-web-app
قم بتهيئة مستودع Git
git init git add -A git commit -m "initial commit"
إشعار
إذا كنت تستخدم أحدث إصدار من Gatsby، فقد تحتاج إلى تعديل package.json لتضمين "محركات": { "node": ">=18.0.0" }،
ادفع تطبيقك إلى GitHub
تحتاج إلى وجود مستودع على GitHub لإنشاء مورد جديد لـAzure Static Web Apps.
إنشاء مستودع GitHub فارغ (لا تنشئ README) من https://github.com/new gatsby-static-web-app المسمى.
بعد ذلك، أضف مستودع GitHub الذي أنشأته للتو كجهاز تحكم عن بعد إلى المستودع المحلي الخاص بك. تأكد من إضافة اسم مستخدم GitHub بدلاً من العنصر النائب
<YOUR_USER_NAME>
في الأمر التالي.git remote add origin https://github.com/<YOUR_USER_NAME>/gatsby-static-web-app
ادفع مستودعك المحلي إلى GitHub.
git push --set-upstream origin main
قم بنشر تطبيق الويب الخاص بك
توضح لك الخطوات التالية كيفية إنشاء تطبيق موقع ثابت جديد ونشره في بيئة إنتاج.
قم بإنشاء التطبيق
انتقل إلى مدخل Azure
حدد إنشاء مورد
البحث عن Static Web Apps
حدد تطبيقات الويب الثابتة
حدد إنشاء.
في علامة التبويب Basics، أدخل القيم التالية.
الخاصية القيمة الاشتراك اسم اشتراك Azure خاصتك. مجموعة الموارد my-gatsby-group الاسم my-gatsby-app نوع الخطة خال المنطقة ل Azure Functions API والبيئات المرحلية حدد أقرب منطقة إليك. Source GitHub حدد Sign in with GitHub ثم قم بالمصادقة باستخدام GitHub.
أدخل قيم GitHub التالية.
الخاصية القيمة المنظمة حدد مؤسسة GitHub المطلوبة. المستودع حدد gatsby-static-web-app. الفرع حدد "main". إشعار
إذا لم تشاهد أي مستودعات، فقد تحتاج إلى تخويل Azure Static Web Apps على GitHub. استعرض للوصول إلى مستودع GitHub وانتقل إلى Settings > Applications > Authorized OAuth Apps، وحدد Azure Static Web Apps، ثم حدد Grant. بالنسبة لمستودعات المؤسسة، يجب أن تكون مالكًا للمؤسسة لمنح الأذونات.
في قسم Build Details ، حدد Gatsby من القائمة المنسدلة Build Presets واحتفظ بالقيم الافتراضية.
المراجعة والإنشاء
حدد Review + Create للتحقق من صحة التفاصيل.
حدد Create لبدء إنشاء App Service Static Web App وتوفير GitHub Actions للنشر.
بمجرد اكتمال النشر، حدد Go to resource.
في شاشة المورد، حدد رابط URL لفتح التطبيق المنشور. قد تحتاج إلى الانتظار دقيقة أو دقيقتين حتى تكتمل إجراءات GitHub.
تنظيف الموارد
إذا كنت لن تستمر في استخدام هذا التطبيق، يمكنك حذف مورد تطبيق Azure Static Web من خلال الخطوات التالية:
- في علامة تبويب جديدة، افتح مدخل Azure
- في شريط البحث العلوي، ابحث عن تطبيقك بالاسم الذي قدمته سابقًا
- انقر فوق التطبيق
- انقر فوق الزر حذف
- انقر فوق نعم لتأكيد إجراء الحذف