نشر تطبيق Vue في تطبيقات الويب الثابتة Azure

في هذه المقالة، ستتعلم كيفية نشر تطبيق Vue إلى تطبيقات الويب الثابتة Azure باستخدام مدخل Microsoft Azure.

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

Resource	ملاحظات
اشتراك Azure	إذا لم يكن لديك اشتراك Azure، فأنشئ حساباً تجريبياً مجانياً.
حساب GitHub	إذا لم يكن لديك حساب GitHub، يمكنك إنشاء حساب مجانا.

Resource	ملاحظات
اشتراك Azure	إذا لم يكن لديك اشتراك Azure، فأنشئ حساباً تجريبياً مجانياً.
حساب Azure DevOps	إذا لم يكن لديك حساب GitHub، يمكنك إنشاء حساب.

إنشاء مستودع

تستخدم هذه المقالة مستودع قالب GitHub لتسهيل بدء التشغيل. يتميز القالب بتطبيق بدء التشغيل لنشره في تطبيقات الويب الثابتة Azure.

1. انتقِل إلى الموقع التالي لإنشاء مستودع جديد:

   https://github.com/staticwebdev/vue-basic/generate

2. قم بتسمية مستودعك باسم my-first-static-web-app

3. حدد «Create repository from template».

   

تستخدم هذه المقالة مستودع Azure DevOps لتسهيل البدء. يتميز المستودع بتطبيق بداية يستخدم للتوزيع باستخدام تطبيقات الويب الثابتة Azure.

1. قم بتسجيل الدخول إلى Azure DevOps.

2. حدد New repository.

3. في نافذة Create new project ، قم بتوسيع قائمة Advanced ، وقم بإجراء التحديدات التالية:

   الإعداد	القيمة‬
   Project	أدخل my-first-web-static-app.
   الرؤية	حدد خاص.
   التحكم بالإصدار	حدد Git.
   عملية عنصر العمل	حدد الخيار الذي يناسب أساليب التطوير الخاصة بك.

4. حدد إنشاء.

5. حدد عنصر القائمة مستودعات.

6. حدد عنصر القائمة ملفات.

7. ضمن بطاقة Import repository ، حدد Import.

8. انسخ عنوان URL للمستودع لإطار العمل الذي تختاره، والصقه في مربع Clone URL .

   https://github.com/staticwebdev/vue-basic.git

9. حدد استيراد وانتظر حتى تكتمل عملية الاستيراد.

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

الآن بعد إنشاء المستودع، يمكنك إنشاء تطبيق ويب ثابت من مدخل Azure.

1. انتقل إلى مدخل Azure.
2. حدد Create a Resource.
3. ابحث عن Static Web App.
4. حدد Static Web App.
5. حدد إنشاء.

في قسم Basics ، ابدأ بتكوين تطبيقك الجديد وربطه بمستودع GitHub.

الإعداد	القيمة‬
الاشتراك	حدد اشتراك Azure الخاص بك.
مجموعة الموارد	حدد الارتباط Create new، وأدخل static-web-apps-test في مربع النص.
الاسم	أدخل my-first-static-web-app في مربع النص.
نوع الخطة	حدد Free.
المصدر	حدد GitHub وسجل الدخول إلى GitHub إذا لزم الأمر.

بمجرد تسجيل الدخول باستخدام GitHub، أدخل معلومات المستودع.

الإعداد	القيمة‬
مؤسسة	حدد مؤسستك.
المستودع	حدد my-first-web-static-app.
فرع	حدد "main".

إشعار

إذا لم تشاهد أي مستودعات:

• قد تحتاج إلى تخويل تطبيقات الويب الثابتة Azure في GitHub. استعرض للوصول إلى مستودع GitHub وانتقل إلى Settings > Applications > Authorized OAuth Apps، وحدد تطبيقات الويب الثابتة Azure، ثم حدد Grant.
• قد تحتاج إلى تخويل تطبيقات الويب الثابتة Azure في مؤسسة Azure DevOps. يجب أن تكون مالكا للمؤسسة لمنح الأذونات. طلب الوصول إلى تطبيق جهة خارجية عبر OAuth. لمزيد من المعلومات، راجع تخويل الوصول إلى واجهات برمجة تطبيقات REST باستخدام OAuth 2.0.

في قسم Basics ، ابدأ بتكوين تطبيقك الجديد وربطه بمستودع Azure DevOps.

الإعداد	القيمة‬
الاشتراك	حدد اشتراك Azure الخاص بك.
مجموعة الموارد	حدد الارتباط Create new، وأدخل static-web-apps-test في مربع النص.
الاسم	أدخل my-first-static-web-app في مربع النص.
نوع الخطة	حدد Free.
المصدر	حدد DevOps.
مؤسسة	حدد مؤسستك.
Project	حدد مشروعك.
المستودع	حدد my-first-web-static-app.
فرع	حدد "main".

إشعار

تأكد من أن الفرع الذي تستخدمه غير محمي، وأن لديك أذونات كافية push لإصدار أمر. للتحقق، استعرض للوصول إلى مستودع DevOps وانتقل إلى مستودعات ->Branches وحدد المزيد من الخيارات. بعد ذلك، حدد الفرع الخاص بك، ثم نهج الفرع لضمان عدم تمكين النهج المطلوبة.

في قسم Build Details ، أضف تفاصيل التكوين الخاصة لإطار عمل الواجهة الأمامية المفضل لديك.

1. حدد Vue.js من القائمة المنسدلة Build Presets .

2. احتفظ بالقيمة الافتراضية في مربع موقع التطبيق.

3. اترك مربع Api location فارغًا.

4. احتفظ بالقيمة الافتراضية في مربع موقع الإخراج.

حدد "Review + create".

إشعار

يمكنك تحرير ملف سير العمل لتغيير هذه القيم بعد إنشاء التطبيق.

حدد إنشاء.

حدد الانتقال إلى المورد.

عرض الموقع الإلكتروني

هناك جانبان لنشر تطبيق ثابت. يقوم الأول بإنشاء موارد Azure الأساسية التي تشكل تطبيقك. والثاني هو سير عمل يقوم بإنشاء ونشر التطبيق الخاص بك.

قبل أن تتمكن من الانتقال إلى موقعك الثابت الجديد، يجب أن ينتهي إنشاء النشر أولا من التشغيل.

تعرض نافذة Static Web Apps Overview سلسلة من الارتباطات التي تساعدك على التفاعل مع تطبيق الويب الخاص بك.

1. تحديد GitHub Action يتم تشغيله في نظرة عامة يأخذك إلى GitHub Actions التي تعمل مقابل المستودع الخاص بك. تحقق من اكتمال إجراء النشر قبل المتابعة.

2. بمجرد اكتمال سير عمل إجراءات GitHub، يمكنك تحديد ارتباط عنوان URL لفتح موقع الويب في علامة تبويب جديدة.

بمجرد اكتمال سير العمل، يمكنك تحديد ارتباط URL لفتح موقع الويب في علامة تبويب جديدة.

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

إذا كنت لن تستمر في استخدام هذا التطبيق، يمكنك حذف مثيل تطبيقات الويب الثابتة Azure عن طريق تشغيل الأمر التالي:

1. افتح مدخل Azure.
2. ابحث عن my-first-web-static-app من شريط البحث العلوي.
3. حدد اسم التطبيق
4. حدد حذف.
5. حدد نعم لتأكيد إجراء الحذف (قد يستغرق هذا الإجراء بضع لحظات لإكماله).

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

إضافة واجهة برمجة تطبيقات إلى التطبيق الخاص بك