Learning Azure for Deployment

Table of Contents

Introduction

Getting Started

Installation

Deployment

CI/CD with Github Actions

Budgets

Azure Terminology

References

Introduction

This article will help users be able to get an idea of what Azure is, and how to get started with it to use with their own applications in personal projects, hackathons, assignments, or more!

Azure is a cloud service provider by Microsoft that provides extensive services, including application hosting, messaging, data, storage, and more, for developers to leverage when building applications.

It is one of the most popular cloud service providers, including Amazon Web Services and Google Cloud Platform, and if you’re an 18+ year old student, you can get $100 in Azure credit with the Github Student Developer Pack. 😁

You can read more about the most popular cloud service providers and comparisons between them here.

Getting Started

Before being able to work with Azure, you must first create an account here. As mentioned earlier, after creating your account, you can get $100 in Azure credit with the Github Student Developer Pack if you’re an 18+ year old student.

After creating an account, make sure you have an Azure subscription (such as Azure for Students above) to use. See more about the types of subscriptions at Microsoft’s official documentation here.

Installation

The Azure Portal is simple, and easy to use to interact with and create Azure services. Aside from your Azure account, no other setup is necessary.

For the examples in this article, you’ll also require the Azure CLI. Instructions to install it on your computer can be found here

Although not covered in this article, other alternatives for interacting with Azure can be found here.

While we won’t be going into too much detail here, you will need to have Node.js and npm installed to follow along and get a basic Node.js web app with Express running (install Node.js and npm together for your system here). If you’re working with another tech stack, links to help you find appropriate documentation and examples will be provided.

Deployment

Azure has a variety of ways to host your applications, and these options can be seen here.

The following will detail how one would deploy a Node.js Web App using Azure App service, and integrate it with Github Actions for CI/CD.

Azure App Service

Azure application service allows you to build and host web applications, mobile backends and RESTful API in the selected programming language without managing the infrastructure. It provides automatic scaling and high availability, supports Windows and Linux, and supports automatic deployment from GitHub, Azure Devops or any Git repository. You can read more about Azure App Service from Microsoft’s official documentation here.

Create Web app on Azure

From Microsoft’s official documentation, here is a quick tutorial to get an example Node.js project deployed:

deploy web app with node js on Azure

Alternatively, and possibly easier, you can make a very basic web app with Node.js and Express by doing the following:

Note: Learn more about Node.js and Express apps here.

  1. Create a project directory for the Node.js web app
  2. In the root of your project directory, run npm init in the terminal (you should have npm and Node.js installed).
  3. In the terminal, run npm install express.
  4. Write the following in the directory in a new file, server.js (or whatever name you entered as the entry point during npm init). 
         const express = require("express");

     const app = express();

     const PORT = 3000

     app.get("/", (req, res) => {
         res.send(`
         <h1>CSC301 A2 Demo successfully deployed!</h1>
         <h2>You did it!</h2>
         `)
     });

     // Set up server to listen on port 3000
     app.listen(PORT, () => {
         console.log(`Listening on port ${PORT}`);
     });

Note that the file structure inside your project directory should currently look something like this:

├── node_modules
├── package.json
├── package-lock.json 
├── server.js 
└── .gitignore

Have this code in a Github repository to later integrate with Github actions.

Now, you have two options: to deploy your web app with the Azure portal, or with the Azure CLI. You will be able to successfully deploy your web app regardless of which option you choose, so it mostly comes down to whichever option sounds more comfortable or interesting to you. However, also note that using the Azure portal will immediately integrate CI/CD with Github Actions with an automatically generated workflow.

Note: The following deployment makes use of the Free and Shared service plan for App Service, given that this is for a demo and not a production deployment. If this is not the case for you, please look more into different plans here and research properly what will work best for you.

  1. Deploy your Web App with the Azure portal (if you proceed with this option, the Azure portal will immediately integrate CI/CD with Github Actions)

    On the Azure Portal, navigate to App Services:

    • Click on the Create dropdown and select Web App.
    • For this simple example, you’ll only need to fill out the first tab, Basics.
    • Choose a subscription (Azure for Students if you’ve used the Github Student Developer Pack), a resource group (or create one), and create a name for your Web App.
    • Choose Code for Publish, and the appropriate version of Node for your runtime stack.
    • The default region and Linux plan defaults should suffice, but make sure to change the Pricing Plan to Free F1 (Shared infrastructure).
    • Select Review + Create and then Create.

    After you get a notification that the deployment succeeded, navigate to your web app on the Azure portal.

    • On the sidebar, select Deployment Center.
    • As the code source, select Github under Continuous Deployment in the dropdown (you should have your code in a Github repository).
    • Select the appropriate organization, repository, and branch to deploy.
    • Click Save and wait.
    • After a couple minutes, confirm that you can access the deployed URL, and that there’s a workflow file in your Github repository.

    Congratulations, you’ve deployed a web app using Azure, and integrated it with Github Actions too!

  2. Deploy your Web App with the Azure CLI (if you proceed with this option, you’ll need to follow along with the CI/CD with Github Actions instructions to integrate Github Actions)

    In your terminal:

    • If you haven’t already, follow the instructions in Installation to install the Azure CLI
    • Ensure that you’ve followed the setup instructions in the official documentation
    • Enter the following command while in your project directory’s root folder: az webapp up --sku F1 --name <your_webapp_name> (learn about the parameters here)
    • Once the command successfully executes, visit the URL in the response object you got. If you see your web app (note that it may take a minute or two), congratulations, you’ve successfully deployed your web app on Azure!

CI/CD with Github Actions

You can use Github Actions with Azure to automate workflows during your software development. Given the different hosting and deployment options mentioned above, there is a different way to use Github Actions to work with whichever hosting option you’ve chosen.

Below, we’ll continue with our previous example of a Node.js Web App using Azure App Service, but you can find examples for different hosting options here.

Note that before continuing with implementing CI/CD with Github Actions, you should have a working Azure App Service app.

Using Github Actions to Deploy to Azure App Service

The workflow can be set up in 1 of 2 ways: using the Deployment Center to generate the workflow file for your Azure App service and tech stack in a Github repository, or manually.

If you deployed your web app using the Azure portal, congratulations, the workflow file was set up automatically for you! You’re all done! If you deployed your web app using the Azure CLI, follow along, there’s a couple more steps!

I found the official documentation (found at the link below) to be a clear and quick tutorial for how to set up Github Actions for your Azure App Service web app, which guides you through whichever workflow setup method you’ve chosen, with instructions for the various supported programming languages you may be using.

Using Github Actions with Azure App Service

Some issues that I’ve seen occur in this process include:

Once you’ve completed the steps in the documentation and see that the Github Actions workflow ran successfully, congratulations, you’ve deployed a web app on Azure integrated with Github Actions for CI/CD!

Cost Management with Azure

There are scary stories of people learning to use cloud service providers, like Azure, Google Cloud Platform or AWS, and as they set up different services, when the bill comes around, they’re faced with a staggeringly large bill.

While avoidable, inexperience can cause this to happen to anyone, whether it was a virtual machine set up with exorbitant amounts of memory and computing power by default, or a forgotten resource, such as a database or app service, that kept running and being charged. With the deployment we’ve set up, we’ve made use of always free products on Azure, which you can see here, minimizing the risk of finding yourself paying a large bill.

It can be scary to learn something new when such consequences are possible, but to avoid that, Azure provides a handful of tools to use to ensure that you are in control of what you spend.

Cost Analysis

In the Azure portal at Billing > Cost Management > Cost Analysis, you’re able to view a breakdown of your costs and spending over time, and either with respect to your entire account, or if you want to be more specific, you can also scope to specific resource groups. With this, you’re able to analyze your spending to be more aware of where most of your costs are going.

A more detailed look at cost analysis can be found here.

Budgets & Alerts

While it is useful to be able to analyze your spending, you won’t be doing this around the clock, so you still need a way to be informed of your spending if it starts getting out of hand. In come budgets and alerts.

A budget allows you to track your spending across your services, set a limit, and be notified as the cost across your services approaches this limit. In the Cost Management + Billing > Cost Management > Budgets page, you are able to create a new budget.

When creating a new budget, you’re able to choose some important fields, including the reset period (the time period for the budget), the creation date (when the budget begins), the expiration date (when the budget expires), and the amount (the limit amount you’re willing to spend).

After filling these in, you’re able to set up alerts for this budget. Alerts can be triggered either by the actual usage of your budget, or the forecasted usage, and they can be triggered at certain portions of your budget being used (ex. 30%, 50%, 80%). When these alerts are triggered, you (and other recipients) that you indicated as the alert recipients, will receive email notifications.

See more about cost management in Azure’s official documentation.

Azure Terminology

See other keywords in Azure’s official documentation.

References and Helpful Resources