Gyakorlat – A webalkalmazás üzembe helyezése Azure-alkalmazás szolgáltatásban

13 perc

Ebben a modulban egy többlépcsős folyamatot hoz létre az alkalmazás Azure-alkalmazás Szolgáltatásban való létrehozásához és üzembe helyezéséhez. Az alábbiak végrehajtásának módját ismerheti meg:

Hozzon létre egy App Service-példányt a webalkalmazás üzemeltetéséhez.
Többtényezős folyamat létrehozása.
Üzembe helyezés Azure-alkalmazás szolgáltatásban.

Az App Service-példány létrehozása

Jelentkezzen be az Azure Portalra.
Válassza az App Services lehetőséget a bal oldali panelen.
Új webalkalmazás létrehozásához válassza a Webalkalmazás létrehozása>lehetőséget.

Az Alapismeretek lapon adja meg a következő értékeket.

Beállítás	Érték
Projekt részletei
Előfizetés	Az Ön előfizetése
Erőforráscsoport	Válassza az Új létrehozása lehetőséget, majd adja meg a tailspin-space-game-rg nevet, majd kattintson az OK gombra.
Példány részletei
Név	Adjon meg egy egyedi nevet, például tailspin-space-game-web-1234. Ennek a névnek az Azure-on belül egyedinek kell lennie. A tartománynév részévé válik. A gyakorlatban válasszon egy nevet, amely leírja a szolgáltatást. Jegyezze fel a későbbiek nevét.
Közzététel	Kód
Futtatókörnyezet verme	.NET 6 (LTS)
Operációs rendszer	Linux
Régió	Válasszon ki egy régiót, lehetőleg az Önhöz közelit.
Díjszabások
Linux-csomag	Fogadja el az alapértelmezett beállítást.
Tarifacsomag	Válassza ki az Alapszintű B1 tarifacsomagot a legördülő menüből.

Válassza a Véleményezés + létrehozás lehetőséget, tekintse át az űrlapot, majd válassza a Létrehozás lehetőséget. Az üzembe helyezés végrehajtása néhány percet vesz igénybe.
Ha az üzembe helyezés befejeződött, válassza az Erőforrás megnyitása lehetőséget. Az App Service Essentials megjeleníti az üzembe helyezéssel kapcsolatos részleteket.
Válassza ki az URL-címet az App Service állapotának ellenőrzéséhez.

Fontos

Az Azure DevOps-környezet megtisztítása lap ebben a modulban azt ismerteti, hogyan bonthatja le az App Service-példányt, miután végzett vele. A tisztítás segít biztosítani, hogy a modul elvégzése után ne kell fizetnie az Azure-erőforrásokért. Ügyeljen arra, hogy akkor is kövesse a tisztítási lépéseket, ha nem végzi el ezt a modult.

Szolgáltatáskapcsolat létrehozása

Fontos

Győződjön meg arról, hogy ugyanabban a Microsoft-fiókban van bejelentkezve az Azure-ba és az Azure DevOpsba.

Az Azure DevOpsban nyissa meg a Space Game - web - Release projektet.
A lap bal alsó sarkában válassza a Projektbeállítások lehetőséget.
A Folyamatok területen válassza a Szolgáltatáskapcsolatok lehetőséget.
Válassza az Új szolgáltatáskapcsolat lehetőséget, majd az Azure Resource Managert, majd a Tovább lehetőséget.
Válassza a Szolgáltatásnév (automatikus) lehetőséget, majd a Tovább gombot.

Töltse ki a szükséges mezőket az alábbiak szerint: Ha a rendszer kéri, jelentkezzen be a Microsoft-fiókjába.

Mező	Érték
Hatókör szintje	Előfizetés
Előfizetés	Az Azure-előfizetése
Erőforráscsoport	tailspin-space-game-rg
Szolgáltatáskapcsolat neve	Resource Manager - Tailspin - Space Game

Győződjön meg arról, hogy az összes folyamat hozzáférési engedélyének megadása ki van jelölve.
Válassza a Mentés lehetőséget.

A buildelési szakasz hozzáadása a folyamathoz

A többtényezős folyamatokkal különböző fázisokat határozhat meg, amelyeket a módosítás a folyamaton keresztül előléptetve halad át. Minden fázis meghatározza a folyamat adott fázisának végrehajtásához szükséges ügynököt, változókat és lépéseket. Ebben a szakaszban egy szakaszt határoz meg a build végrehajtásához. Meghatároz egy második szakaszt a webalkalmazás App Service-ben való üzembe helyezéséhez.

Ha a meglévő buildkonfigurációt többlépcsős folyamattá szeretné alakítani, adjon hozzá egy stages szakaszt a konfigurációhoz, majd adjon hozzá egy vagy több stage szakaszt a folyamat minden fázisához. A szakaszok feladatokra bonthatók, amelyek egy egységként egymás után futó lépések sorozatai.

A Visual Studio Code-ban lévő projektben nyissa meg a azure-pipelines.yml , és cserélje le a tartalmát a következő kódra:

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

Az integrált terminálon futtassa az alábbi parancsokat a fázishoz, véglegesítéshez, majd küldje el a módosításokat a távoli ágba.
```
git add azure-pipelines.yml
git commit -m "Add a build stage"
git push origin release-pipeline
```
Az Azure Pipelinesban keresse meg a folyamatot a naplók megtekintéséhez.
A build befejezése után a Vissza gombra kattintva térjen vissza az összefoglaló oldalra, és ellenőrizze a folyamat és a közzétett összetevő állapotát.

A fejlesztői környezet létrehozása

A környezet az üzembehelyezési környezet absztrakt ábrázolása. A környezetek a kiadás konkrét feltételeinek meghatározására használhatók, például arra, hogy melyik folyamat jogosult a környezetben való üzembe helyezésre. A környezetek arra is használhatók, hogy manuális jóváhagyásokat állítsanak be az adott felhasználó/csoport számára, hogy jóváhagyják az üzembe helyezés folytatását.

Az Azure Pipelinesban válassza a Környezetek lehetőséget.
Válassza a Környezet létrehozása lehetőséget.
A Név mezőbe írja be a dev nevet.
Hagyja meg a többi mezőt az alapértelmezett értékükön.
Válassza a Létrehozás lehetőséget.

Webalkalmazás nevének tárolása folyamatváltozóban

A létrehozott üzembe helyezési szakasz a név alapján határozza meg, hogy melyik App Service-példányt helyezze üzembe például: tailspin-space-game-web-1234.

Bár ezt a nevet a folyamatkonfigurációban is meg tudja határozni, változóként definiálva a konfiguráció újrafelhasználhatóbbá válik.

Az Azure DevOpsban válassza a Folyamatok , majd a Tár lehetőséget.
Új változócsoport létrehozásához válassza a + Változó csoport lehetőséget.
Adja meg a változócsoport nevének kiadását.
Új változó hozzáadásához válassza a Hozzáadás a Változók csoportban lehetőséget.
Adja meg a WebAppName nevet a változó nevéhez, és az App Service-példány nevét az értékéhez: például tailspin-space-game-web-1234.
Válassza a Mentés lehetőséget.

Az üzembehelyezési szakasz hozzáadása a folyamathoz

Kibővítjük a folyamatot úgy, hogy hozzáadunk egy üzembe helyezési szakaszt a Space Game App Service-ben való üzembe helyezéséhez a download buildösszetevő letöltéséhez és AzureWebApp@1 üzembe helyezéséhez.

A Visual Studio Code-ból cserélje le a azure-pipelines.yml tartalmát a következő yamlre:

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'

Figyelje meg a kiemelt szakaszt, és hogy hogyan használjuk a download feladatokat.AzureWebApp@1 A folyamat lekéri a $(WebAppName) korábban létrehozott változócsoportból.

Figyelje meg azt is, environment hogyan helyezzük üzembe a fejlesztői környezetben.

Az integrált terminálból adjon hozzá azure-pipelines.yml az indexhez. Ezután véglegesítse a módosítást, és küldje el a GitHubra.
```
git add azure-pipelines.yml
git commit -m "Add a deployment stage"
git push origin release-pipeline
```
Az Azure Pipelinesban keresse meg a folyamatot a naplók megtekintéséhez.
A build befejezése után a vissza gombra kattintva térjen vissza az összefoglaló oldalra, és ellenőrizze a szakaszok állapotát. Esetünkben mindkét szakasz sikeresen befejeződött.

Az üzembe helyezett webhely megtekintése az App Service-ben

Ha továbbra is nyitva van az App Service lap, frissítse a lapot. Ellenkező esetben keresse meg a Azure-alkalmazás szolgáltatást az Azure Portalon, és válassza ki a példány URL-címét: például:https://tailspin-space-game-web-1234.azurewebsites.net
A Space Game webhely sikeresen üzembe lett helyezve Azure-alkalmazás szolgáltatásban.

Gratulálunk! Sikeresen üzembe helyezte a Space Game webhelyet Azure-alkalmazás szolgáltatásban az Azure Pipelines használatával.