Angular App Azure Deployment | Azure Devops | Azure Static Web Hosting
Angular App Azure Deployment | Azure Devops | Azure Static Web Hosting
In this demo, I have shown deploying angular application to azure storage account which has static web hosting enabled. Angular App Azure Storage account deployment is the most cost effective way of deploying single page applications to azure. We have to follow certain steps to deploy angular app to azure static web hosting.
------------------------------------------------------------------------
Azure Devops Build Pipeline(CI/CD pipeline) steps for static web hosting
1. We have to establish connection between azure devops to your repository.
2. In this demo, I have used Git Repo.
3. In the azure devops project, we have to create a new build pipeline and choose classic editor.
4. In the next page, we have to select git repo. It will show you a dropdown to authorize azure devops on git account.
5. In your Git repo, goto profile, settings, Developer settings, Personal Access token and generate a new token with required permissions.
6. use the token in pipeline and save it.
7. In the next step we have to add few tasks for building angular poject.
8. we need to add npm install, npm build and publish artifacts tasks as these are required to build angular poject so that we can deploy it to azure storage account which has static web hosting.
Azure Devops Release Pipeline (CI/CD pipeline)steps for Storage account static web hosting
----------------------------------------------------------------------------------------
1. We have to associate azure angular build pipeline with release pipeline.
2. we have to add Azure Cli task. This is needed to clean the azure storage account before deploying the application.
3. We have to add File Transform task for transforming the configurations.
4. We have to add Azure File Copy task for copying the build artifacts to azure storage accounts.
---------------------------------------------------------------------------------------
Configuration in Azure storage account for angular app deployment.
1. we need to create a storage account.
2.From the left hand menu of the azure storage account, choose static web hosting option then enable it.
3. we have to mention the index document name and it is index.html
4. after doing all the above steps, if you save the page, it will show you the azure storage static web hosting url where the angular application can be accessed after the deployment.
5. We have to go to access management section of azure storage account and add Storage Blob Data Owner and Owner roles to Azure Resource Manager service principal.
After performing all the above configurations, if you run azure devops build pipeline for building angular project and azure devops release pipeline for deploying the app, the angular application will be successfully deployed to azure storage account which has static webhosting.
Chapters
00:00 Intro
01:52 Angular app build manually
02:55 Angular Azure Build Pipeline creation
11:45 Enabling Azure Storage Account Static Web hosting
14:25 Angular Azure Release Pipeline creation
17:40 Azure Devops File Transform Task
25:10 Static Web Hosting Azure Storage permissions
29:55 Testing angular app azure storage account deployment
#AngularAzureStorageDeployment#
#AzureStaticWebHostingStorageAccount#
#AngularAzureDeployment#