Share via

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

  • مقالة

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

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

إعداد تطبيق 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.js

نشر موقع Nuxt 3

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

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

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

  2. حدد ⁧⁩Create a resource⁧⁩.

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

  4. حدد "Static Web Apps".

  5. حدد Create.

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

    الخاصية القيمة
    الاشتراك اسم اشتراك Azure خاصتك.
    مجموعة الموارد my-nuxtjs-group
    الاسم my-nuxt3-app
    ⁧⁩نوع الخطة⁧⁩ مجاني
    “Region for Azure Functions API and staging environments” حدد أقرب منطقة إليك.
    المصدر GitHub

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

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

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

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

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

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

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

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

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

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

  3. بمجرد اكتمال التوزيع، حدد Go to resource.

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

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

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

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.

تأمين المجال المخصص