Implement a static Vue app and deploy it on Azure using CI/CD. Part 2, Continuous Delivery

In the previous article we focused on building the Continuous Integration Pipeline of our hello-world Vue app.

In Part 2 we are going to do the steps for deploying the result of the CI Pipeline to Azure. From there our static website is going to be visible to the rest of the world.

Here are the steps you will have to take:

• Create a new Storage Account in Azure and choose the StorageV2 option, since only this version can serve a Static website.

• After the Storage Account is created, activate the Static website option. The URL you see is the entry point to your Static website. The contents of your website are going to be stored inside a folder named $web. This folder will be automatically created the first time the app is deployed to Azure:

  

• We return to Azure DevOps and we open the Project Settings of our project. We then navigate to the Service connections option and we add a new Service connection.

  We select the Service principal (automatic) option and we pick a Subscription and a Resource group. We also give a name and a description to our connection. We now have “wired” our app to Azure:

  

• We are now ready to create a new Release in Azure DevOps. Click on the Releases option and then on New Release pipeline. Select the Build we created in Part 1 of these articles:

  

• We add a new Task into the Release. We select the Empty Job option:

  

• We create a new Azure file copy task:

  

• We edit this task like in the image below. The name of the folder is $web and the Task version must be 4.*:

  

• The last step in Azure DevOps is to activate the trigger for running the Release, every time we build our project:

  

• Last but not least, we return to Azure for one final configuration. I am not 100% sure about this change, but it was the only way to get this thing up and running. Go to the Resource Group settings and select the Access control page. Add a new Contributor role and link it to the new Azure DevOps app:

  

I hope these steps are going to make the CI/CD process easier for you.