Oefening: uw omgeving instellen

  • 15 minuten

Het team integreert langzaam een DevOps-strategie in hun processen. In deze sectie zorgt u ervoor dat uw omgeving de inspanningen van het team tot nu toe weerspiegelt.

U doet dit als volgt:

  • 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.
  • Voeg de build-pijplijn toe.

Een gebruiker toevoegen aan Azure DevOps

U hebt uw eigen Azure-abonnement nodig om deze module te voltooien. U kunt gratis aan de slag met Azure.

Hoewel u geen abonnement nodig hebt om Azure DevOps te gebruiken om hierin te werken, gebruikt u hier Azure DevOps om te implementeren in Azure-resources die aanwezig zijn in uw Azure-abonnement. Om het proces te vereenvoudigen, meldt u zich aan bij zowel uw Azure-abonnement als uw Azure DevOps-organisatie onder hetzelfde Microsoft-account.

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 dat u gebruikt om u aan te melden bij Azure. Zie Organisatiegebruikers toevoegen en toegang beheren voor meer informatie. Wanneer u de gebruiker toevoegt, kiest u het toegangsniveau Basic .

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

Zorg ervoor dat uw Azure DevOps-organisatie is ingesteld om de rest van deze module te voltooien. U doet dit door een sjabloon uit te voeren waarmee een project voor u wordt gemaakt in Azure DevOps.

De modules in dit leertraject vormen een voortgang terwijl u het Tailspin-webteam volgt via hun DevOps-traject. Voor leerdoeleinden heeft elke module een gekoppeld Azure DevOps-project.

De sjabloon uitvoeren

Een sjabloon uitvoeren waarmee alles in uw Azure DevOps-organisatie voor u wordt ingesteld.

De sjabloon uitvoeren

Voer op de site Azure DevOps Demo Generator de volgende stappen uit 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 - Release.

    Screenshot of the Azure DevOps Demo Generator web site showing the process to create the project.

  3. Selecteer Ja, ik wil deze opslagplaats>autoriseren. Als er een venster verschijnt, keurt u toegang tot uw GitHub-account goed.

    Belangrijk

    U moet deze optie selecteren, zodat de sjabloon verbinding maakt met uw GitHub-opslagplaats. Selecteer deze zelfs als u het Space Game-websiteproject al hebt gesplitst. De sjabloon maakt gebruik van de bestaande fork.

  4. Selecteer Project maken. Het duurt even voordat de sjabloon wordt uitgevoerd.

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

Belangrijk

De pagina De Azure DevOps-omgeving opschonen in deze module bevat belangrijke opschoonstappen. Door op te schonen bent u ervan verzekerd dat u voldoende gratis buildminuten overhoudt. Voer de opschoonstappen ook uit 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-lezentoegang tot niet-geverifieerde gebruikers, terwijl voor privéprojecten gebruikers toegang moeten worden verleend en geverifieerd voor toegang tot de services.

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:

Visual Studio Code voorbereiden

Stel Visual Studio Code in, zodat u de website lokaal kunt bouwen en de bronbestanden kunt gebruiken.

Visual Studio Code wordt geleverd met een geïntegreerde terminal, zodat u bestanden kunt bewerken en vanaf de opdrachtregel kunt werken, allemaal vanaf één locatie.

  1. Visual Studio Code starten.

  2. Selecteer Terminal en selecteer vervolgens Nieuwe terminal.

  3. Selecteer Git bash in de vervolgkeuzelijst. Als u bekend bent met een andere Unix-shell die u liever gebruikt, zoals Zsh, selecteert u die shell. Git voor Windows biedt Git Bash, waarmee u eenvoudig Git-opdrachten kunt uitvoeren.

    Notitie

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

  4. Voer de volgende opdracht uit om naar uw basismap te navigeren.

    cd ~

Git configureren

Als u niet eerder met Git en GitHub werkt, moet u eerst een paar opdrachten uitvoeren om uw identiteit te koppelen aan Git en te verifiëren met GitHub. Zie Git instellen voor meer informatie.

U moet minimaal de volgende stappen uitvoeren:

  1. Download en installeer de nieuwste versie van Git.
  2. Stel uw gebruikersnaam in.
  3. Stel uw e-mailadres voor doorvoeren in.

Notitie

Als u al tweeledige verificatie gebruikt met GitHub, maakt u een persoonlijk toegangstoken. Gebruik uw token in plaats van uw wachtwoord wanneer u hier later om wordt gevraagd.

Behandel uw toegangstoken zoals u een wachtwoord zou behandelen. Bewaar het op een veilige plek.

Uw project instellen in Visual Studio Code

Toen u de sjabloon voor het instellen van uw Azure DevOps-project hebt uitgevoerd, heeft het proces de opslagplaats mslearn-tailspin-spacegame-web-deploy automatisch voor u gesplitst. Nu downloadt of kloont u een kopie naar uw computer, zodat u ermee kunt werken.

Uw fork lokaal klonen

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

  2. Selecteer Code en selecteer vervolgens op het tabblad HTTPS de knop Kopiëren om de URL naar het Klembord te kopiëren.

    Screenshot that shows how to locate the URL and copy button from the GitHub repository.

  3. Ga in Visual Studio Code naar het terminalvenster dat u eerder hebt geopend.

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

  5. Ga naar de map mslearn-tailspin-spacegame-web-deploy . Deze map is de hoofdmap van uw opslagplaats.

    cd mslearn-tailspin-spacegame-web-deploy

De upstream remote instellen

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 de volgende opdracht uit om uw externe apparaten weer te geven:

    git remote -v

    U ziet dat u zowel toegang hebt opgehaald (downloaden) als pushen (uploaden) tot uw opslagplaats:

    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 aan. Wanneer u code van een andere opslagplaats versplitst, wordt de oorspronkelijke externe versie (de versie waaruit u hebt gesplitst) meestal upstream genoemd.

  2. Voer de volgende 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 een tweede keer uit om de wijzigingen te bekijken:

    git remote -v

    U ziet dat u nog steeds toegang hebt tot zowel ophalen (downloaden) als pushen (uploaden) tot uw opslagplaats. U hebt nu ook toegang opgehaald uit de Microsoft-opslagplaats:

    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)
upstream        https://github.com/MicrosoftDocs/mslearn-tailspin-spacegame-web-deploy.git (push)

Het project openen in Visual Studio Code

  1. Voer de volgende opdracht uit vanuit de hoofdmap van uw project.

    code .

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

Als de code opdracht mislukt, moet u Visual Studio Code toevoegen aan uw systeemPAD. Hiervoor doet u het volgende:

  1. Selecteer in Visual Studio Code F1 of selecteer Opdrachtpalet weergeven>om het opdrachtenpalet te openen.
  2. Typ de shell-opdracht en zoek de Shell-opdracht: installeer de opdracht 'code' in de opdracht PATH .
  3. Start de terminal opnieuw zodat het nieuwe PAD van kracht wordt.

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

De branch ophalen vanuit GitHub

  1. Open in Visual Studio Code de geïntegreerde terminal.

  2. Voer de volgende opdrachten uit om de release-pipeline-vertakking op te halen uit de MicrosoftDocs-opslagplaats en bekijk een nieuwe vertakking upstream/release-pipeline.

    git fetch upstream release-pipeline
git checkout -B release-pipeline upstream/release-pipeline

  3. Als optionele stap opent u in Visual Studio Code het azure-pipelines.yml-bestand en maakt u vertrouwd met de eerste YAML-pijplijnconfiguratie.

De pijplijn uitvoeren

U hebt nu het volgende:

  • Een fork van de opslagplaats mslearn-tailspin-spacegame-web-deploy in uw GitHub-account.
  • De opslagplaats mslearn-tailspin-spacegame-web-deploy is lokaal gekloond.
  • Een vertakking met de naam release-pipeline die de broncode van de website en een initiële Azure Pipelines-configuratie bevat.

Vervolgens activeert u de pijplijn handmatig om uit te voeren. Deze stap zorgt ervoor dat uw project is ingesteld om te bouwen vanuit uw GitHub-opslagplaats. De eerste pijplijnconfiguratie bouwt de toepassing en produceert een builds-artefact.

  1. Navigeer naar uw project in Azure Devops en selecteer Vervolgens Pijplijnen.

  2. Selecteer de pijplijn mslearn-tailspin-spacegame-web-deploy . Als u hierom wordt gevraagd, selecteert u Resources autoriseren om de serviceverbinding te autoriseren.

    Screenshot of Azure Pipelines showing the pipeline for this project. The pipeline has no runs.

  3. Selecteer Pijplijn uitvoeren en selecteer vervolgens de release-pipeline-vertakking in de vervolgkeuzelijst Branch/tag . Selecteer Uitvoeren.

    Screenshot of Azure Pipelines showing the location of the Run pipeline button.

  4. Selecteer uw pijplijntaak op de pagina Samenvatting om de logboeken weer te geven.

    Screenshot of Azure Pipelines showing the running job.

  5. Nadat de build is voltooid, selecteert u de knop Terug om terug te keren naar de overzichtspagina.

    Screenshot of Azure Pipelines showing how to navigate to the summary page.

  6. Selecteer uw gepubliceerde artefact.

    Screenshot of Azure Pipelines showing the location of the link to the published artifact.

  7. Het Tailspin.Space.Game.Web.zip is uw buildartefact. Dit bestand bevat uw ingebouwde toepassing en de bijbehorende afhankelijkheden.

    Screenshot of Azure Pipelines showing the published artifact. The artifact includes a .zip file.

U hebt nu een build-pijplijn voor het Space Game-webproject. Vervolgens voegt u een implementatiefase toe om uw buildartefact te implementeren in Azure-app Service.