البرنامج التعليمي: نشر تطبيقات Azure Static Web باستخدام قالب ARM

توضح هذه المقالة كيفية نشر تطبيقات Azure Static Web باستخدام قالب Azure Resource Manager (قالب ARM).

ستتعرف في هذا البرنامج التعليمي على:

• إنشاء قالب ARM لتطبيقات Azure Static Web
• نشر قالب ARM لإنشاء مثيل تطبيق Azure Static Web App

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

• حساب Azure نشط: إذا لم يكن لديك حساب، يمكنك إنشاء حساب مجانًا.

• حساب GitHub: إذا لم يكن لديك حساب، يمكنك إنشاء حساب GitHub مجانًا

• محرر قوالب ARM: تتطلب مراجعة القوالب وتحريرها محرر JSON. التعليمات البرمجية Visual Studio مع ملحق Azure Resource Manager Tools مناسبة تمامًا لتحرير قوالب ARM. للحصول على إرشادات حول كيفية تثبيت التعليمات البرمجية Visual Studio وتكوينها، راجع التشغيل السريع: إنشاء قوالب ARM باستخدام التعليمات البرمجية Visual Studio.

• Azure CLI أو Azure PowerShell: يتطلب نشر قوالب ARM أداة سطر الأوامر. للحصول على إرشادات التثبيت، راجع:

  • تثبيت Azure CLI على نظام تشغيل Windows
  • تثبيت Azure CLI على نظام تشغيل Linux
  • تثبيت Azure CLI على macOS
  • تثبيت برنامج Azure PowerShell

إنشاء رمز الوصول الشخصي GitHub

تعتبر إحدى المعلمات في قالب ARM هي repositoryToken، والتي تتيح عملية نشر ARM للتفاعل مع repo GitHub عقد شفرة مصدر الموقع ثابت.

1. من ملف تعريف الحساب GitHub (في الزاوية العلوية اليمنى)، حدد Settings.

2. حدد Developer Settings.

3. حدد رموز الوصول الشخصية.

4. حدد إنشاء رمز جديد.

5. أدخل اسما لهذا الرمز المميز في حقل الاسم ، على سبيل المثال myfirstswadeployment.

6. حدد انتهاء صلاحية للرمز المميز، الإعداد الافتراضي هو 30 يوما.

7. تحديد النطاقاتالتالية: repo, workflow, write:packages

8. حدد إنشاء رمز.

9. نسخ قيمة الرمز ولصقه في محرر نص لاستخدامه لاحقًا.

هام

تأكد من نسخ هذا الرمز وتخزينه في مكان آمن. فكر في تخزين هذا الرمز المميز في Azure Key Vault والوصول إليه في قالب ARM الخاص بك.

إنشاء GitHub repo

تستخدم هذه المقالة مستودع قالب GitHub لتسهيل بدء التشغيل. يتميز القالب بتطبيق بداية يُستخدم للنشر باستخدام Azure Static Web Apps.

1. انتقل إلى الموقع التالي لإنشاء مستودع جديد:

   1. https://github.com/staticwebdev/vanilla-basic/generate

2. اسم المستودع الخاص بك myfirstswadeployment

   إشعار

   تتطلب Azure Static Web Apps ملف HTML واحد على الأقل لإنشاء تطبيق ويب. يتضمن المستودع الذي تنشئه في هذه الخطوة ملفًا واحدًا index.html.

3. حدد إنشاء مستودع.

   

إنشاء قالب ARM

بفضل المتطلبات الأساسية في مكان الخطوة التالية لتعريف ملف قالب نشر ARM.

1. إنشاء مجلد جديد للاحتفاظ بقوالب ARM.

2. إنشاء ملف جديد وتسميته azuredeploy.json.

3. الصق مقتطف قالب ARM التالي في azuredeploy.json.

       {
           "$schema": "https://schema.management.azure.com/schemas/2019-04-01/deploymentTemplate.json#",
           "contentVersion": "1.0.0.0",
           "parameters": {
               "name": {
                   "type": "string"
               },
               "location": {
                   "type": "string"
               },
               "sku": {
                   "type": "string"
               },
               "skucode": {
                   "type": "string"
               },
               "repositoryUrl": {
                   "type": "string"
               },
               "branch": {
                   "type": "string"
               },
               "repositoryToken": {
                   "type": "securestring"
               },
               "appLocation": {
                   "type": "string"
               },
               "apiLocation": {
                   "type": "string"
               },
               "appArtifactLocation": {
                   "type": "string"
               },
               "resourceTags": {
                   "type": "object"
               },
               "appSettings": {
                   "type": "object"
               }
           },
           "resources": [
               {
                   "apiVersion": "2021-01-15",
                   "name": "[parameters('name')]",
                   "type": "Microsoft.Web/staticSites",
                   "location": "[parameters('location')]",
                   "tags": "[parameters('resourceTags')]",
                   "properties": {
                       "repositoryUrl": "[parameters('repositoryUrl')]",
                       "branch": "[parameters('branch')]",
                       "repositoryToken": "[parameters('repositoryToken')]",
                       "buildProperties": {
                           "appLocation": "[parameters('appLocation')]",
                           "apiLocation": "[parameters('apiLocation')]",
                           "appArtifactLocation": "[parameters('appArtifactLocation')]"
                       }
                   },
                   "sku": {
                       "Tier": "[parameters('sku')]",
                       "Name": "[parameters('skuCode')]"
                   },
                   "resources":[
                       {
                           "apiVersion": "2021-01-15",
                           "name": "appsettings",
                           "type": "config",
                           "location": "[parameters('location')]",
                           "properties": "[parameters('appSettings')]",
                           "dependsOn": [
                               "[resourceId('Microsoft.Web/staticSites', parameters('name'))]"
                           ]
                       }
                   ]
               }
           ]
       }
   
   

4. إنشاء ملف جديد وتسميته azuredeploy.parameters.json.

5. الصق مقتطف قالب ARM التالي في azuredeploy.parameters.json.

       {
           "$schema": "https://schema.management.azure.com/schemas/2019-04-01/deploymentParameters.json#",
           "contentVersion": "1.0.0.0",
           "parameters": {
               "name": {
                   "value": "myfirstswadeployment"
               },
               "location": { 
                   "value": "Central US"
               },   
               "sku": {
                   "value": "Free"
               },
               "skucode": {
                   "value": "Free"
               },
               "repositoryUrl": {
                   "value": "https://github.com/<YOUR-GITHUB-USER-NAME>/<YOUR-GITHUB-REPOSITORY-NAME>"
               },
               "branch": {
                   "value": "main"
               },
               "repositoryToken": {
                   "value": "<YOUR-GITHUB-PAT>" 
               },
               "appLocation": {
                   "value": "/"
               },
               "apiLocation": {
                   "value": ""
               },
               "appArtifactLocation": {
                   "value": "src"
               },
               "resourceTags": {
                   "value": {
                       "Environment": "Development",
                       "Project": "Testing SWA with ARM",
                       "ApplicationName": "myfirstswadeployment"
                   }
               },
               "appSettings": {
                   "value": {
                       "MY_APP_SETTING1": "value 1",
                       "MY_APP_SETTING2": "value 2"
                   }
               }
           }
       }
   

6. قم بتحديث المعلمات التالية.

   المعلمة	القيمة المتوقعة
   repositoryUrl	قم بتوفير عنوان URL إلى مستودع Static Web Apps GitHub.
   repositoryToken	توفير الرمز المميز GitHub PAT.

7. حفظ التحديثات قبل تشغيل النشر في الخطوة التالية.

تشغيل النشر

تحتاج إما Azure CLI أو Azure PowerShell لنشر القالب.

تسجيل الدخول إلى Azure

لنشر قالب، قم بتسجيل الدخول إلى CLI Azure أو Azure PowerShell.

Azure CLI

az login

PowerShell

Connect-AzAccount

إذا كان لديك العديد من اشتراكات Azure، فحدد الاشتراك الذي تريد استخدامه. استبدال <SUBSCRIPTION-ID> بمعلومات اشتراكك:

Azure CLI

az account set --subscription <SUBSCRIPTION-ID>

PowerShell

Set-AzContext <SUBSCRIPTION-ID>

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

عندما تقوم بنشر قالب، فإنك تحدد مجموعة موارد تحتوي على موارد ذات صلة. قبل تشغيل أمر النشر، أنشئ مجموعة الموارد باستخدام Azure CLI أو Azure PowerShell.

إشعار

تمت كتابة أمثلة CLI في هذه المقالة لـ Bash shell.

Azure CLI

resourceGroupName="myfirstswadeployRG"

az group create \
  --name $resourceGroupName \
  --location "Central US"

PowerShell

$resourceGroupName = "myfirstswadeployRG"

New-AzResourceGroup `
  -Name $resourceGroupName `
  -Location "Central US"

نشر القالب

استخدم أحد خيارات التوزيع هذه لنشر القالب.

Azure CLI

az deployment group create \
  --name DeployLocalTemplate \
  --resource-group $resourceGroupName \
  --template-file <PATH-TO-AZUREDEPLOY.JSON> \
  --parameters <PATH-TO-AZUREDEPLOY.PARAMETERS.JSON> \
  --verbose

لمعرفة المزيد حول نشر القالب باستخدام Azure CLI، راجع نشر الموارد باستخدام قوالب ARM وAzure CLI.

PowerShell

$templateFile = Read-Host -Prompt "Enter the template file path and file name"
$templateparameterFile = Read-Host -Prompt "Enter the template parameter file path and file name"

New-AzResourceGroupDeployment `
  -Name DeployLocalTemplate `
  -ResourceGroupName $resourceGroupName `
  -TemplateFile $templateFile `
  -TemplateParameterFile $templateparameterfile `
  -verbose

لمعرفة المزيد حول نشر القالب باستخدام Azure PowerShell، راجع نشر الموارد باستخدام قوالب ARM وAzure PowerShell.

عرض الموقع الإلكتروني

هناك جانبان لنشر تطبيق ثابت. الأول منها يتضمن موارد Azure الأساسية التي تشكل التطبيق الخاص بك. والثاني هو سير عمل GitHub Actions الذي يقوم بإنشاء التطبيق الخاص بك ونشره.

قبل أن تتمكن من الانتقال إلى موقع ثابت جديد، يجب أن تنتهي عملية إنشاء النشر أولاً من التشغيل.

تعرض نافذة نظرة عامة على تطبيقات الويب الثابتة سلسلة من الارتباطات التي تساعدك على التفاعل مع تطبيق الويب الخاص بك.

1. النقر على الشعار الذي يقول: انقر هنا للتحقق من حالة تشغيل GitHub Actions يأخذك إلى GitHub Actions التي تعمل ضد المستودع الخاص بك. بمجرد التحقق من اكتمال مهمة النشر، يمكنك الانتقال إلى موقع الويب الخاص بك عبر عنوان URL الذي تم إنشاؤه.

2. بمجرد اكتمال سير عمل الإجراءات GitHub، يمكنك النقر على رابط URL لفتح موقع الويب في علامة تبويب جديدة.

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

قم بتنظيف الموارد التي قمت بتوزيعها عن طريق حذف مجموعة الموارد.

1. من مدخل Azure، حدد مجموعة الموارد من القائمة اليمنى.
2. أدخل اسم مجموعة الموارد في الحقل Filter by name.
3. حدد اسم مجموعة الموارد.
4. حدد Delete resource group من القائمة.

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

توزيع تطبيق الويب الثابت خاصتك