Ćwiczenie — wdrażanie aplikacji internetowej w usłudze aplikacja systemu Azure

  • 13 min

W tym module utworzysz potok wieloestowy, aby skompilować i wdrożyć aplikację w usłudze aplikacja systemu Azure Service. Dowiedz się, jak odbywa się:

  • Utwórz wystąpienie usługi App Service do hostowania aplikacji internetowej.
  • Utwórz potok wieloestowy.
  • Wdrażanie w usłudze aplikacja systemu Azure.

Tworzenie wystąpienia usługi App Service

  1. Zaloguj się w witrynie Azure Portal.

  2. Wybierz pozycję App Services w okienku po lewej stronie.

  3. Wybierz pozycję Utwórz>aplikację internetową, aby utworzyć nową aplikację internetową.

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

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

  5. Wybierz pozycję Przejrzyj i utwórz, przejrzyj formularz, a następnie wybierz pozycję Utwórz. Ukończenie wdrożenia potrwa kilka minut.

  6. Po zakończeniu wdrażania wybierz pozycję Przejdź do zasobu. W obszarze App Service Essentials są wyświetlane szczegóły związane z wdrożeniem.

    Zrzut ekranu przedstawiający szczegóły wdrożenia, w tym adres URL wdrożenia.

  7. Wybierz adres URL, aby zweryfikować stan usługi App Service.

    Zrzut ekranu przedstawiający domyślną stronę główną usługi App Service w przeglądarce internetowej.

Ważne

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żne

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

  1. W usłudze Azure DevOps przejdź do projektu Space Game — Web — Release .

  2. W lewym dolnym rogu strony wybierz pozycję Ustawienia projektu.

  3. W obszarze Potoki wybierz pozycję Połączenia z usługą.

  4. Wybierz pozycję Nowe połączenie z usługą, a następnie wybierz pozycję Azure Resource Manager , a następnie wybierz pozycję Dalej.

  5. Wybierz pozycję Jednostka usługi (automatyczna), a następnie wybierz pozycję Dalej.

  6. 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 Subskrypcja platformy Azure
    Grupa zasobów tailspin-space-game-rg
    Nazwa połączenia z usługą Resource Manager — Tailspin — gra kosmiczna

  7. Upewnij się, że wybrano opcję Udziel uprawnień dostępu do wszystkich potoków .

  8. Wybierz pozycję Zapisz.

Dodawanie etapu kompilacji do potoku

Potok wieloestowy umożliwia zdefiniowanie odrębnych faz przechodzących przez zmianę w miarę podwyższenia poziomu potoku. Każdy etap definiuje agenta, zmienne i kroki wymagane do przeprowadzenia tej fazy potoku. 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 wieloestowy, należy dodać sekcję stages do konfiguracji, a następnie dodać co najmniej jedną stage sekcję dla każdej fazy potoku. Etapy dzielą się na zadania, które są serią kroków, które są uruchamiane sekwencyjnie jako jednostka.

  1. 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

  2. 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

  3. W usłudze Azure Pipelines przejdź do potoku, aby wyświetlić dzienniki.

  4. Po zakończeniu kompilacji wybierz przycisk Wstecz, aby powrócić do strony podsumowania i sprawdzić stan potoku i opublikowany artefakt.

    Zrzut ekranu usługi Azure Pipelines przedstawiający podsumowanie zadania.

Tworzenie środowiska deweloperskiego

Środowisko to abstrakcyjna reprezentacja ś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.

  1. W obszarze Azure Pipelines wybierz pozycję Środowiska.

    Zrzut ekranu usługi Azure Pipelines przedstawiający lokalizację opcji menu Środowiska.

  2. Wybierz pozycję Utwórz środowisko.

  3. W obszarze Nazwa wprowadź wartość dev.

  4. Pozostaw wartości domyślne pozostałych pól.

  5. Wybierz pozycję Utwórz.

Przechowywanie nazwy aplikacji internetowej w zmiennej potoku

Tworzony etap wdrażania używa nazwy w celu zidentyfikowania wystąpienia usługi App Service do wdrożenia, np . tailspin-space-game-web-1234.

Mimo że można trwale kodować tę nazwę w konfiguracji potoku, zdefiniowanie jej jako zmiennej sprawia, że konfiguracja będzie bardziej wielokrotnego użytku.

  1. W usłudze Azure DevOps wybierz pozycję Potoki , a następnie wybierz pozycję Biblioteka.

    Zrzut ekranu usługi Azure Pipelines przedstawiający lokalizację menu Biblioteka.

  2. Wybierz pozycję + Grupa zmiennych , aby utworzyć nową grupę zmiennych.

  3. Wprowadź wartość Release (Wydanie ) jako nazwę grupy zmiennych.

  4. Wybierz pozycję Dodaj w obszarze Zmienne , aby dodać nową zmienną.

  5. Wprowadź wartość WebAppName jako nazwę zmiennej i nazwę wystąpienia usługi App Service: na przykład tailspin-space-game-web-1234.

  6. Wybierz pozycję Zapisz.

Dodawanie etapu wdrażania do potoku

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

  1. Z programu Visual Studio Code zastąp zawartość 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 download zadań i AzureWebApp@1 . Potok pobiera element $(WebAppName) z utworzonej wcześniej grupy zmiennych.

    Zwróć również uwagę, jak używamy environment metody wdrażania w środowisku deweloperskim.

  2. W zintegrowanym terminalu dodaj azure-pipelines.yml do indeksu. Następnie zatwierdź zmianę i wypchnij ją do usługi GitHub.

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

  3. W usłudze Azure Pipelines przejdź do potoku, aby wyświetlić dzienniki.

  4. 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.

    Zrzut ekranu usługi Azure Pipelines przedstawiający ukończone etapy kompilacji i wdrażania.

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

  1. Jeśli nadal masz otwartą kartę usługi App Service, odśwież stronę. W przeciwnym razie przejdź do usługi aplikacja systemu Azure w witrynie Azure Portal i wybierz adres URL wystąpienia: na przykładhttps://tailspin-space-game-web-1234.azurewebsites.net

    Zrzut ekranu przedstawiający szczegóły wdrożenia.

  2. Witryna internetowa Space Game została pomyślnie wdrożona w usłudze aplikacja systemu Azure Service.

    Zrzut ekranu przedstawiający witrynę internetową Space Game.

Gratulacje! Witryna internetowa Space Game została pomyślnie wdrożona w usłudze aplikacja systemu Azure Przy użyciu usługi Azure Pipelines.