السابق

التالي

تمرين - نشر تطبيق الويب إلى Azure App Service

مكتمل

في هذه الوحدة النمطية، يمكنك إنشاء مسار متعدد المراحل لإنشاء تطبيقك ونشره في Azure App Service. ‏‫ستتعلم كيفية:

• إنشاء مثيل App Service لاستضافة تطبيق الويب الخاص بك.
• إنشاء مسار متعدد المراحل.
• قم بالنشر إلى Azure App Service.

إنشاء مثيل App Service

1. قم بتسجيل الدخول إلى بوابة Azure.

2. حدد App Services من الجزء الأيمن.

3. حدد إنشاء>تطبيق ويب لإنشاء تطبيق ويب جديد.

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

   الإعداد	القيمة‬
   تفاصيل المشروع
   الاشتراك	اشتراكك
   مجموعة الموارد	حدد "Create new"، ثم أدخل "tailspin-space-game-rg"، وحدد "OK".
   تفاصيل المثيل
   الاسم	أدخل اسما فريدا، مثل tailspin-space-game-web-1234. يجب أن يكون هذا الاسم فريدا عبر Azure. يصبح جزءاً من اسم المجال. في الممارسة العملية، اختر اسما يصف خدمتك. لاحظ اسم لاحقا.
   نشر	رمز
   مكدس وقت التشغيل	.NET 6 (LTS)
   نظام تشغيل	Linux
   المنطقة	حدد منطقة، ويفضل أن تكون قريبة منك.
   خطط التسعير
   خطة Linux	قبول الافتراضي.
   خطة الأسعار	حدد مستوى التسعير الأساسي B1 من القائمة المنسدلة.

5. حدد Review + create، وراجع النموذج، ثم حدد Create. يستغرق النشر بضع لحظات لإكماله.

6. عند اكتمال النشر، حدد Go to resource. تعرض أساسيات خدمة التطبيقات التفاصيل المتعلقة بتوزيعك.

   

7. حدد عنوان URL للتحقق من حالة App Service.

   

هام

توضح صفحة تنظيف بيئة Azure DevOps في هذه الوحدة كيفية هدم مثيل App Service بعد الانتهاء منه. يساعد التنظيف على ضمان عدم تحصيل رسوم منك مقابل موارد Azure بعد إكمال هذه الوحدة النمطية. تأكد من اتباع خطوات التنظيف حتى إذا لم تكمل هذه الوحدة النمطية.

إنشاء اتصال خدمة

هام

تأكد من تسجيل الدخول إلى Azure وAzure DevOps ضمن نفس حساب Microsoft.

1. في Azure DevOps، انتقل إلى مشروع Space Game - web - Release .

2. من الزاوية السفلية اليسرى من الصفحة، حدد Project settings.

3. تحت البنيات الأساسية لبرنامج ربط العمليات التجارية، حدد اتصالات الخدمة.

4. حدد New service connection، ثم حدد Azure Resource Manager ثم حدد Next.

5. حدد كيان الخدمة (تلقائي)، ثم حدد التالي.

6. املأ الحقول المطلوبة كما يلي: إذا تمت مطالبتك، فسجل الدخول إلى حساب Microsoft الخاص بك.

   الحقل	القيمة
   مستوى النطاق	الاشتراك
   الاشتراك	اشتراكك في Azure
   مجموعة الموارد	tailspin-space-game-rg
   اسم اتصال الخدمة	Resource Manager - Tailspin - Space Game

7. تأكد من تحديد منح إذن الوصول إلى كافة المسارات.

8. حدد حفظ.

إضافة مرحلة الإنشاء إلى البنية الأساسية لبرنامج ربط العمليات التجارية الخاصة بك

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

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

1. من مشروعك في Visual Studio Code، افتح azure-pipelines.yml واستبدل محتوياته بهذه التعليمة البرمجية:

   trigger:
   - '*'
   
   variables:
     buildConfiguration: 'Release'
   
   stages:
   - stage: 'Build'
     displayName: 'Build the web application'
     jobs: 
     - job: 'Build'
       displayName: 'Build job'
       pool:
         vmImage: 'ubuntu-20.04'
         demands:
         - npm
   
       variables:
         wwwrootDir: 'Tailspin.SpaceGame.Web/wwwroot'
         dotnetSdkVersion: '6.x'
   
       steps:
       - task: UseDotNet@2
         displayName: 'Use .NET SDK $(dotnetSdkVersion)'
         inputs:
           version: '$(dotnetSdkVersion)'
   
       - task: Npm@1
         displayName: 'Run npm install'
         inputs:
           verbose: false
   
       - script: './node_modules/.bin/node-sass $(wwwrootDir) --output $(wwwrootDir)'
         displayName: 'Compile Sass assets'
   
       - task: gulp@1
         displayName: 'Run gulp tasks'
   
       - script: 'echo "$(Build.DefinitionName), $(Build.BuildId), $(Build.BuildNumber)" > buildinfo.txt'
         displayName: 'Write build info'
         workingDirectory: $(wwwrootDir)
   
       - task: DotNetCoreCLI@2
         displayName: 'Restore project dependencies'
         inputs:
           command: 'restore'
           projects: '**/*.csproj'
   
       - task: DotNetCoreCLI@2
         displayName: 'Build the project - $(buildConfiguration)'
         inputs:
           command: 'build'
           arguments: '--no-restore --configuration $(buildConfiguration)'
           projects: '**/*.csproj'
   
       - task: DotNetCoreCLI@2
         displayName: 'Publish the project - $(buildConfiguration)'
         inputs:
           command: 'publish'
           projects: '**/*.csproj'
           publishWebProjects: false
           arguments: '--no-build --configuration $(buildConfiguration) --output $(Build.ArtifactStagingDirectory)/$(buildConfiguration)'
           zipAfterPublish: true
   
       - publish: '$(Build.ArtifactStagingDirectory)'
         artifact: drop
   

2. من المحطة الطرفية المتكاملة، قم بتشغيل الأوامر التالية لإعداد التغييرات وتثبيتها ثم دفعها إلى الفرع البعيد.

   git add azure-pipelines.yml
   git commit -m "Add a build stage"
   git push origin release-pipeline
   

3. في Azure Pipelines، انتقل إلى البنية الأساسية لبرنامج ربط العمليات التجارية لعرض السجلات.

4. بعد انتهاء البناء، حدد زر الخلف للعودة إلى صفحة الملخص والتحقق من حالة البنية الأساسية لبرنامج ربط العمليات التجارية والبيانات الاصطناعية المنشورة.

   

إنشاء بيئة التطوير

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

1. من Azure Pipelines، حدد Environments.

   

2. حدد إنشاء بيئة.

3. بعد خانةName، أدخِل dev.

4. اترك الحقول المتبقية بقيمها الافتراضية.

5. حدد إنشاء.

تخزين اسم تطبيق الويب الخاص بك في متغير البنية الأساسية لبرنامج ربط العمليات التجارية

تستخدم مرحلة التوزيع التي ننشئها الاسم لتحديد مثيل App Service الذي سيتم نشره على سبيل المثال: tailspin-space-game-web-1234.

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

1. في Azure DevOps، حدد Pipelines ثم حدد Library.

   

2. حدد + مجموعة متغيرة لإنشاء مجموعة متغيرات جديدة.

3. أدخل Release لاسم مجموعة المتغيرات.

4. حدد Add ضمن Variables لإضافة متغير جديد.

5. أدخل WebAppName لاسم المتغير واسم مثيل App Service لقيمته: على سبيل المثال، tailspin-space-game-web-1234.

6. حدد حفظ.

إضافة مرحلة التوزيع إلى البنية الأساسية لبرنامج ربط العمليات التجارية

نقوم بتوسيع البنية الأساسية لبرنامج ربط العمليات التجارية لدينا عن طريق إضافة مرحلة نشر لنشر Space Game إلى App Service باستخدام download المهام و AzureWebApp@1 لتنزيل البيانات الاصطناعية للبناء ثم نشرها.

1. من Visual Studio Code، استبدل محتويات azure-pipelines.yml ب yaml التالي:

   trigger:
   - '*'
   
   variables:
     buildConfiguration: 'Release'
   
   stages:
   - stage: 'Build'
     displayName: 'Build the web application'
     jobs: 
     - job: 'Build'
       displayName: 'Build job'
       pool:
         vmImage: 'ubuntu-20.04'
         demands:
         - npm
   
       variables:
         wwwrootDir: 'Tailspin.SpaceGame.Web/wwwroot'
         dotnetSdkVersion: '6.x'
   
       steps:
       - task: UseDotNet@2
         displayName: 'Use .NET SDK $(dotnetSdkVersion)'
         inputs:
           version: '$(dotnetSdkVersion)'
   
       - task: Npm@1
         displayName: 'Run npm install'
         inputs:
           verbose: false
   
       - script: './node_modules/.bin/node-sass $(wwwrootDir) --output $(wwwrootDir)'
         displayName: 'Compile Sass assets'
   
       - task: gulp@1
         displayName: 'Run gulp tasks'
   
       - script: 'echo "$(Build.DefinitionName), $(Build.BuildId), $(Build.BuildNumber)" > buildinfo.txt'
         displayName: 'Write build info'
         workingDirectory: $(wwwrootDir)
   
       - task: DotNetCoreCLI@2
         displayName: 'Restore project dependencies'
         inputs:
           command: 'restore'
           projects: '**/*.csproj'
   
       - task: DotNetCoreCLI@2
         displayName: 'Build the project - $(buildConfiguration)'
         inputs:
           command: 'build'
           arguments: '--no-restore --configuration $(buildConfiguration)'
           projects: '**/*.csproj'
   
       - task: DotNetCoreCLI@2
         displayName: 'Publish the project - $(buildConfiguration)'
         inputs:
           command: 'publish'
           projects: '**/*.csproj'
           publishWebProjects: false
           arguments: '--no-build --configuration $(buildConfiguration) --output $(Build.ArtifactStagingDirectory)/$(buildConfiguration)'
           zipAfterPublish: true
   
       - publish: '$(Build.ArtifactStagingDirectory)'
         artifact: drop
   
   - stage: 'Deploy'
     displayName: 'Deploy the web application'
     dependsOn: Build
     jobs:
     - deployment: Deploy
       pool:
         vmImage: 'ubuntu-20.04'
       environment: dev
       variables:
       - group: Release
       strategy:
         runOnce:
           deploy:
             steps:
             - download: current
               artifact: drop
             - task: AzureWebApp@1
               displayName: 'Azure App Service Deploy: website'
               inputs:
                 azureSubscription: 'Resource Manager - Tailspin - Space Game'
                 appName: '$(WebAppName)'
                 package: '$(Pipeline.Workspace)/drop/$(buildConfiguration)/*.zip'
   

   لاحظ القسم المميز وكيفية استخدامنا للمهام download و AzureWebApp@1 . يجلب $(WebAppName) المسار من مجموعة المتغيرات التي أنشأناها سابقا.

   لاحظ أيضا كيفية استخدامنا environment للنشر في بيئة التطوير .

2. من الوحدة الطرفية المتكاملة، أضف azure-pipelines.yml إلى الفهرس. ثم قم بتثبيت التغيير ودفعه إلى GitHub.

   git add azure-pipelines.yml
   git commit -m "Add a deployment stage"
   git push origin release-pipeline
   

3. في Azure Pipelines، انتقل إلى البنية الأساسية لبرنامج ربط العمليات التجارية لعرض السجلات.

4. بعد انتهاء البناء، حدد زر الخلف للعودة إلى صفحة الملخص والتحقق من حالة المراحل. انتهت كلتا المرحلتين بنجاح في حالتنا.

   

عرض موقع الويب المنشور على App Service

1. إذا كان لا يزال لديك علامة تبويب App Service مفتوحة، فقم بتحديث الصفحة. وإلا، انتقل إلى Azure App Service في مدخل Microsoft Azure وحدد عنوان URL للمثيل: على سبيل المثال،https://tailspin-space-game-web-1234.azurewebsites.net

   

2. تم نشر موقع ويب Space Game بنجاح في Azure App Service.

   

تهانينا! لقد نجحت في نشر موقع Space Game على Azure App Service باستخدام Azure Pipelines.

متابعة