In this blog post, we will explore Azure CLI and learn how to create a web application. But that's not all—we'll also create deployment slots for our web application within the Azure App Service.
Join me as we discover the power of Azure CLI and help you build and manage your web applications easily and efficiently...
Requirement
- Install Azure CLI on your desktop or your laptop
2)Create your web application repository in your GitHub account.
3)Create a directory to store your files.
Let's dive in and get started.!
Log In To Your Azure Account
You will be redirected to a web browser to sign in to your Azure account.
Click on your account.
- You will get the below notification, close the browser page and go back to the terminal.
Create Your Resource Group
a) The next step is to create your resource group that will hold your Web App and your App Service Plan.
b) Enter the command:
az group create --name (name your resource) --location (input the location you want your resource to be).
c) Make sure to leave a space after each word.
d) Once you've entered the command, press Enter.
Create Your App Service Plan
The next step is to create your App service plan, which can be termed an operating system that hosts your web application. It provides the infrastructure and resources needed to run and scale your apps
Input the command; az appservice plan create --name <name your plan> --resource-group <name of your resource group> and press enter on your desktop or laptop
Create Your Web Application
a) Once the App service plan has been created successfully, the next command to input is to create our web application itself.
b) Input the command;
az webapp create --name <name your web app> --resource-group <resource group name> --plan <name of your plan>
Copy the HTTPS URL of Your Web App Repository in GitHub
Before you proceed at this stage, ensure you have created a repository and an index file for your web application.
a)To copy the URL of your repository, Go to your GitHub account.
b)Navigate to the right on your Web App repository page and right-click on the green Code button. Copy the HTTPS link as shown below
Configure The Deployment Source of Your Web Application
Now that we've successfully copied your Web App Repository URL, the next step is to configure the deployment source of our web app.
a) Input the following command and press Enter:
az webapp deployment source config --name <name of your web app> --resource-group <name of your resource group> --repo-url <the HTTPS URL of the web app repo that contains your index file> --branch master --manual-integration
b) From the information generated below, we can see that our deployment was successful.f
c) To view our Web App, navigate to the App Services on the Azure portal, there you have your Web App. Click on your App to see the overview
d) Click on the default domain link to view your domain
e) There you have your default domain reflecting your html.index file
f) To view our Deployment, click on the "Deployment Center"
g) From the image capture below, we can see our source as Git, we can also see the link to our repository and the branch our file is.
h) You can also view your commit message on the Logs
How To Create a Deployment Slot:
A deployment slot is a separate version of your web app for testing changes before deploying them to production, which you can create by navigating to your Web App page, clicking on the deployment slot on the left, and then clicking +add slot at the middle-top of the page.
d) Give your slot a name and click on the "Add" button.
e) Input the percentage of traffic you want to give your deployment slot, then click on the "Save" button
f) To have an overview of your deployment slot, click on it.
g) You can see the slot has its environment where you can make updates to the website App without disrupting the production/live environment.
h) In a real-life scenario, after testing the new update to the web app and ensuring it was well received,
i) You can then click on the Swap button to redirect the traffic back to the production environment..
j) Once the swap page opens, click on the swap button to swap
k) And there you have it, our web App has been updated without tampering with the production environment.
