Oefening: uw Azure DevOps-omgeving instellen

Voltooid

In deze sectie zorgt u ervoor dat uw Azure DevOps-organisatie is ingesteld om de rest van deze module te voltooien. U maakt ook de Azure App Service-omgevingen waarnaar u gaat implementeren.

Als u uw systeem wilt instellen, gaat u het volgende doen:

  • Voeg een gebruiker toe om ervoor te zorgen dat Azure DevOps verbinding kan maken met uw Azure-abonnement.
  • Een Azure DevOps-project instellen voor deze module.
  • Verplaats op Azure Boards het werkitem voor deze module naar de kolom Uitvoeren.
  • Maak de Azure App Service-omgevingen met behulp van de Azure CLI in Azure Cloud Shell.
  • Maak pijplijnvariabelen waarmee de namen van uw App Service-omgevingen worden gedefinieerd.
  • Maak een serviceverbinding waarmee Azure Pipelines veilig toegang heeft tot uw Azure-abonnement.

Een gebruiker toevoegen aan Azure DevOps

Als u deze module wilt voltooien, hebt u uw eigen Azure-abonnement nodig. U kunt gratis aan de slag met Azure.

Hoewel u geen Azure-abonnement nodig hebt om met Azure DevOps te werken, gebruikt u In deze module Azure DevOps om te implementeren naar resources die in uw Azure-abonnement aanwezig zijn. Om het proces te vereenvoudigen, moet u hetzelfde Microsoft-account gebruiken om u aan te melden bij zowel uw Azure-abonnement als uw Azure DevOps-organisatie.

Als u verschillende Microsoft-accounts gebruikt om u aan te melden bij Azure en Azure DevOps, voegt u een gebruiker toe aan uw DevOps-organisatie onder het Microsoft-account waarmee u zich aanmeldt bij Azure. Zie Gebruikers toevoegen aan uw organisatie of projectvoor meer informatie. Wanneer u de gebruiker toevoegt, kiest u het Basic toegangsniveau.

Meld u vervolgens af bij Azure DevOps en meld u opnieuw aan onder het Microsoft-account dat u gebruikt om u aan te melden bij uw Azure-abonnement.

Het Azure DevOps-project ophalen

Hier zorgt u ervoor dat uw Azure DevOps-organisatie is ingesteld om de rest van deze module te voltooien. U begint met het uitvoeren van een sjabloon waarmee uw project wordt gemaakt in Azure DevOps.

De modules in dit leertraject maken deel uit van een voortgang die het Tailspin-webteam volgt via hun DevOps-traject. Voor leerdoeleinden heeft elke module een gekoppeld Azure DevOps-project.

De sjabloon uitvoeren

Voer een sjabloon uit waarmee uw Azure DevOps-organisatie wordt ingesteld.

de sjabloon uitvoeren

Volg deze stappen op de azure DevOps Demo Generator-site om de sjabloon uit te voeren.

  1. Selecteer Aanmelden en accepteer de gebruiksvoorwaarden.

  2. Selecteer op de pagina Nieuw project maken uw Azure DevOps-organisatie en voer een projectnaam in, zoals Space Game - web - Niet-functionele tests.

    Schermopname voor het maken van een project via de Azure DevOps-demogenerator.

  3. Selecteer Ja, ik wil deze opslagplaatssplitsen en vervolgens autoriserenselecteren.

  4. Selecteer Maak project.

    Het duurt even voordat de sjabloon wordt uitgevoerd.

  5. Selecteer Naar project navigeren om naar uw project in Azure DevOps te gaan.

Belangrijk

De Uw Azure DevOps-omgeving opschonen pagina in deze module bevat belangrijke opschoonstappen. Opschonen helpt ervoor te zorgen dat u geen gratis buildminuten meer hebt. Zorg ervoor dat u de opschoonstappen uitvoert, zelfs als u deze module niet voltooit.

De zichtbaarheid van uw project instellen

In eerste instantie is uw fork van de Space Game-opslagplaats op GitHub ingesteld op openbaar terwijl het project dat is gemaakt door de Azure DevOps-sjabloon is ingesteld op privé. Een openbare opslagplaats op GitHub is toegankelijk voor iedereen, terwijl een privéopslagplaats alleen toegankelijk is voor u en de personen met wie u deze wilt delen. Op dezelfde manier bieden openbare projecten in Azure DevOps alleen-lezen toegang aan gebruikers die niet zijn geverifieerd, terwijl voor privéprojecten gebruikers eerst toegang moeten krijgen en geverifieerd moeten worden om gebruik te kunnen maken van de diensten.

Op dit moment is het niet nodig om deze instellingen te wijzigen voor de doeleinden van deze module. Voor uw persoonlijke projecten moet u echter bepalen welke zichtbaarheid en toegang u aan anderen wilt verlenen. Als uw project bijvoorbeeld open source is, kunt u ervoor kiezen om zowel uw GitHub-opslagplaats als uw Azure DevOps-project openbaar te maken. Als uw project eigendom is, maakt u doorgaans zowel uw GitHub-opslagplaats als uw Azure DevOps-project privé.

Later kunt u de volgende resources nuttig vinden om te bepalen welke optie het beste is voor uw project:

Het project lokaal instellen

Hier laadt u het Space Game-project in Visual Studio Code, configureert u Git, kloont u uw opslagplaats lokaal en stelt u de upstream remote in, zodat u starterscode kunt downloaden.

Notitie

Als u al lokaal bent ingesteld voor het mslearn-tailspin-spacegame-web-deploy project, kunt u doorgaan naar de volgende sectie.

De geïntegreerde terminal openen

Visual Studio Code wordt geleverd met een geïntegreerde terminal. Hier bewerkt u bestanden en werkt u vanaf de opdrachtregel.

  1. Start Visual Studio Code.

  2. Selecteer Terminalin het menu Weergave.

  3. Selecteer Git Bash-in de vervolgkeuzelijst. Als u bekend bent met een andere Unix-shell die u liever gebruikt, selecteert u die shell.

    Een schermopname van Visual Studio Code met de locatie van de Git Bash-shell.

    In het terminalvenster kunt u elke shell kiezen die op uw systeem is geïnstalleerd. U kunt bijvoorbeeld Git Bash of PowerShell of een andere shell kiezen.

    Hier gebruikt u Git Bash, onderdeel van Git voor Windows, waarmee u eenvoudig Git-opdrachten kunt uitvoeren.

    Notitie

    Als u in Windows Git Bash niet als optie ziet, controleert u of u Githebt geïnstalleerd en start u Visual Studio Code opnieuw.

  4. Voer de opdracht cd uit om naar de map te gaan waar u wilt werken. Kies desgewenst uw basismap (~) of een andere map.

    cd ~
    

Git configureren

Als u nieuw bent in Git en GitHub, voert u eerst een paar opdrachten uit om uw identiteit te koppelen aan Git en te authenticeren bij GitHub. Zie Git-instellen voor meer informatie.

U moet minimaal de volgende stappen uitvoeren. Voer de opdrachten uit vanuit de geïntegreerde terminal.

  1. uw gebruikersnaam instellen.
  2. uw e-mailadres voor doorvoeren instellen.
  3. uw GitHub-wachtwoordcachen.

Notitie

Als u al tweeledige verificatie met GitHub gebruikt, een persoonlijk toegangstokenmaken. Wanneer u hierom wordt gevraagd, gebruikt u uw token in plaats van uw wachtwoord.

Behandel uw toegangstoken als een wachtwoord. Bewaar het op een veilige plek.

Uw project inrichten in Visual Studio Code

In het Toepassingen bouwen met Azure DevOps leertraject hebt u een Git-opslagplaats gesplitst en gekloond. De opslagplaats bevat de broncode voor de Space Game website. Uw fork is verbonden met uw projecten in Azure DevOps, zodat de build wordt uitgevoerd wanneer u wijzigingen naar GitHub pusht.

Belangrijk

In dit leertraject schakelen we over naar een andere Git-opslagplaats, mslearn-tailspin-spacegame-web-deploy. Toen u de sjabloon voor het instellen van uw Azure DevOps-project hebt uitgevoerd, heeft het proces de opslagplaats automatisch voor u geforkt.

In dit deel kloont u uw fork lokaal, zodat u de pijplijnconfiguratie kunt wijzigen en uitbouwen.

Uw fork lokaal klonen

U hebt nu een kopie van het Space Game-webproject in uw GitHub-account. U gaat nu een kopie naar uw computer downloaden of klonen, zodat u ermee kunt werken.

Een kloon, net als een fork, is een kopie van een opslagplaats. Wanneer u een opslagplaats kloont, kunt u wijzigingen aanbrengen, controleren of ze naar verwachting werken en deze wijzigingen vervolgens uploaden naar GitHub. U kunt uw lokale kopie ook synchroniseren met wijzigingen die andere geverifieerde gebruikers hebben aangebracht in de GitHub-kopie van uw opslagplaats.

Het Space Game-webproject klonen op uw computer:

  1. Ga naar uw fork van het Space Game-webproject (mslearn-tailspin-spacegame-web-deploy) op GitHub-.

  2. Selecteer Code. Selecteer vervolgens op het tabblad HTTPS de knop naast de URL die wordt weergegeven om de URL naar het klembord te kopiëren.

    Schermopname die laat zien hoe u de URL en kopieerknop kunt vinden vanuit de GitHub-opslagplaats.

  3. Ga in Visual Studio Code naar het terminalvenster.

  4. Ga in de terminal naar de map waar u wilt werken. Kies desgewenst uw basismap (~) of een andere map.

    cd ~
    
  5. Voer de opdracht git clone uit. Vervang de URL die hier wordt weergegeven door de inhoud van het Klembord:

    git clone https://github.com/your-name/mslearn-tailspin-spacegame-web-deploy.git
    
  6. Ga naar de map mslearn-tailspin-spacegame-web-deploy. Dit is de hoofdmap van uw opslagplaats.

    cd mslearn-tailspin-spacegame-web-deploy
    

Stel de upstream remote in

Een externe is een Git-opslagplaats waar teamleden samenwerken (zoals een opslagplaats op GitHub). Hier geeft u uw externen weer en voegt u een externe toe die verwijst naar de kopie van de opslagplaats van Microsoft, zodat u de meest recente voorbeeldcode kunt ophalen.

  1. Voer deze git remote opdracht uit om uw externe apparaten weer te geven:

    git remote -v
    

    U ziet dat u zowel download- als uploadtoegang tot uw opslagplaats hebt.

    origin  https://github.com/username/mslearn-tailspin-spacegame-web-deploy.git (fetch)
    origin  https://github.com/username/mslearn-tailspin-spacegame-web-deploy.git (push)
    

    Origin- geeft uw opslagplaats op GitHub op. Wanneer u code uit een andere opslagplaats forkt, wordt de oorspronkelijke externe opslagplaats (degene waaruit u hebt geforkt) vaak upstreamgenoemd.

  2. Voer deze git remote add opdracht uit om een externe upstream- te maken die verwijst naar de Microsoft-opslagplaats:

    git remote add upstream https://github.com/MicrosoftDocs/mslearn-tailspin-spacegame-web-deploy.git
    
  3. Voer git remote opnieuw uit om de wijzigingen te zien:

    git remote -v
    

    U ziet dat u nog steeds zowel toegang tot ophalen (downloaden) als pushtoegang (uploaden) tot uw opslagplaats hebt. U hebt nu ook toegang verkregen tot de Microsoft-repository.

    origin  https://github.com/username/mslearn-tailspin-spacegame-web-deploy.git (fetch)
    origin  https://github.com/username/mslearn-tailspin-spacegame-web-deploy.git (push)
    upstream        https://github.com/MicrosoftDocs/mslearn-tailspin-spacegame-web-deploy.git (fetch)
    

Het project openen in de verkenner

In Visual Studio Code verwijst uw terminalvenster naar de hoofdmap van het Space Game webproject. Als u de structuur wilt bekijken en met bestanden wilt werken, opent u het project vanuit de Verkenner.

  1. De eenvoudigste manier om het project te openen, is door Visual Studio Code opnieuw te openen in de huidige map. Voer hiervoor de volgende opdracht uit vanuit de geïntegreerde terminal:

    code -r .
    

    U ziet de map en de bestandsstructuur in de verkenner.

  2. Open de geïntegreerde terminal opnieuw. De terminal plaatst u in de hoofdmap van uw webproject.

Als de opdracht code mislukt, moet u Visual Studio Code toevoegen aan uw systeem-PAD. Ga hiervoor als volgt te werk:

  1. Selecteer in Visual Studio Code F1 of selecteer >Opdrachtpalet weergeven voor toegang tot het opdrachtenpalet.
  2. Voer in het opdrachtpalet Shell-opdracht in: installeer de opdracht 'code' in PATH.
  3. Herhaal de vorige procedure om het project te openen in de verkenner.

U bent nu ingesteld om te werken met de Space Game broncode en uw Azure Pipelines-configuratie vanuit uw lokale ontwikkelomgeving.

De Azure App Service-omgevingen maken

Hier maakt u de omgevingen die de pijplijnfasen definiëren. U maakt één App Service-exemplaar dat overeenkomt met elke fase: Dev, Testen Faserings-.

In eerdere modules hebt u de Azure CLI gebruikt om uw App Service-exemplaren te maken. Hier doe je hetzelfde.

Belangrijk

Houd er rekening mee dat u uw eigen Azure-abonnement nodig hebt om de oefeningen in deze module uit te voeren.

Open Cloud Shell via het Azure Portal

  1. Ga naar de Azure Portal en meld u aan.
  2. Selecteer in de menubalk Cloud Shell. Wanneer u hierom wordt gevraagd, selecteert u de Bash ervaring.

Een Azure-regio selecteren

Hier geeft u de standaardregio of geografische locatie op, waar uw Azure-resources moeten worden gemaakt.

  1. Voer in Cloud Shell de volgende az account list-locations opdracht uit om de regio's weer te geven die beschikbaar zijn vanuit uw Azure-abonnement.

    az account list-locations \
      --query "[].{Name: name, DisplayName: displayName}" \
      --output table
    
  2. Kies in de uitvoer een regio die zich dicht bij u bevindt uit de kolom Naam. Kies bijvoorbeeld eastasia of westus2.

  3. Voer az configure uit om uw standaardregio in te stellen. Vervang <REGION> door de naam van de regio die u hebt gekozen.

    az configure --defaults location=<REGION>
    

    Hier volgt een voorbeeld van het instellen van westus2 als de standaardregio:

    az configure --defaults location=westus2
    

De App Service-exemplaren maken

Hier maakt u de App Service-exemplaren voor de drie fasen die u gaat implementeren: Dev, Testen Fasering.

Notitie

Gebruik voor leerdoeleinden de standaardnetwerkinstellingen. Deze instellingen maken uw site toegankelijk vanaf internet. In de praktijk kunt u een virtueel Azure-netwerk configureren waarmee uw website in een netwerk wordt geplaatst dat niet routeerbaar is vanaf internet en die alleen toegankelijk is voor uw team. Wanneer u er later klaar voor bent, kunt u uw netwerk opnieuw configureren om de website beschikbaar te maken voor uw gebruikers.

  1. Genereer in Cloud Shell een willekeurig getal dat de domeinnaam van uw web-app uniek maakt.

    webappsuffix=$RANDOM
    
  2. Voer de volgende az group create opdracht uit om een resourcegroep te maken met de naam tailspin-space-game-rg.

    az group create --name tailspin-space-game-rg
    
  3. Voer de volgende az appservice plan create opdracht uit om een App Service-plan met de naam tailspin-space-game-asp-te maken.

    az appservice plan create \
      --name tailspin-space-game-asp \
      --resource-group tailspin-space-game-rg \
      --sku B1 \
      --is-linux
    

    Het argument --sku geeft het B1--plan op, dat wordt uitgevoerd op de Basic--laag. Het --is-linux-argument specificeert dat er gebruik moet worden gemaakt van Linux-werkers.

    Belangrijk

    Als de B1-SKU niet beschikbaar is als onderdeel van uw Azure-abonnement, kiest u een ander abonnement, zoals S1 (Standard).

  4. Voer de volgende az webapp create opdrachten uit om de drie App Service-exemplaren te maken, één voor elk van de Dev, Testen Fasering-omgevingen.

    az webapp create \
      --name tailspin-space-game-web-dev-$webappsuffix \
      --resource-group tailspin-space-game-rg \
      --plan tailspin-space-game-asp \
      --runtime "DOTNET|6.0"
    
    az webapp create \
      --name tailspin-space-game-web-test-$webappsuffix \
      --resource-group tailspin-space-game-rg \
      --plan tailspin-space-game-asp \
      --runtime "DOTNET|6.0"
    
    az webapp create \
      --name tailspin-space-game-web-staging-$webappsuffix \
      --resource-group tailspin-space-game-rg \
      --plan tailspin-space-game-asp \
      --runtime "DOTNET|6.0"
    

    Voor leerdoeleinden past u hier hetzelfde App Service-plan, B1 Basic, toe op elk App Service-exemplaar. In de praktijk wijst u een plan toe dat overeenkomt met uw verwachte workload.

  5. Voer de volgende az webapp list opdracht uit om de hostnaam en status van elk App Service-exemplaar weer te geven.

    az webapp list \
      --resource-group tailspin-space-game-rg \
      --query "[].{hostName: defaultHostName, state: state}" \
      --output table
    

    Noteer de hostnaam voor elke actieve service. U hebt deze hostnamen later nodig wanneer u uw werk verifieert. Hier volgt een voorbeeld:

    HostName                                                 State
    -------------------------------------------------------  -------
    tailspin-space-game-web-dev-21017.azurewebsites.net      Running
    tailspin-space-game-web-test-21017.azurewebsites.net     Running
    tailspin-space-game-web-staging-21017.azurewebsites.net  Running
    
  6. Als optionele stap gaat u naar een of meer van de vermelde namen om te controleren of deze worden uitgevoerd en of de standaardstartpagina wordt weergegeven.

    U ziet deze pagina:

    Schermopname van de standaardstartpagina in Azure App Service.

Belangrijk

De Uw Azure DevOps-omgeving opschonen pagina in deze module bevat belangrijke opschoonstappen. Opschonen zorgt ervoor dat er geen kosten in rekening worden gebracht voor Azure-resources nadat u deze module hebt voltooid. Zorg ervoor dat u de opschoonstappen volgt, zelfs als u deze module niet voltooit.

Pijplijnvariabelen maken in Azure Pipelines

In Functionele tests uitvoeren in Azure Pipelineshebt u één variabele toegevoegd voor elk van de App Service-exemplaren. De exemplaren komen overeen met de Dev, Testen Staging stadia in uw pijplijn. Hier volgt u hetzelfde patroon.

Elke fase in uw pijplijnconfiguratie maakt gebruik van de variabelen om te bepalen op welk App Service-exemplaar moet worden geïmplementeerd.

Ga als volgende te werk om de variabelen toe te voegen:

  1. Ga in Azure DevOps naar je Space Game - web - Niet-functionele testen project.

  2. Selecteer onder PijplijnenBibliotheek.

    Schermopname van Azure Pipelines, met de menuoptie Bibliotheek.

  3. Selecteer + Variabele groep.

  4. Voer voor de naam van de variabele groep onder EigenschappenReleasein.

  5. Selecteer onder Variabelende optie + Toevoegen.

  6. Voer voor de naam van de variabele WebAppNameDevin. Voer voor de waarde de naam in van het App Service-exemplaar dat overeenkomt met uw Dev-omgeving, zoals tailspin-space-game-web-dev-1234.

  7. Herhaal stap 5 en 6 nogmaals om variabelen te maken voor uw Test en faseringsomgevingen, zoals wordt weergegeven in deze tabel:

    Variabelenaam Voorbeeldwaarde
    WebAppNameTest tailspin-space-game-web-test-1234
    WebAppNameStaging tailspin-space-game-web-staging-1234

    Zorg ervoor dat u elke voorbeeldwaarde vervangt door het App Service-exemplaar dat overeenkomt met uw omgeving.

    Belangrijk

    Zorg ervoor dat u de naam van het App Service-exemplaar instelt, niet de hostnaam. In dit voorbeeld voert u tailspin-space-game-web-dev-1234 in en niet tailspin-space-game-web-dev-1234.azurewebsites.net.

  8. Als u de variabele wilt opslaan in de pijplijn, selecteert u Opslaan boven aan de pagina.

    Uw variabelegroep ziet er ongeveer als volgt uit:

    schermopname van Azure Pipelines, met de variabelegroep. De groep bevat drie variabelen.

De ontwikkel-, test- en faseringsomgevingen maken

In Functionele tests uitvoeren in Azure Pipelineshebt u omgevingen gemaakt voor de dev, testen stagingomgevingen. Hier herhaalt u het proces.

Om de dev-, test- en staging-omgevingen te creëren:

  1. Vanuit Azure Pipelines selecteer je Omgevingen.

    Schermopname van Azure Pipelines met de locatie van de menuoptie Omgevingen.

  2. De dev-omgeving maken:

    1. Selecteer Maak omgeving.
    2. Voer onder Naamdevin.
    3. Laat de resterende velden op de standaardwaarden staan.
    4. Selecteer maken.
  3. Om de testomgeving te maken:

    1. Ga terug naar de pagina Omgevingen .
    2. Selecteer Nieuwe omgeving.
    3. Voer onder Naamtestin.
    4. Selecteer Maak.
  4. Om de faseringsomgeving te maken:

    1. Retourneer naar de pagina Omgevingen.
    2. Selecteer Nieuwe omgeving.
    3. Voer onder Naam, stagingin.
    4. Selecteer Maak.

Een serviceverbinding maken

Hier maakt u een serviceverbinding waarmee Azure Pipelines toegang heeft tot uw Azure-abonnement. Azure Pipelines maakt gebruik van deze serviceverbinding om de website te implementeren in App Service. U hebt in de vorige module een vergelijkbare serviceverbinding gemaakt.

Belangrijk

Zorg ervoor dat u bent aangemeld bij zowel Azure Portal als Azure DevOps onder hetzelfde Microsoft-account.

  1. Ga in Azure DevOps naar uw Space Game - web - Niet-functionele tests project.

  2. Selecteer in de rechterbenedenhoek van de pagina Project-instellingen.

  3. Selecteer onder Pipelinesde optie Service-verbindingen.

  4. Selecteer nieuwe serviceverbindingen kies vervolgens Azure Resource Manager-en selecteer vervolgens Volgende.

  5. Boven aan de pagina service-principal (automatisch). Selecteer vervolgens Volgende.

  6. Vul deze velden in:

    Veld Waarde
    Bereikniveau Abonnement
    Abonnement Uw Azure-abonnement
    Resourcegroep tailspin-space-game-rg-
    Serviceverbindingsnaam Resource Manager - Tailspin - Space Game

    Tijdens het proces wordt u mogelijk gevraagd u aan te melden bij uw Microsoft-account.

  7. Zorg ervoor dat Toegangsmachtigingen verlenen aan alle pijplijnen is geselecteerd.

  8. Selecteer opslaan.

    Azure DevOps voert een testverbinding uit om te controleren of deze verbinding kan maken met uw Azure-abonnement. Als Azure DevOps geen verbinding kan maken, kunt u zich een tweede keer aanmelden.