Share via

نشر مواقع ويب Next.js ثابتة على تطبيقات ويب ثابتة Azure

  • مقالة

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

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

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

بدلاً من استخدام Next.js CLI لإنشاء التطبيق الخاص بك، يمكنك استخدام مستودع المبتدئين. يحتوي مستودع البداية على تطبيق 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 App. بمجرد أن تكون في Azure، يمكنك نشر التطبيق في بيئة إنتاج.

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

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

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

  4. حدد Static Web App.

  5. حدد Create.

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

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

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

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

    الخاصية القيمة
    ⁧⁩المؤسسة⁧⁩ حدد مؤسسة GitHub المناسبة.
    ⁧⁩المستودع⁧⁩ حدد ⁧⁩nextjs-starter⁧⁩.
    ⁧⁩الفرع⁧⁩ حدد ⁧⁩main⁧⁩.

  9. في مقطع ⁧⁩Build Details،⁧⁩ حدد ⁧⁩Custom⁧⁩ من ⁧⁩Build Presets⁧⁩. أضف القيم التالية لتكوين الإنشاء.

    الخاصية القيمة
    موقع التطبيق أدخل / في المربع.
    ⁧⁩موقع واجهة برمجة التطبيقات⁧⁩ اترك هذا المربع فارغًا.
    “Output location” أدخل ⁧⁩في⁧⁩ المربع.

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

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

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

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

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

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

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

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

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

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

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

العودة إلى المحطة الطرفية وتشغيل الأمر التالي ⁧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. حدد Yes لتأكيد حذف المورد.

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

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