مشاركة عبر

نشر تطبيق الويب الخاص بك إلى Azure Static Web Apps

في هذه المقالة، يمكنك إنشاء تطبيق ويب جديد مع إطار العمل الذي تختاره، وتشغيله محليا، ثم النشر إلى Azure Static Web Apps.

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

لإكمال هذا البرنامج التعليمي، تحتاج إلى:

مورد ‏‏الوصف
اشتراك Azure إذا لم يكن لديك حساب، يمكنك إنشاء حساب مجانًا.
Node.js تثبيت الإصدار 20.0 أو أحدث.
Azure CLI تثبيت الإصدار 2.6x أو أحدث.

تحتاج أيضا إلى محرر نصوص. للعمل مع Azure، يوصى باستخدام Visual Studio Code .

يمكنك تشغيل التطبيق الذي تقوم بإنشائه في هذه المقالة على النظام الأساسي الذي تختاره بما في ذلك: Linux أو macOS أو Windows أو نظام Windows الفرعي لـ Linux.

إنشاء تطبيق الويب الخاص بك

  1. افتح نافذة terminal.

  1. حدد دليلا مناسبا للتعليمات البرمجية الخاصة بك، ثم قم بتشغيل الأوامر التالية.

    npm create vite@latest swa-vanilla-demo -- --template=vanilla
cd swa-vanilla-demo
npm install
npm run dev

    أثناء تشغيل هذه الأوامر، يطبع خادم التطوير عنوان URL لموقع الويب الخاص بك. حدد الارتباط لفتحه في المستعرض الافتراضي.

    لقطة شاشة لتطبيق الويب vanilla الذي تم إنشاؤه.

  1. حدد دليلا مناسبا للتعليمات البرمجية الخاصة بك، ثم قم بتشغيل الأوامر التالية.

    npx --package @angular/cli@latest ng new swa-angular-demo --ssr=false --defaults
cd swa-angular-demo
npm start

    أثناء تشغيل هذه الأوامر، يطبع خادم التطوير عنوان URL لموقع الويب الخاص بك. حدد الارتباط لفتحه في المستعرض الافتراضي.

    لقطة شاشة لتطبيق الويب الزاوي الذي تم إنشاؤه.

  1. حدد دليلا مناسبا للتعليمات البرمجية الخاصة بك، ثم قم بتشغيل الأوامر التالية.

    npm create vite@latest swa-react-demo -- --template react
cd swa-react-demo
npm install
npm run dev

    أثناء تشغيل هذه الأوامر، يطبع خادم التطوير عنوان URL لموقع الويب الخاص بك. حدد الارتباط لفتحه في المستعرض الافتراضي.

    لقطة شاشة لتطبيق ويب react الذي تم إنشاؤه.

  1. حدد دليلا مناسبا للتعليمات البرمجية الخاصة بك، ثم قم بتشغيل الأوامر التالية.

    npm create vite@latest swa-vue-demo -- --template vue
cd swa-vue-demo
npm install
npm run dev

    أثناء تشغيل هذه الأوامر، يطبع خادم التطوير عنوان URL لموقع الويب الخاص بك. حدد الارتباط لفتحه في المستعرض الافتراضي.

    لقطة شاشة لتطبيق ويب Vue الذي تم إنشاؤه.

  1. حدد Cmd/Ctrl+C لإيقاف خادم التطوير.

إنشاء تطبيق ويب ثابت على Azure

يمكنك إنشاء تطبيق ويب ثابت باستخدام مدخل Azure أو Azure CLI أو Azure PowerShell أو Visual Studio Code (مع ملحق Azure Static Web Apps). يستخدم هذا البرنامج التعليمي Azure CLI.

  1. سجل الدخول إلى Azure CLI:

    az login

    بشكل افتراضي، يفتح هذا الأمر مستعرضا لإكمال العملية. يدعم Azure CLI أساليب مختلفة لتسجيل الدخول إذا لم يعمل هذا الأسلوب في بيئتك.

  2. إذا كان لديك اشتراكات متعددة، فقد تحتاج إلى تحديد اشتراك. يمكنك عرض اشتراكك الحالي باستخدام الأمر التالي:

    az account show

    لتحديد اشتراك، يمكنك تشغيل az account set الأمر .

    az account set --subscription "<SUBSCRIPTION_NAME_OR_ID>"

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

    تستخدم مجموعات الموارد لتجميع موارد Azure معا.

    az group create -n swa-tutorial -l centralus --query "properties.provisioningState"

    -n تشير المعلمة إلى اسم الموقع، والمعلمة -l هي اسم موقع Azure. يختتم الأمر ب --query "properties.provisioningState" بحيث يقوم الأمر بإرجاع رسالة نجاح أو خطأ فقط.

  4. إنشاء تطبيق ويب ثابت في مجموعة الموارد التي تم إنشاؤها حديثا.

    az staticwebapp create -n swa-demo-site -g swa-tutorial --query "defaultHostname"

    -n تشير المعلمة إلى اسم الموقع، وتشير المعلمة -g إلى اسم مجموعة موارد Azure. تأكد من تحديد نفس اسم مجموعة الموارد كما في الخطوة السابقة. يتم توزيع تطبيق الويب الثابت بشكل عام، لذلك لا يكون الموقع مهما لكيفية نشر تطبيقك.

    تم تكوين الأمر لإرجاع عنوان URL لتطبيق الويب الخاص بك. يمكنك نسخ القيمة من نافذة المحطة الطرفية إلى المستعرض لعرض تطبيق الويب المنشور.

تكوين للتوزيع

  1. أضف ملفا staticwebapp.config.json إلى التعليمات البرمجية للتطبيق الخاص بك بالمحتويات التالية:

    {
    "navigationFallback": {
        "rewrite": "/index.html"
    }
}

    يسمح تحديد مسار احتياطي لموقعك بخادم index.html الملف لأي طلبات تم إجراؤها مقابل المجال.

    تحقق من هذا الملف في نظام التحكم في التعليمات البرمجية المصدر (مثل git) إذا كنت تستخدم واحدا.

  2. قم بتثبيت Azure Static Web Apps (SWA) CLI في مشروعك.

    npm install -D @azure/static-web-apps-cli

    يساعدك SWA CLI على تطوير موقعك واختباره محليا قبل نشره على السحابة.

  3. أنشئ ملفا جديدا لمشروعك وقم بتسمائه swa-cli.config.json.

    swa-cli.config.json يصف الملف كيفية إنشاء موقعك ونشره.

    بمجرد إنشاء هذا الملف، يمكنك إنشاء محتوياته باستخدام npx swa init الأمر .

    npx swa init --yes

  4. إنشاء التطبيق الخاص بك للتوزيع.

    npx swa build

  5. استخدم SWA CLI لتسجيل الدخول إلى Azure.

    npx swa login --resource-group swa-tutorial --app-name swa-demo-site

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

تحذير

يضع Angular v17 والإحدث الملفات القابلة للتوزيع في دليل فرعي لمسار الإخراج الذي يمكنك اختياره. لا يعرف SWA CLI الموقع المحدد للدليل. توضح لك الخطوات التالية كيفية تعيين هذا المسار بشكل صحيح.

حدد موقع ملف index.html الذي تم إنشاؤه في مشروعك في المجلد dist/swa-angular-demo/browser.

  1. SWA_CLI_OUTPUT_LOCATION تعيين متغير البيئة إلى الدليل الذي يحتوي على ملف index.html:

    export SWA_CLI_OUTPUT_LOCATION="dist/swa-angular-demo/browser"

نشر موقعك على Azure

انشر التعليمات البرمجية الخاصة بك إلى تطبيق الويب الثابت:

npx swa deploy --env production

قد يستغرق نشر التطبيق بضع دقائق. بمجرد الانتهاء، يتم عرض عنوان URL لموقعك.

لقطة شاشة لأمر التوزيع.

في معظم الأنظمة، يمكنك تحديد عنوان URL للموقع لفتحه في المستعرض الافتراضي.

تنظيف الموارد (اختياري)

إذا كنت لا تستمر في البرامج التعليمية الأخرى، فقم بإزالة مجموعة موارد Azure والموارد:

az group delete -n swa-tutorial

عند إزالة مجموعة موارد، يمكنك حذف كافة الموارد التي تحتوي عليها. لا يمكنك التراجع عن هذا الإجراء.

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

إضافة مصادقة

المحتوى ذو الصلة

  • Last updated on