Oefening: een webtoepassing implementeren

  • 10 minuten

Bij uw speelgoedbedrijf heeft uw team voor websiteontwikkeling de nieuwste versie van de website doorgevoerd in uw Git-opslagplaats. U bent nu klaar om uw werkstroom bij te werken om de website te bouwen en deze te implementeren in Azure-app Service.

In het proces gaat u het volgende doen:

  • Voeg een nieuwe werkstroom toe voor de buildtaak.
  • Werk de werkstroom bij om de buildtaak op te nemen.
  • Voeg een nieuwe betrouwbaarheidstest toe.
  • Werk de implementatietaak bij om de toepassing te implementeren.
  • De werkstroom uitvoeren.

Een herbruikbare werkstroom toevoegen voor de buildtaak

Hier voegt u een nieuwe taakdefinitie toe die de stappen bevat die nodig zijn om de websitetoepassing te bouwen.

  1. Open Visual Studio Code.

  2. Maak in de map .github/workflows een nieuw bestand met de naam build.yml.

    Schermopname van Visual Studio Code Explorer, met de mappen dot github en werkstromen en het build dot YML-bestand weergegeven.

  3. Voeg de volgende inhoud toe aan het werkstroombestand build.yml :

    name: build-website

on:
  workflow_call:

jobs:
  build-application:
    name: Build application
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3

    - name: Install .NET Core
      uses: actions/setup-dotnet@v3
      with:
        dotnet-version: 3.1

    - name: Build publishable website
      run: |
        dotnet publish --configuration Release
      working-directory: ./src/ToyCompany/ToyCompany.Website

    - name: Zip publishable website
      run: |
        zip -r publish.zip .
      working-directory: ./src/ToyCompany/ToyCompany.Website/bin/Release/netcoreapp3.1/publish

    - name: Upload website as workflow artifact
      uses: actions/upload-artifact@v3
      with:
        name: website
        path: ./src/ToyCompany/ToyCompany.Website/bin/Release/netcoreapp3.1/publish/publish.zip

    Met de taak wordt de .NET SDK geïnstalleerd om de oplossing te bouwen. Vervolgens wordt een buildstap uitgevoerd om de broncode van de websitetoepassing om te zetten in een gecompileerd bestand dat klaar is om te worden uitgevoerd in Azure. De taak comprimeert vervolgens het gecompileerde artefact en uploadt het als een werkstroomartefact.

  4. Sla de wijzigingen in het bestand op.

De buildtaak toevoegen aan de werkstroom

  1. Open het bestand workflow.yml .

  2. Onder de taken: regel, vóór de linttaak, voegt u een nieuwe taak met de naam build toe die gebruikmaakt van de herbruikbare werkstroom die u zojuist hebt gedefinieerd:

    name: deploy-toy-website-end-to-end
concurrency: toy-company

on:
  push:
    branches:
      - main
  workflow_dispatch:

permissions:
  id-token: write
  contents: read

jobs:

  # Build the application and database.
  build:
    uses: ./.github/workflows/build.yml

  # Lint the Bicep file.
  lint:
    uses: ./.github/workflows/lint.yml

  3. Werk de taak deploy-test bij zodat deze afhankelijk is van de nieuwe build-taak :

    # Deploy to the test environment.
deploy-test:
  uses: ./.github/workflows/deploy.yml
  needs: [build, lint]
  with:
    environmentType: Test
    resourceGroupName: ToyWebsiteTest
    reviewApiUrl: https://sandbox.contoso.com/reviews
  secrets:
    AZURE_CLIENT_ID: ${{ secrets.AZURE_CLIENT_ID_TEST }}
    AZURE_TENANT_ID: ${{ secrets.AZURE_TENANT_ID }}
    AZURE_SUBSCRIPTION_ID: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
    reviewApiKey: ${{ secrets.REVIEW_API_KEY_TEST }}

  4. Werk de implementatie-productietaak bij zodat deze ook afhankelijk is van de build - en linttaken .

    # Deploy to the production environment.
deploy-production:
  uses: ./.github/workflows/deploy.yml
  needs:
  - lint
  - build
  - deploy-test
  with:
    environmentType: Production
    resourceGroupName: ToyWebsiteProduction
    reviewApiUrl: https://api.contoso.com/reviews
  secrets:
    AZURE_CLIENT_ID: ${{ secrets.AZURE_CLIENT_ID_PRODUCTION }}
    AZURE_TENANT_ID: ${{ secrets.AZURE_TENANT_ID }}
    AZURE_SUBSCRIPTION_ID: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
    reviewApiKey: ${{ secrets.REVIEW_API_KEY_PRODUCTION }}

    Omdat de productie-implementatie afhankelijk is van de testimplementatie, hoeft u niet strikt de afhankelijkheden op te geven. Het is echter een goede gewoonte om expliciet te zijn, om te voorkomen dat uw werkstroom onjuist wordt uitgevoerd als u uw taken of omgevingen opnieuw rangschikt of verwijdert.

    U ziet dat u de needs lijst op twee verschillende manieren opgeeft: de afhankelijkheden van uw testomgevingsimplementatie worden op één regel weergegeven en de productieomgeving wordt gebruikt met behulp van een lijst met meerdere regels. De twee benaderingen zijn gelijkwaardig.

  5. Sla de wijzigingen in het bestand op.

Het betrouwbaarheidstestbestand bijwerken

De websiteontwikkelaars hebben een statuseindpunt toegevoegd aan de website. Dit eindpunt controleert of de website online is en of deze de database kan bereiken. Hier voegt u een nieuwe betrouwbaarheidstest toe om de statuscontrole aan te roepen vanuit uw implementatiewerkstroom.

  1. Open het bestand Website.Tests.ps1 in de map Deploy .

  2. Voeg een nieuwe testcase toe waarmee de statuscontrole wordt aangeroepen. De testcase mislukt als de antwoordcode niet 200 is, wat aangeeft dat de test is geslaagd:

    param(
  [Parameter(Mandatory)]
  [ValidateNotNullOrEmpty()]
  [string] $HostName
)

Describe 'Toy Website' {

    It 'Serves pages over HTTPS' {
      $request = [System.Net.WebRequest]::Create("https://$HostName/")
      $request.AllowAutoRedirect = $false
      $request.GetResponse().StatusCode |
        Should -Be 200 -Because "the website requires HTTPS"
    }

    It 'Does not serves pages over HTTP' {
      $request = [System.Net.WebRequest]::Create("http://$HostName/")
      $request.AllowAutoRedirect = $false
      $request.GetResponse().StatusCode |
        Should -BeGreaterOrEqual 300 -Because "HTTP is not secure"
    }

    It 'Returns a success code from the health check endpoint' {
      $response = Invoke-WebRequest -Uri "https://$HostName/health" -SkipHttpErrorCheck
      Write-Host $response.Content
      $response.StatusCode |
        Should -Be 200 -Because "the website and configuration should be healthy"
    }

}

  3. Sla de wijzigingen in het bestand op.

Uitvoer toevoegen aan Bicep-bestand

Binnenkort voegt u een implementatiestap toe waarmee uw website naar Azure-app Service wordt gepubliceerd. Voor de publicatiestap is de naam van de App Service-app vereist. Hier maakt u de naam van de app beschikbaar als uitvoer van uw Bicep-bestand.

  1. Open het bestand main.bicep in de implementatiemap .

  2. Voeg aan het einde van de bestandsinhoud de naam van de App Service-app toe als uitvoer:

    output appServiceAppName string = appServiceApp.name
output appServiceAppHostName string = appServiceApp.properties.defaultHostName

  3. Sla de wijzigingen in het bestand op.

De implementatietaak bijwerken om de uitvoer door te geven

Nu moet u uw implementatietaak bijwerken om de waarde van de uitvoer van de Bicep-implementatie te nemen en deze beschikbaar te maken voor de rest van de werkstroom.

  1. Open het bestand deploy.yml in de map .github/workflows .

  2. Voeg in de definitie van de implementatietaak een nieuwe uitvoer toe voor het appServiceAppNamevolgende:

    deploy:
  needs: validate
  environment: ${{ inputs.environmentType }}
  runs-on: ubuntu-latest
  outputs:
    appServiceAppName: ${{ steps.deploy.outputs.appServiceAppName }}
    appServiceAppHostName: ${{ steps.deploy.outputs.appServiceAppHostName }}
  steps:

    Notitie

    Wanneer u aan de slag gaat met uw YAML-bestand in Visual Studio Code, ziet u mogelijk enkele rode golvende lijnen die u vertellen dat er een probleem is. Dit komt doordat de Visual Studio Code-extensie voor YAML-bestanden soms ten onrechte het schema van het bestand raadt.

    U kunt de problemen negeren die door de extensie worden gerapporteerd. Of als u wilt, kunt u de volgende code boven aan het bestand toevoegen om de schatting van de extensie te onderdrukken:

    # yaml-language-server: $schema=./deploy.yml

Een taak toevoegen om de website te implementeren

  1. Definieer onder de definitie van de implementatietaak en boven de definitie van de betrouwbaarheidstesttaak een nieuwe taak voor het implementeren van de website in App Service:

    deploy-website:
  needs: deploy
  environment: ${{ inputs.environmentType }}
  runs-on: ubuntu-latest
  steps:
  - uses: actions/download-artifact@v3
  - uses: azure/login@v1
    name: Sign in to Azure
    with:
      client-id: ${{ secrets.AZURE_CLIENT_ID }}
      tenant-id: ${{ secrets.AZURE_TENANT_ID }}
      subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
  - uses: azure/webapps-deploy@v2
    name: Deploy website
    with:
      app-name: ${{ needs.deploy.outputs.appServiceAppName }}
      package: website/publish.zip

    Notitie

    Wees voorzichtig met de inspringing van het YAML-bestand, zodat de nieuwe taak op hetzelfde niveau wordt ingesprongen als de deploy taak. Als u het niet zeker weet, kopieert u de hele deploy.yml bestandsinhoud uit het voorbeeld in de volgende stap.

    U ziet dat de taak afhankelijk is van de implementatietaak met behulp van het needs trefwoord. Deze afhankelijkheid zorgt ervoor dat de website pas wordt geïmplementeerd als de infrastructuur gereed is. Hiermee kan de taak ook toegang krijgen tot de appServiceAppName uitvoer van de implementatietaak .

    U ziet ook dat deze taak stappen bevat voor het downloaden van de werkstroomartefacten en om u aan te melden bij Azure. Elke taak wordt uitgevoerd op een eigen runner, dus moet deze zelfstandig zijn.

  2. Sla de wijzigingen in het bestand op.

Controleer de inhoud van het deploy.yml bestand en voer uw wijzigingen door

  1. Controleer of uw deploy.yml bestand eruitziet als in het volgende voorbeeld:

    name: deploy

on:
  workflow_call:
    inputs:
      environmentType:
        required: true
        type: string
      resourceGroupName:
        required: true
        type: string
      reviewApiUrl:
        required: true
        type: string
    secrets:
      AZURE_CLIENT_ID:
        required: true
      AZURE_TENANT_ID:
        required: true
      AZURE_SUBSCRIPTION_ID:
        required: true
      reviewApiKey:
        required: true

jobs:
  validate:
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v3
     - uses: azure/login@v1
       name: Sign in to Azure
       with:
         client-id: ${{ secrets.AZURE_CLIENT_ID }}
         tenant-id: ${{ secrets.AZURE_TENANT_ID }}
         subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
     - if: inputs.environmentType != 'Production'
       uses: azure/arm-deploy@v1
       name: Run preflight validation
       with:
         deploymentName: ${{ github.run_number }}
         resourceGroupName: ${{ inputs.resourceGroupName }}
         template: ./deploy/main.bicep
         parameters: >
           environmentType=${{ inputs.environmentType }}
           reviewApiUrl=${{ inputs.reviewApiUrl }}
           reviewApiKey=${{ secrets.reviewApiKey }}
         deploymentMode: Validate
     - if: inputs.environmentType == 'Production'
       uses: azure/arm-deploy@v1
       name: Run what-if
       with:
         failOnStdErr: false
         resourceGroupName: ${{ inputs.resourceGroupName }}
         template: ./deploy/main.bicep
         parameters: >
           environmentType=${{ inputs.environmentType }}
           reviewApiUrl=${{ inputs.reviewApiUrl }}
           reviewApiKey=${{ secrets.reviewApiKey }}
         additionalArguments: --what-if

  deploy:
    needs: validate
    environment: ${{ inputs.environmentType }}
    runs-on: ubuntu-latest
    outputs:
      appServiceAppName: ${{ steps.deploy.outputs.appServiceAppName }}
      appServiceAppHostName: ${{ steps.deploy.outputs.appServiceAppHostName }}
    steps:
    - uses: actions/checkout@v3
    - uses: azure/login@v1
      name: Sign in to Azure
      with:
        client-id: ${{ secrets.AZURE_CLIENT_ID }}
        tenant-id: ${{ secrets.AZURE_TENANT_ID }}
        subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
    - uses: azure/arm-deploy@v1
      id: deploy
      name: Deploy Bicep file
      with:
        failOnStdErr: false
        deploymentName: ${{ github.run_number }}
        resourceGroupName: ${{ inputs.resourceGroupName }}
        template: ./deploy/main.bicep
        parameters: >
           environmentType=${{ inputs.environmentType }}
           reviewApiUrl=${{ inputs.reviewApiUrl }}
           reviewApiKey=${{ secrets.reviewApiKey }}

  deploy-website:
    needs: deploy
    environment: ${{ inputs.environmentType }}
    runs-on: ubuntu-latest
    steps:
    - uses: actions/download-artifact@v3
    - uses: azure/login@v1
      name: Sign in to Azure
      with:
        client-id: ${{ secrets.AZURE_CLIENT_ID }}
        tenant-id: ${{ secrets.AZURE_TENANT_ID }}
        subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
    - uses: azure/webapps-deploy@v2
      name: Deploy website
      with:
        app-name: ${{ needs.deploy.outputs.appServiceAppName }}
        package: website/publish.zip

  smoke-test:
    runs-on: ubuntu-latest
    needs: deploy
    steps:
    - uses: actions/checkout@v3
    - run: |
        $container = New-PesterContainer `
          -Path 'deploy/Website.Tests.ps1' `
          -Data @{ HostName = '${{needs.deploy.outputs.appServiceAppHostName}}' }
        Invoke-Pester `
          -Container $container `
          -CI
      name: Run smoke tests
      shell: pwsh

  2. Sla de wijzigingen in het bestand op.

  3. Voer in de Visual Studio Code-terminal uw wijzigingen door en push deze naar uw Git-opslagplaats door de volgende opdrachten uit te voeren:

    git add .
git commit -m "Build and deploy website application"
git push

  4. Dit is de eerste keer dat u naar deze opslagplaats hebt gepusht, dus u wordt mogelijk gevraagd u aan te melden.

    Typ in Windows 1 om te verifiëren met behulp van een webbrowser en selecteer Enter.

    Selecteer Autoriseren in macOS.

  5. Er wordt een browservenster geopend. Mogelijk moet u zich opnieuw aanmelden bij GitHub. Selecteer Autoriseren.

De werkstroom uitvoeren

  1. Ga in uw browser naar Acties.

    De eerste uitvoering van uw werkstroom, met het label Eerste doorvoer, wordt weergegeven als een fout. GitHub heeft de werkstroom automatisch uitgevoerd toen u de opslagplaats maakte. Het is mislukt omdat de geheimen op dat moment niet gereed waren. U kunt deze fout negeren.

  2. Selecteer de end-to-end-end-end-werkstroom voor het implementeren van speelgoed.

  3. Selecteer de meest recente uitvoering van uw werkstroom.

  4. Wacht totdat de buildtaak is voltooid.

    Schermopname van GitHub met de werkstroomuitvoeringstaken.

  5. Wacht totdat de implementatietest/implementatietaak is voltooid.

    Sommige waarschuwingen worden weergegeven in het deelvenster Aantekeningen . Al deze waarschuwingen zijn te maken met de manier waarop Bicep informatieve berichten naar het werkstroomlogboek schrijft. U kunt deze waarschuwingen negeren.

  6. De werkstroom voert vervolgens de taak deploy-test/betrouwbaarheidstest uit, maar de betrouwbaarheidstest mislukt:

    Schermopname van GitHub met de betrouwbaarheidstesttaak van de werkstroomuitvoering voor de testomgeving. De status geeft aan dat de taak is mislukt.

  7. Selecteer de taak deploy-test/smoke-test om het werkstroomlogboek te openen.

  8. Selecteer de stap Betrouwbaarheidstests uitvoeren om de bijbehorende sectie van het werkstroomlogboek weer te geven:

    Schermopname van GitHub met het logboek voor het uitvoeren van de werkstroom, met de uitvoer van de betrouwbaarheidstest weergegeven. Het resultaat van de JSON-statustest is gemarkeerd.

    U ziet dat het werkstroomlogboek aangeeft dat de website en configuratie niet in orde zijn. Er is een probleem met de communicatie van de toepassing met Azure SQL Database. U hebt nog geen database geïmplementeerd of geconfigureerd. Daarom heeft de website er geen toegang toe. U lost dit probleem binnenkort op.