Microsoft Azure For Spoiled People 2: Deploy your App using Azure Pipelines

#javascript #beginners #vue #devops

There's something in my last post that doesn't sit quite right either with me, or with folks used to deploying Vue.js apps to other services. That's the idea that you should upload your built assets to a server, after which time they are picked up and moved to prod.

A much better way is to use built-in systems that will pick up changes to your code from GitHub, build them according to the scripts in your package.json file, and deploy them seamlessly so that your web site is refreshed without needing to mess with your .gitignore file.

With Azure Pipelines, you can! Pipelines offer a way to automate your build and release processes with customizable steps.

Here's how I edited the very basic Vue.js app that I managed to deploy according to my last post.

Get ready for your first pipeline

In preparation for this work, you can undo some of the weird things I had you do earlier.

First, remove /dist from your .gitignore file so it will stop being sent to GitHub. That's icky. Commit those changes.

Next, create a new file in your codebase root called azure-pipelines.yml. In that file, add this code:

trigger:
- master

pool:
  vmImage: 'ubuntu-latest'

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '10.x'
  displayName: 'Install Node.js'

- script: |
    npm install
    npm run build
  displayName: 'npm install and build'

- task: PublishBuildArtifacts@1
  inputs:
    artifactName: dist
    pathtoPublish: 'dist'

You'll find that this is a standard YAML file used by most node apps that make use of Azure Pipelines. It's delineating the steps to build an 'artifact', or a group of publishable files, and then actually publishing them. Commit that to your GitHub repo.

Get set up to Build on Azure DevOps

Not many frontend developers are comfortable doing DevOps. It's scarier than Oracle Stored Procedures to many of us! You can seriously MESS THINGS UP mucking around with this stuff. Fortunately, Azure DevOps offers a somewhat straightforward way of getting your head around the tasks that those crazy DevOps people do all the time.

So go ahead and create an account for yourself on Azure DevOps. You can get quite a lot done on the free tier: check out the pricing page for more information.

Once you're signed in, create a new project. In that project, you'll see several options. Azure DevOps has an area for project management, and under that, you'll find the pipelines area.

Create a new pipeline and connect it to your GitHub code that you set up for your Vue project.
The pipeline wizard will find your project's .yml file that you created earlier. Give it a quick check to make sure it looks right.
Click 'run' - and watch your build start up! You can watch the processes start in realtime. The important steps to monitor is the npm install and build process. A dist folder should be created and published.

If all goes well, you'll get an email saying your build succeeded and it will show 'green' in the Build panel:

Great! Your site has been built in the cloud! ⛅️ You can verify that everything is good by visiting the build logs and clicking the blue Artifacts button: it shows that a dist folder was built.

Last step: Release!

You might think you're all done, but you'd be wrong. There's one more thing to do, and that is to release the assets you just built. Here's how.

On the left nav, click 'Releases' and create a new Release pipeline.
You're presented with a LOT of options on different types of releases. Choose the first one, to build a web app from App Services.

Then, click on the 'Add an Artifact' button to add the artifacts that your previous process built:

Next, go to the Stages area and click the Stage button. You need to do some important edits here. Click into the Tasks tab in this area and change the Release parameters to include your Azure subscription and App service name. Click Save!

Then, click the Deploy Azure App Service button on this page. There are some important tweaks to make here. Go to the Package or folder textbox and click the small button on the right to specify which folder to release. You need to specify dist:

Make sure to click Save to save your Release preferences. Click 'Create release' to test your pipeline.

Test your work by returning to the Build area and clicking 'Queue' to queue up a build and release.

If your GitHub change triggers a build, but not a release, make sure that the little 'lightning' icon is clicked on the release, to ensure continuous integration:

The pipeline should also be triggered when changes are made to the code. Test that, too, by committing a change to GitHub.

Azure pipelines are tiring. I need a nap. But now that our builds are succeeding and we have true continuous deployments without chicanery, we can rest a little until the next post in this series, when we'll add a database to our app!