Jenkins CI/CD To Deploy Angular Application On Azure Storage

This tutorial deploys a Simple Angular web application from Bitbucket /Bitbucket on Azure Storage by setting up continuous integration and continuous deployment using Jenkins.

In my case, I am using Bitbucket.

In this tutorial, you’ll complete five tasks:

• Install Jenkins plug-ins so you can build from Bitbucket, deploy to Azure Storage.
• Fork the sample Bitbucketrepo so you have a working copy.
• Configure multiple branches for deployment on different Storages.
• Create the Jenkins pipeline that builds and deploys the sample app each time you update the app in Bitbucket.
• Push an app update in Bitbucket, which triggers Jenkins to build and redeploy to Azure.
• If you don’t have an Azure subscription, create a free account before you begin.

Prerequisites

To complete this tutorial, you need these items:

• A Jenkins server. (You can install locally or any server AWS/Azure).
• A Bitbucket account so you can get a working copy (fork) for the sample Angular app.
• Azure account for Azure storage service.

Install Jenkins Plug-Ins

1. Sign in to your Jenkins web console.
2. On the Jenkins main page, select Manage Jenkins > Manage Plugins.

On the Available tab, select these plug-ins:

• Windows Azure Storage plugin (For azure service using, will need for Azure CLI)
• Git (For git)
• Bitbucket plugin (Connect Bitbucket)

To install your selected plug-ins, select Download now and install after restart.

After you’re done, on the Jenkins menu, select Manage Jenkins so that you return to the Jenkins management page for future steps.

Create Azure Storage SAS Key

• Before moving to Jenkins setup you need SAS key to communicate with Jenkins. For creating SAS key goto Azure
• Create a Resource

• Search for Storage Account and create one. (For better practice and free tier you can follow any Microsoft documentation for creating Storage account.)
• Once the Storage account is created just simply go to Shared access signature -> Give permissions and create a SAS key, Once created just copy the Blob service SAS URL as this will need for future purpose.

• Now you need to enable the static website for that Search for Static Website and enabled that.
• Now you will find the Endpoints/web URL as well as you need to add index.html and error.html file name. (In my case index.html and error.html are same so I kept the same name.)

Create A Jenkins Pipeline

In Jenkins, create the pipeline job for building and deploying your app.

• Return to your Jenkins home page, and select New Item.

• Provide a name for your freestyle job, for example, “My-Angular-App”, and select Freestyle project, select OK.

• Now set up Jenkins as following
• General: Add Just description for your project.

• Source code management: Add Bitbucketrepository URL. Also, select the branch to which you want to configure your deployment. Even you can configure multiple branches for multiple Storages. In my case, I have added development and staging.

Note: For credentials, you can add your username and password of the Bitbucket account or you can use SSH authentication in case if you don’t want to share credentials.

• Build Triggers: In build triggers just select Build when a change is pushed to BitBucket.
• Build Environment: Check Delete workspace before build starts for better practice.
• Build: Now in the build section select Execute Shell and use the below code for the building project and deployment.
• Now use the below script for deployment, here you’ll need the SAS key which was created previously.

#!/bin/bash
echo "${GIT_BRANCH}"
BRANCH_NAME=${GIT_BRANCH}
echo "$BRANCH_NAME"
echo "installing..."
npm install || exit 1

if [ "$BRANCH_NAME" == "origin/development" ]
then
echo "building development..."
ng build || exit 1
ls
sudo azcopy copy 'dist/**' '<SAS URL DEV>/$web?<REST QUERY PARAMS>' --recursive
fi

if [ "$BRANCH_NAME" == "origin/staging" ]
then
echo "building staging..."
ng build --configuration=staging || exit 1
ls
sudo azcopy copy 'dist/**' '<SAS URL STAGING>/$web?<REST QUERY PARAMS>' --recursive
fi

Above Script Explanation:

• echo “${GIT_BRANCH}” : To print branch name for verification.
• BRANCH_NAME=${GIT_BRANCH} : Assign branch name to the temp key
• npm install || exit 1 : Install npm
• if [ “$BRANCH_NAME” == “origin/development” ]
  then
  echo “building development…”
  ng build || exit 1
  ls
  Check the committed branch and then build the app.
• sudo azcopy copy ‘dist/**’ ‘<SAS URL DEV>/$web?<REST QUERY PARAMS>’ –recursive : Move to build in the container.

Note:

1. You will need to install npm on the server where your Jenkins setup is installed
2. You need to add a container name i.e. $web in the SAS URL after the end on the endpoint URL as default container get created as $web when you enabled static website on Azure storage account.

Here, so we have configured everything whatever we needed. You want to configure Post-build actions you can do that like notifications and all.

Now we are good to go, Just commit on your branch and your Angular project will get deployment on Azure storage.

If you encounter any issues with the above process you can write it down in the comment section, I would love to help you guys.