Deploy to Azure Storage using VSTS

In this section, you will use Visual Studio Team Services (VSTS) to host and publish your application to Azure Storage. This is split into the following steps:

  1. Create a VSTS project.
  2. Push your app to the project repository.
  3. Create a CI (continuous integration) build/deploy pipeline.
  4. Use CI to build and publish your site on Azure Storage.

Prerequisites

VSTS account - If you don't have an account, you can sign up here.

Git - We will use Git to push our code to our VSTS project. Install Git from git-scm.com

Create a VSTS project

  1. Login to your VSTS profile.

  2. Select an account.

    Select account

  3. Click New Project under the Projects tab.

    New project

  4. Fill in your project details and click Create.

    New project details

Push app to VSTS project repository

  1. Expand the push an existing repository from command line section and copy the push commands.

    Copy push commands

  2. Open a terminal at the root of the project we generated (or your own project). Now initialize a Git repository and make an initial commit.

    git init  # create a git repository
    git add -A  # recursively add all files in current directory
    git commit -m "initial commit"  # commit changes with supplied message
    
  3. Paste the push commands to add the VSTS repository as a remote location and push your code to your VSTS repo.

    git remote add origin https://<your-VSTS-account>.visualstudio.com/DefaultCollection/_git/<project-name>
    git push -u origin --all
    

After running git push, you should be able to refresh your VSTS project page and see your code!

Project imported

Create a build/deploy pipeline

  1. Click Build and Release > Builds from the top menu bar on the project home page.

    Select build definitions

  2. Click the Import button in the top right and upload this build definition template.

    Import build

  3. A few settings will be missing that you must fill in on your own:

    • In the Process section, select Hosted Linux Preview from the Agent queue drop down.
    • Click on the Get sources section and let it update to automatically resolve the errors.
    • Click on the Azure CLI section, select and authorize your Azure subscription, and then input the container we created earlier in place of and in the Inline Script box.

    You can find the connection string in Azure Portal under the Access Keys section after selecting your storage account.

Warning: Make sure you keep single quotes around the connection-string argument.

When done, your AzureBlob File Copy settings should look like this:

Build definition

Use CI to build and publish

  1. Click Save & queue in the top right, then click Save & queue again with the default options in the following pop-up.

    This will save this build definition and run it immediately with whatever is currently checked into your master branch.

  2. A green success banner will pop-up at the top of your screen.

    Clicking the hyperlinked number will take you to the current build.

    Build queued

  3. Your build will wait in a queue and then a build agent will execute the steps we just configured.

    This may take a few minutes. If there are multiple builds in the queue, you may need to wait for your turn.

  4. If everything completes successfully, you will see a green success message along with the details of the build.

    At this point, your app should be deployed and publicly available in your blob storage.

  5. Navigate to your app entry point in a browser.

    It should look something like this https://<storage-account-name>.blob.core.windows.net/<container-name>/index.html

If everything is working, you should see the following!

Sign into Storage Explorer


My site is on Azure