مشاركة عبر

توزيع مواقع الويب Next.js المعروضة بشكل ثابت على Azure Static Web Apps

في هذا البرنامج التعليمي، تعرف على كيفية نشر موقع ويب ثابت تم إنشاؤه Next.js إلى Azure Static Web Apps. لمزيد من المعلومات حول تفاصيل Next.js، راجع الملف التمهيدي لقالب المبتدئين.

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

1. إعداد تطبيق Next.js

بدلا من استخدام واجهة سطر الأوامر (CLI) Next.js لإنشاء تطبيقك، يمكنك استخدام مستودع بداية. يحتوي مستودع المبتدئين على تطبيق Next.js موجود يدعم المسارات الديناميكية.

للبدء، قم بإنشاء مستودع جديد ضمن حساب GitHub الخاص بك من مستودع القوالب.

  1. انتقل إلى https://github.com/staticwebdev/nextjs-starter/generate

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

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

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

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

    cd nextjs-starter

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

    npm install

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

    npm run dev

  7. انتقل إلى http://localhost:3000 فتح التطبيق ، حيث سترى موقع الويب التالي مفتوحا في متصفحك المفضل:

ابدأ Next.js التطبيق

عند تحديد إطار عمل أو مكتبة، سترى صفحة تفاصيل حول العنصر المحدد:

صفحة التفاصيل

2. إنشاء تطبيق ثابت

توضح الخطوات التالية كيفية ربط تطبيقك ب Azure Static Web Apps. بمجرد دخولك إلى Azure، يمكنك نشر التطبيق في بيئة إنتاج.

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

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

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

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

  5. حدد إنشاء.

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

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

  7. حدد تسجيل الدخول باستخدام GitHub والمصادقة باستخدام GitHub، إذا طلب منك ذلك.

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

    الخاصية القيمة
    المنظمة حدد مؤسسة GitHub المناسبة.
    Repository حدد nextjs-starter.
    الفرع حدد main.

  9. في قسم تفاصيل البنية ، حدد مخصص من الإعدادات المسبقة للبناء. أضف القيم التالية بالنسبة لتكوين البناء.

    الخاصية القيمة
    موقع التطبيق أدخل / في المربع.
    موقع واجهة برمجة التطبيقات اترك هذا المربع فارغا.
    موقع الإخراج أدخل في المربع.

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

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

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

  3. بمجرد اكتمال النشر ، حدد ، انتقل إلى المورد.

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

إذا لم يتم تحميل موقع الويب على الفور ، فهذا يعني أن الإصدار لا يزال قيد التشغيل. للتحقق من حالة سير عمل الإجراءات، انتقل إلى لوحة معلومات الإجراءات لمستودعك:

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

بمجرد اكتمال سير العمل، يمكنك تحديث المتصفح لعرض تطبيق الويب الخاص بك.

الآن أي تغييرات يتم إجراؤها على الفرع main تبدأ في إنشاء ونشر جديد لموقع الويب الخاص بك.

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

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

ارجع إلى المحطة الطرفية وقم بتشغيل الأمر git pull origin mainالتالي.

تكوين العرض الثابت

بشكل افتراضي، يتم التعامل مع التطبيق على أنه تطبيق Next.js مختلط يتم تقديمه، ولكن لمتابعة استخدامه كمنشئ موقع ثابت، تحتاج إلى تحديث مهمة النشر.

  1. افتح المستودع في Visual Studio Code.

  2. انتقل إلى ملف GitHub Actions الذي أضافه Azure Static Web Apps إلى المستودع الخاص بك .github/workflows/azure-static-web-apps-<your site ID>.yml

  3. قم بتحديث مهمة الإنشاء والنشر للحصول على متغير IS_STATIC_EXPORT بيئة يتم تعيينه إلى true:

        - name: Build And Deploy
        id: swa
        uses: azure/static-web-apps-deploy@latest
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for GitHub integrations (i.e. PR comments)
          action: "upload"
          app_location: "/" # App source code path
          api_location: "" # Api source code path - optional
          output_location: "" # Built app content directory - optional
        env: # Add environment variables here
          IS_STATIC_EXPORT: true

  4. قم بتنفيذ التغييرات على git وادفعها إلى GitHub.

    git commit -am "Configuring static site generation" && git push

بمجرد اكتمال البناء ، سيتم عرض الموقع بشكل ثابت.

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

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

  1. افتح مدخل Azure.
  2. ابحث عن my-nextjs-group من شريط البحث العلوي.
  3. حدد اسم المجموعة.
  4. حدد حذف.
  5. حدد نعم لتأكيد إجراء الحذف.

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

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

  • Last updated on