Angular app deployment onto Static Website BLOB with Azure DevOps pipeline using Bitbucket (1/2)
I got some chance to use Azure DevOps to deploy our Angular application to Azure BLOB storage, which is called “Static Website”. Hopefully saying, it is better to use the Cloud native architecture when we conduct some light PoC or something like that. However, in some cases as well as mine, such a first-to-use functionality is hard to use because of its characteristics and less information, especially in Azure.
Actually, we had been struggling with this deployment for 2 weeks(Of course, we had a lot of tasks in parallel…), so let me introduce what we did for success.
0. Prepare your Angular application in your repository
- Create Organization in the Azure DevOps
As you know, the first step is pretty easy. Go to the Azure portal, and select the “Azure DevOps organization” like below. Then, clicking the “New organization”, name your organization name accordingly.
2. Create the pipeline for build
After creating your organization, you can see the image like below, so please click “Pipelines” and create you “New pipeline”.
I’m using Other Git to retrieve the source code, so I chose “Other Git”.
Like below, we need to choose our service connection to access to our Git repository, so please define the service connection beforehand as below image.
Click the “Project settings”, and create your connection accordingly by entering your credentials.
Then, coming back to the pipeline creation screen, choose the “Empty job” below. I think this is very simple way to create our pipeline.
Finally, you can see this kind of image. Please set up the pipeline configuration step by step.
First of all, configure the basic information for the environment. In this image, please put your pipeline name and choose the specification. I recommend you to use ubuntu, because I am just more familiar with Linux.
Choose your service connection as you defined.
And then, configure the each job like below. If you click the plus(+) button, you can see various kinds of tasks in the right box.
These are what I created for build pipeline. Let me explain them one by one.
(Please ignore the “Command Line Script”. This is used for confirming where I am during the build)
First of all, we need Node.js for build, so I used the “Use Node xx.x”. Please update the Node.js version based on your preference.
The second step enable us to install Angular CLI. I chose “npm” task from the task list after clicking + button as I mentioned above. Then update the configuration like below.
Next, I used npm install task. Basically, the setting is default. See below.
Then, I used “ng build” task to build my source code coming from repository. The setting is also default.
Next step is for copying the artifact from its agent local environment to the staging directory. In my case, the local target directory for build is “www”, so I put the path like “$(Build.SourcesDirectory)/www”. If your target is like “dist”, please change it like “$(Build.SourcesDirectory)/dist”.
And then, please put the directory path which was specified in the previous step. By doing this step, we can go to the release pipeline.
I’ll create another article for release pipeline.