Deploy our Angular Application in Blob Storage.

suji guna
4 min readAug 14, 2020

Hey guys, this is my third article on Distributed and cloud computing- sample environment in azure cloud platform series. If you have missed the previous articles you can visit the below links.

Now lets jump into the current article. With this article , we are going to deploy our app.

First let us get to know what is Azure Storage Services.

Azure Storage Services

The Azure Storage platform is Microsoft’s cloud storage solution for modern data storage scenarios. Core storage services offer a massively scalable object store for data objects, disk storage for Azure virtual machines (VMs), a file system service for the cloud, a messaging store for reliable messaging, and a NoSQL store. The services are:

  • Highly Available
  • Accessible
  • Secure
  • Scalable
  • Manageable

Azure core storage services include the below,

  • Azure Blob
  • Azure files
  • Azure Queues
  • Azure Tables
  • Azure Disks

For my project, I have used Blob Storage. Let me give you a brief introduction to Blob Storage.

Azure Blob

Azure Blob storage is Microsoft’s object storage solution for the cloud. Blob storage is for storing huge amounts of unstructured data, such as text or binary data.

Blob storage is suitable for:

  • Serving images or documents directly to a browser.
  • Storing files for distributed access.
  • Streaming video and audio.
  • Storing data for backup and restore, disaster recovery, and archiving.
  • Storing data for analysis by an on-premises or Azure-hosted service.

Objects in Blob storage can be accessed from anywhere in the world via HTTP or HTTPS. Users or client applications can access blobs via URLs, the Azure Storage REST API, Azure PowerShell, Azure CLI, or an Azure Storage client library. The storage client libraries are available for several languages, including .NET, Java, Node.js, Python, PHP, and Ruby.

Now lets create a Blob storage and deploy our angular application.!

Sign In to the azure and portal and search for Storage account and select it.

Storage Account Icon

After clicking the storage account, you will be redirected to storage account page where you can do tasks related to already existing storage account and also create new storage account.

Click “Add” to create new Storage account.

You can create a new storage by filling out the fields as per your requirement. Here I have used SENG_SE15013 so that I can integrate all my resources in a single group. If you need a new resource group, you can create a new one too.

And also you can verify and change the following settings and Review+Create a new storage account.

Hurray! we have now created the storage account. And now we will create the container.

Now click the storage account to go to the account overview.

From the Storage Account overview, you can find the container either downside or in the navigation pane. And select it to create a new container,

Select “+Container” to create a new one.

Create a container now.

Done!! Now its time to deploy our angular application.

  1. From the root folder, go to the terminal and execute the following command.

ng add @azure/ng-deploy

Packages will be downloaded and you will be asked to login to azure account to create a storage account.

And a resource group will be automatically created in your root directory.

2. Generate the static files for your front end by executing the below command.

ng build — prod

3. Now deploy your application to the selected storage account by running the following command.

ng run <project-name>:deploy

Now you will get the link to view your deployed application.

Done! We have successfully deployed our Angular application:)

The next article is based on Creating MySQL Server - Azure Database . Click the below link to go…

Creating MySQL Server — Azure Database .!

To refer the ARM templates, please follow the link.

ARM Templates

--

--

suji guna

B.Sc in Software Engineering. University of Kelaniya, SriLanka.