How To Create WebApp Using Azure CLI
How To Create WebApp Using Azure CLI
Introduction
What is a Web Application commonly referred to (Web App)? A Web Application is an application that runs their program on web servers and that servers could only be accessed through a web browser over a network like the internet.
Unlike traditional desktop applications that are installed locally on a user’s device, In this case the web app is typically accessed through a URL (Uniform Resource Locator) and never requires installation on the user’s device.
Let us go into the practical steps to create a web application using Azure CLI, and further step into how to deploy slots for our Web Application within Azure App Service.
Come along as we practicalize and implement the tools of Azure CLI to create and manage Web Application easily in a secure and efficient way.
Requirement
Install Azure CLI on your desktop
Make sure your Web Application Repository in GitHub Account is in place.
Directory must be created to be able to house your file. If you do not know how to create an index file please check on how to create it on GitBash and push it to GitHub.
Let us go ahead and create our Web Application.
Login In
Log in to your Azure Account
Go to your search bar and open PowerShell to start.
To log in type in the command az login and press enter
See figure 1
Fig 1
After pushing enter on the above platform, the system will automatically redirect you back to Azure platform to sign into your account as seen on the figure below in
figure 2.
Fig 2
When you finish signing into your Azure Account, you will see the below page appear. You don't need to do anything on this page, just go back to your powershell and continue the process.
See figure 3
Fig 3
Back on your PowerShell terminal, you will see the below display that shows you have successfully signed in.
See figure 4
Fig 4
CREATING YOUR RESOURCE GROUP
In order to create your resource group, you will type in the command in your PowerShell terminal as seen below
Az group create –name (Your resource group name) –location (type in your preferred location)
Fig 5
CREATE YOUR APP SERVICE PLAN
Moving to the next step, App service plans need to be created, this will act as your operating system that would help host your web application. Creating this App service will enable the infrastructure and the resources needed to run and scale your apps.
Then type in the below command az appservice plan create --name (name your own plan) --resource-group (Name of your resource group) then press enter.
See figure 6
Fig 6
CREATE YOUR WEB APPLICATION
We could see in the above process the App service plan has been successfully created, then we move into the next stage which is creating the Web Application.
The below command needs to be imputed; az WebApp create –name (Your Web App name) –resource-group (Resource group name) –plan (Your plan name) then press enter.
See figure 7
Fig 7
COPY HTTPS URL OF YOUR WEB APP REPOSITORY IN GITHUB
At this stage you will have to copy the https URL of your Web App Repository in GitHub and make sure that your repository and index file for your web application have been created.
If you have not put that in place, and you want to quickly create that, you could check on my blog to learn how to create an index file on GitBash and push it to GitHub
Moving into the copying of URL from your repository, first go to your GitHub Account and sign in. After signing in, check on the top right hand side of your repository page and click on the green code drop down button, On the dropped down option choose HTTPS link.
See figure 8
Fig 8
Fig 9
WEB APPLICATION AND DEPLOYMENT SOURCE CONFIGURATION
After successfully copying the Web App repository URL, configure the deployment source of the Web Application and input the below command:
Az Webapp deployment source config –name (Your web app name) –resource-group (Your resource group name) –repo-url (Your copied HTTPS URL from your web app repo containing your index file) –branch master –manual-integration then press enter.
After pressing enter, you could see below that the deployment was successful.
See figure 10
Fig 10
After successfully deployed on powershell you could view your Web App by navigating to App Service on the Azure portal and be able to view the created Web App. The overview could then be viewed by clicking on your Web App.
See figure 11
Fig 11
After you have been redirected to your Web Application on your Azure
Account, to be able to test if your default domain is running, You must copy or click on the link highlighted below.
See figure 12
Fig 12
After clicking on the Default Domain the link will automatically open and signify that your Web App is running.
See figure 13
Fig 13
To be able to view the Deployment on your Web App, search and click on the Deployment Center.
On the open page after the Deployment Center has been clicked you will be able to see your source as Git, the repository link could also be seen, and finally the branch where your file is kept will be seen as well.
See figure 14
Fig 14
On the same page if you click on the logs button located next to the settings button, you as well view your commit message.
See figure 15 below
Fig 15
DEPLOYMENT SLOT
What is a Deployment slot? Deployment slot is more or less a separate version of Web Application which could be used to carry out, test or modify your Web App before deploying to your Production Environment.
Let us imagine you have a Website that is already in operation, and you need to add additional features or make some updates to the system. Instead of shutting down the whole system, which could cause delay or affect your users' operation.
Creating a deployment slot helped solve this issue without any downtime during any update or adding additional features to your Web Application.
When you check on figure 16 below on the deployment slot page, you could clearly see that the Web Application is in production state and running, and looking at the traffic, it is 100%.
In order to add a slot, you will click on the +Add slot located at the top of the page.
See figure 16
Fig 16
To add a slot, you will have to give your slot a name and click on the add button.
See figure 17 below
Fig. 17
To give your deployment slot, you will need to input the percentage of traffic you want it to run and click on the Save Button.
To have an overview of your deployment slot, click on it to view.
See figure 18
Fig 18
The slot below shows an additional environment where an operation could be carried out and the Web App updates without any disruption to the production or live environment.
See figure 19
Fig 19
Considering the real life framework, after testing the Web Application and confident that the new update is working as required.
The traffic can now be added back to the production by clicking on the swap button to add back to 100%.
See figure 20
Fig 20
As advised in the figure 20 above, To perform swap action click on swap and another page will open, on the bottom left of the newly open page you will see the swap button click on it to perform swap.
See figure 21 below
Fig 21
Finally, the Web Application has been successfully updated without any disruption in the area of production.
See figure 22 below.
Fig 22
I believe the instructions provided help you in creating your Web Application without any confusion.
Thank you