Ćwiczenie — wdrażanie aplikacji internetowej w usłudze Azure App Service

13 min

W tym module utworzysz potok wielostopniowy, aby zbudować i wdrożyć aplikację w usłudze Azure App Service. Dowiesz się, jak wykonywać następujące działania:

Utwórz wystąpienie usługi App Service w celu hostowania swojej aplikacji webowej.
Utwórz potok wielostopniowy.
Wdrażanie w usłudze Azure App Service.

Tworzenie wystąpienia usługi App Service

Zaloguj się do portalu Azure.
W okienku po lewej stronie wybierz pozycję App Services.
Wybierz Utwórz>aplikację internetową, aby utworzyć nową aplikację internetową.

Na karcie Podstawy wprowadź następujące wartości.

Ustawienie	Wartość
Szczegóły projektu
Subskrypcja	Twoja subskrypcja
Grupa zasobów	Wybierz Utwórz nowy, wprowadź tailspin-space-game-rg, a następnie wybierz OK.
Szczegóły wystąpienia
Nazwa	Podaj unikatową nazwę, taką jak tailspin-space-game-web-1234. Ta nazwa musi być unikatowa na platformie Azure. Staje się częścią nazwy domeny. W praktyce wybierz nazwę opisjącą usługę. Zanotuj nazwę później.
Opublikuj	Kod
Stos środowiska uruchomieniowego	.NET 6 (LTS)
System operacyjny	Linux
Region	Wybierz region, najlepiej blisko siebie.
plany cenowe
Plan Linux	Zaakceptuj wartość domyślną.
Plan cenowy	Wybierz warstwę cenową Podstawowa B1 z menu rozwijanego.

Wybierz Przejrzyj + utwórz, przejrzyj formularz, a następnie wybierz Utwórz. Ukończenie wdrożenia potrwa kilka minut.
Po zakończeniu wdrażania wybierz pozycję Przejdź do zasobu. W usłudze App Service Essentials wyświetlane są szczegóły dotyczące Twojego wdrożenia.
Wybierz adres URL, aby zweryfikować stan usługi App Service.

Ważny

Na stronie Czyszczenie środowiska usługi Azure DevOps w tym module wyjaśniono, jak usunąć wystąpienie usługi App Service po zakończeniu pracy z nim. Czyszczenie pomaga zagwarantować, że po ukończeniu tego modułu nie są naliczane opłaty za zasoby platformy Azure. Upewnij się, że wykonasz kroki oczyszczania, nawet jeśli nie ukończysz tego modułu.

Tworzenie połączenia z usługą

Ważny

Upewnij się, że zalogowaliśmy się do platformy Azure i usługi Azure DevOps na tym samym koncie Microsoft.

W usłudze Azure DevOps przejdź do projektu Space Game — web — Release.
W lewym dolnym rogu strony wybierz pozycję Ustawienia projektu.
W sekcji Pipelineswybierz pozycję Połączenia usługowe.
Wybierz pozycję New service connection, a następnie wybierz pozycję Azure Resource Manager a następnie wybierz pozycję Dalej.
Wybierz pozycję Jednostka usługi (automatyczna), a następnie wybierz pozycję Dalej.

Wypełnij wymagane pola w następujący sposób: jeśli zostanie wyświetlony monit, zaloguj się do konta Microsoft.

Pole	Wartość
Poziom zakresu	Subskrypcja
Subskrypcja	Twoja subskrypcja platformy Azure
Grupa zasobów	tailspin-space-game-rg
Nazwa połączenia z usługą	Resource Manager — Tailspin — gra kosmiczna

Upewnij się, że wybrano Przyznaj uprawnienia dostępu do wszystkich potoków.
Wybierz pozycję Zapisz.

Dodawanie etapu kompilacji do potoku

Wieloetapowy potok umożliwia zdefiniowanie odrębnych faz, przez które przechodzi zmiana, w miarę jak jest promowana przez potok. Każda faza definiuje agenta, zmienne i działania wymagane do przeprowadzenia tego etapu potoku danych. W tej sekcji zdefiniujesz jeden etap do wykonania kompilacji. Zdefiniuj drugi etap wdrażania aplikacji internetowej w usłudze App Service.

Aby przekonwertować istniejącą konfigurację kompilacji na potok wielostopniowy, należy dodać do konfiguracji sekcję stages, a następnie dodać co najmniej jedną sekcję stage dla każdej fazy potoku. Etapy dzielą się na zadania, które są serią czynności uruchamianych sekwencyjnie jako całość.

W projekcie w programie Visual Studio Code otwórz azure-pipelines.yml i zastąp jego zawartość następującym kodem:

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

W zintegrowanym terminalu uruchom następujące polecenia, aby przygotować, zatwierdzić, a następnie wypchnąć zmiany do gałęzi zdalnej.
```
git add azure-pipelines.yml
git commit -m "Add a build stage"
git push origin release-pipeline
```
W usłudze Azure Pipelines przejdź do swojego potoku, aby wyświetlić dzienniki.
Po zakończeniu kompilacji wybierz przycisk Wstecz, aby powrócić do strony podsumowania i sprawdzić stan potoku i opublikowany artefakt.

Tworzenie środowiska deweloperskiego

Środowisko to abstrakcyjna reprezentacja Twojego środowiska wdrażania. Środowiska mogą służyć do definiowania określonych kryteriów wydania, takich jak potok, który jest autoryzowany do wdrażania w środowisku. Środowiska mogą również służyć do konfigurowania ręcznych zatwierdzeń dla określonego użytkownika/grupy w celu zatwierdzenia przed wznowieniu wdrożenia.

W usłudze Azure Pipelines wybierz pozycję Environments.
Wybierz pozycję Utwórz środowisko.
W polu Nazwawprowadź dev.
Pozostaw wartości domyślne pozostałych pól.
Wybierz pozycję Utwórz.

Przechowaj nazwę aplikacji internetowej w zmiennej potoku

Etap wdrażania , który tworzymy, używa nazwy w celu zidentyfikowania wystąpienia usługi App Service, na przykład: tailspin-space-game-web-1234.

Chociaż można wprowadzić tę nazwę na stałe w konfiguracji potoku, zdefiniowanie jej jako zmiennej sprawia, że konfiguracja staje się bardziej uniwersalna.

W usłudze Azure DevOps wybierz pozycję Pipelines, a następnie wybierz pozycję Library.
Wybierz + grupa zmiennych, aby utworzyć nową grupę zmiennych.
Wprowadź Release dla nazwy grupy zmiennych .
Wybierz Dodaj pod Zmienne, aby utworzyć nową zmienną.
Wprowadź WebAppName jako nazwę zmiennej i nazwę wystąpienia swojej usługi App Service jako wartość: na przykład tailspin-space-game-web-1234.
Wybierz pozycję Zapisz.

Dodaj etap wdrażania do potoku przetwarzania

Rozszerzamy nasz potok przez dodanie etapu wdrożenia w celu wdrożenia Space Game w usłudze App Service przy użyciu zadań download i AzureWebApp@1 w celu pobrania artefaktu kompilacji, a następnie wdrożenia go.

Z programu Visual Studio Code zastąp zawartość pliku azure-pipelines.yml następującym kodem 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'

Zwróć uwagę na wyróżnioną sekcję i sposób używania zadań download i AzureWebApp@1. Pipeline pobiera $(WebAppName) z utworzonej wcześniej grupy zmiennych.

Zwróć również uwagę, jak używamy environment do wdrożenia do środowiska deweloperskiego .

W zintegrowanym terminalu dodaj azure-pipelines.yml do indeksu. Następnie zatwierdź zmianę i wypchnij ją do GitHuba.
```
git add azure-pipelines.yml
git commit -m "Add a deployment stage"
git push origin release-pipeline
```
W usłudze Azure Pipelines przejdź do swojego potoku, aby wyświetlić dzienniki.
Po zakończeniu kompilacji wybierz przycisk Wstecz, aby powrócić do strony podsumowania i sprawdzić stan etapów. Oba etapy zakończyły się pomyślnie w naszym przypadku.

Wyświetlanie wdrożonej witryny internetowej w usłudze App Service

Jeśli nadal masz otwartą kartę usługi App Service, odśwież stronę. W przeciwnym razie przejdź do usługi Azure App Service w portalu Azure i wybierz URL wystąpienia : na przykład https://tailspin-space-game-web-1234.azurewebsites.net
Witryna internetowa Space Game została pomyślnie wdrożona w usłudze Azure App Service.

Gratulacje! Pomyślnie wdrożono witrynę internetową gry kosmicznej do usługi Azure App Service za pomocą Azure Pipelines.