توزيع مواقع Nuxt 3 مع عرض عالمي على Azure Static Web Apps

في هذا البرنامج التعليمي، تتعلم كيفية نشر تطبيق Nuxt 3 إلى Azure Static Web Apps. يدعم Nuxt 3 العرض العالمي (من جانب العميل ومن جانب الخادم)، بما في ذلك مسارات الخادم وواجهة برمجة التطبيقات. بدون تكوين إضافي، يمكنك نشر تطبيقات Nuxt 3 مع عرض عالمي إلى Azure Static Web Apps. عندما يكون التطبيق مضمنا في مهمة Static Web Apps GitHub Action أو Azure Pipelines، يقوم Nuxt 3 تلقائيا بتحويله إلى أصول ثابتة وتطبيق Azure Functions متوافق مع Azure Static Web Apps.

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

• حساب Azure مع اشتراك نشط. أنشئ حساباً مجاناً.
• حساب GitHub. أنشئ حساباً مجاناً.
• Node.js 16 أو أحدث.

إعداد تطبيق Nuxt 3

يمكنك إعداد مشروع Nuxt جديد باستخدام npx nuxi init nuxt-app. بدلا من استخدام مشروع جديد، يستخدم هذا البرنامج التعليمي مستودعا موجودا تم إعداده لتوضيح كيفية نشر موقع Nuxt 3 مع عرض عالمي على Azure Static Web Apps.

1. الانتقال إلى http://github.com/staticwebdev/nuxt-3-starter/generate.

2. قم بتسمية المستودع nuxt-3-starter.

3. بعد ذلك ، قم باستنساخ الريبو الجديد لجهازك. تأكد من استبدال <YOUR_GITHUB_ACCOUNT_NAME> باسم حسابك.

   git clone http://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/nuxt-3-starter
   

4. انتقل إلى تطبيق Nuxt.js المستنسخ حديثا:

   cd nuxt-3-starter
   

5. تثبيت التبعيات:

   npm install
   

6. ابدأ Nuxt.js التطبيق قيد التطوير:

   npm run dev -- -o
   

انتقل إلى http://localhost:3000 لفتح التطبيق ، حيث يجب أن ترى موقع الويب التالي مفتوحا في متصفحك المفضل. حدد الأزرار لاستدعاء مسارات الخادم وواجهة برمجة التطبيقات.

نشر موقع Nuxt 3 الخاص بك

توضح الخطوات التالية كيفية إنشاء مورد Azure Static Web Apps وتكوينه لنشر تطبيقك من GitHub.

إنشاء مورد Azure Static Web Apps

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

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

3. ابحث عن تطبيقات الويب الثابتة.

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

5. حدد إنشاء.

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

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

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

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

   الخاصية	Value
   المنظمة	حدد مؤسسة GitHub المطلوبة.
   Repository	حدد المستودع الذي قمت بإنشائه مسبقًا.
   الفرع	حدد main.

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

10. في موقع التطبيق، أدخل / في المربع.

11. في موقع واجهة برمجة التطبيقات، أدخل .output/server في المربع.

12. في موقع الإخراج، أدخل .output/public في المربع.

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

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

2. حدد إنشاء لبدء إنشاء تطبيق الويب الثابت وتوفير إجراءات GitHub للنشر.

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

4. في نافذة نظرة عامة ، حدد ارتباط عنوان URL لفتح التطبيق الذي تم نشره.

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

يمكنك التحقق من حالة مهام سير عمل الإجراءات بالانتقال إلى الإجراءات الخاصة بالمستودع الخاص بك:

https://github.com/<YOUR_GITHUB_USERNAME>/nuxt-3-starter/actions

مزامنة التغييرات

عند إنشاء التطبيق، أنشأت Azure Static Web Apps ملف سير عمل GitHub Actions في المستودع الخاص بك. ارجع إلى المحطة الطرفية وقم بتشغيل الأمر التالي لسحب الالتزام الذي يحتوي على الملف الجديد.

git pull

قم بإجراء تغييرات على التطبيق عن طريق تحديث الكود ودفعه إلى GitHub. يقوم GitHub Actions تلقائيا بإنشاء التطبيق ونشره.

لمزيد من المعلومات، راجع وثائق الإعداد المسبق لتوزيع Azure Static Web Apps Nuxt 3.

إعداد مجال مخصص