Exercise - Set up your environment

Completed

The team has been slowly integrating a DevOps strategy into their processes. In this section, you make sure that your environment reflects the team's efforts so far.

To do this, you:

  • Add a user to ensure Azure DevOps can connect to your Azure subscription.
  • Set up an Azure DevOps project for this module.
  • Add the build pipeline.

Add a user to Azure DevOps

To complete this module, you need your own Azure subscription. You can get started with Azure for free.

Although you don't need a subscription to use Azure DevOps to work in it, here you'll use Azure DevOps to deploy to Azure resources that exist in your Azure subscription. To simplify the process, sign in to both your Azure subscription and your Azure DevOps organization under the same Microsoft account.

If you use different Microsoft accounts to sign in to Azure and Azure DevOps, add a user to your DevOps organization under the Microsoft account you use to sign in to Azure. For more information, see Add users to your organization or project. When you add the user, choose the Basic access level.

Then sign out of Azure DevOps and sign in again under the Microsoft account you use to sign in to your Azure subscription.

Get the Azure DevOps project

Make sure your Azure DevOps organization is set up to complete the rest of this module. You do this by running a template that creates a project for you in Azure DevOps.

The modules in this learning path form a progression as you follow the Tailspin web team through their DevOps journey. For learning purposes, each module has an associated Azure DevOps project.

Run the template

Run a template that sets up everything for you in your Azure DevOps organization.

From the Azure DevOps Demo Generator site, follow these steps to run the template:

  1. Select Sign In and accept the usage terms.

  2. From the Create New Project page, select your Azure DevOps organization and enter a project name, such as Space Game - web - Release.

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

  3. Select Yes, I want to fork this repository > Authorize. If a window appears, authorize access to your GitHub account.

    Important

    You need to select this option so the template will connect to your GitHub repository. Select it even if you've already forked the Space Game website project. The template uses your existing fork.

  4. Select Create Project. The template takes a few moments to run.

  5. Select Navigate to project to go to your project in Azure DevOps.

Important

The Clean up your Azure DevOps environment page in this module contains important cleanup steps. Cleaning up helps ensure that you don't run out of free build minutes. Be sure to perform the cleanup steps even if you don't complete this module.

Set your project's visibility

Your fork of the Space Game repository on GitHub is initially public. The Azure DevOps template creates a project that's initially private.

A public GitHub repository is accessible to everyone, whereas a private repository is accessible to you and the people you share it with. In both cases, only collaborators can commit changes to a GitHub repository.

A project on Azure DevOps works the same way. Users who aren't signed in to the service have read-only access to public projects. Private projects require users to be granted access to the project and signed in to access the services.

For learning purposes, you don't need to change any of these settings right now. But for your own projects, you need to decide what visibility and access you want to provide to others. For example, if your project is open source, you might make both your GitHub repository and your Azure DevOps project public. If your project is closed source, you would likely make both your GitHub repository and your Azure DevOps project private.

Later, you can use these resources to help you decide which option is best for your project:

Prepare Visual Studio Code

Set up Visual Studio Code so you can build the website locally and use the source files.

Visual Studio Code comes with an integrated terminal so you can edit files and work from the command line, all from one place.

  1. Start Visual Studio Code.

  2. Select Terminal, and then select New Terminal.

  3. In the dropdown list, select Git bash. If you're familiar with another Unix shell that you prefer to use, such as Zsh, select that shell instead. Git for Windows provides Git Bash, which makes it easy to run Git commands.

    Note

    On Windows, if you don't see Git bash listed as an option, make sure you've installed Git and then restart Visual Studio Code.

  4. Run the following command to navigate to your home directory.

    cd ~
    

Configure Git

If you're new to Git and GitHub, you'll first need to run a few commands to associate your identity with Git and authenticate with GitHub. For more information, see Set up Git.

At a minimum, you'll need to complete the following steps:

  1. Download and install the latest version of Git.
  2. Set your username.
  3. Set your commit email address.

Note

If you're already using two-factor authentication with GitHub, create a personal access token. Use your token in place of your password when you're prompted later.

Treat your access token like you would treat a password. Keep it in a safe place.

Set up your project in Visual Studio Code

When you ran the template to set up your Azure DevOps project, the process forked the mslearn-tailspin-spacegame-web-deploy repository automatically for you. Now you'll download, or clone, a copy to your computer so you can work with it.

Clone your fork locally

  1. On GitHub, go to your fork of the Space Game web project (mslearn-tailspin-spacegame-web-deploy).

  2. Select Code, and then, from the HTTPS tab, select the copy button to copy the URL to your clipboard.

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

  3. In Visual Studio Code, go to the terminal window you opened earlier.

  4. Run the git clone command. Replace the URL that's shown here with the contents of your clipboard:

    git clone https://github.com/your-name/mslearn-tailspin-spacegame-web-deploy.git
    
  5. Move to the mslearn-tailspin-spacegame-web-deploy directory. This directory is the root of your repository.

    cd mslearn-tailspin-spacegame-web-deploy
    

Set the upstream remote

A remote is a Git repository where team members collaborate (like a repository on GitHub). Here you list your remotes and add a remote that points to Microsoft's copy of the repository so that you can get the latest sample code.

  1. Run the following command to list your remotes:

    git remote -v
    

    You see that you have both fetch (download) and push (upload) access to your 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)
    

    Origin specifies your repository on GitHub. When you fork code from another repository, the original remote (the one you forked from) is commonly named upstream.

  2. Run the following command to create a remote named upstream that points to the Microsoft repository:

    git remote add upstream https://github.com/MicrosoftDocs/mslearn-tailspin-spacegame-web-deploy.git
    
  3. Run git remote a second time to see the changes:

    git remote -v
    

    You see that you still have both fetch (download) and push (upload) access to your repository. You also now have fetch access from the 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)
    upstream        https://github.com/MicrosoftDocs/mslearn-tailspin-spacegame-web-deploy.git (push)
    

Open the project in Visual Studio Code

  1. Run the following command from the root directory of your project.

    code .
    
  2. Reopen the integrated terminal. The terminal places you at the root of your web project.

If the code command fails, you need to add Visual Studio Code to your system PATH. To do so:

  1. In Visual Studio Code, select F1 or select View > Command Palette to access the command palette.
  2. Type shell command and find the Shell Command: Install 'code' command in PATH command.
  3. Restart the terminal for the new PATH to take effect.

You're now set up to work with the Space Game source code and your Azure Pipelines configuration from your local development environment.

Fetch the branch from GitHub

  1. In Visual Studio Code, open the integrated terminal.

  2. Run the following commands to fetch the release-pipeline branch from the MicrosoftDocs repository, and check out a new branch upstream/release-pipeline.

    git fetch upstream release-pipeline
    git checkout -B release-pipeline upstream/release-pipeline
    
  3. As an optional step, in Visual Studio Code, open the azure-pipelines.yml file and familiarize yourself with the initial YAML pipeline configuration.

Run the pipeline

At this point, you have:

  • A fork of the mslearn-tailspin-spacegame-web-deploy repository in your GitHub account.
  • The mslearn-tailspin-spacegame-web-deploy repository cloned locally.
  • A branch named release-pipeline that contains the web site source code and an initial Azure Pipelines configuration.

Next, you'll manually trigger the pipeline to run. This step ensures that your project is set up to build from your GitHub repository. The initial pipeline configuration builds the application and produces a builds artifact.

  1. Navigate to your project in Azure Devops, and then select Pipelines.

  2. Select the mslearn-tailspin-spacegame-web-deploy pipeline. If prompted, make sure you select Authorize resources to authorize the service connection.

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

  3. Select Run pipeline, and then select the release-pipeline branch from the Branch/tag dropdown menu. Select Run when you are done.

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

  4. In the Summary page, select your pipeline job to view the logs.

    Screenshot of Azure Pipelines showing the running job.

  5. After the build finishes, select the back button to return to the summary page.

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

  6. Select your published artifact.

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

  7. The Tailspin.Space.Game.Web.zip is your build artifact. This file contains your built application and its dependencies.

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

You now have a build pipeline for the Space Game web project. Next you will add a deployment stage to deploy your build artifact to Azure App Service.