Deploying A Web App Using Azure CLI
Tags: webapp, webdev, cloudskills, azure
Published: 2024-03-21 01:04:05

On this blog, i will show you how to deploy a web app using Azure CLI.  I am also going to create deployment slots for our Web Application within the Azure App Service. I will be doing most of my creations on the powershell rather than Azure portal

**Prerequisite**
* Have powershell installed on your computer
* Have your web app repository in your GitHub

Lets get started... Join me
We are going to login to Azure portal, first open powershell on your pc, the image below shows the icon.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x5ewf84avfte7mijr40q.png)

And input this command: az login and click enter


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/js7x6887h0r1q2iypx8z.png)
You should get a prompt to login to azure portal, correctly input your details and sign in

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o3iw5qhn8utb1qmlh8ea.PNG)
If your login was successful, you would get as message telling you that you have logged into microsoft Azure.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l2walho75hx2gqd9xmpf.png)

Go back to powershell, and you should also get a command proving you have logged in 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bhhnfyblb30odk1ulqvt.png)

The next step is to create your resource group that will house your web service plan and your web app.
Input this code to create your RG

az group create --name (name your resource) --location (input the location you want your resource to be)

Do well to not make mistakes in inputting of your code, press enter.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g72oz5diaklgib9j5t32.PNG)

The next step is to create our service plan, the service plan will serve as an operating system for the web app. So input this command

az appservice plan create --name <name your plan> --resource-group <name of your resource group>

and click enter
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8utxwszb3fmamaq93tf2.PNG)
Now that our app service plan has been successfully created, we will now go ahead to create our web app. input this command  and click enter
az webapp create --name <name your web app> --resource-group <resource group name> --plan <name of your plan>

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2h5r3venf9sgkjtpekqa.png)

Now we are going to import our HTTPS URL of our web app repository from GitHub. If you have not created your web app repository, locate my article on web app repository
Now lets head to our GitHub account to get the URL
Navigate to the right on your Web App repository page and right click on the green Code button. Copy the HTTPS link as shown in the image below

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wlhqd6ll708vsryb3pnk.PNG)
Ensure your repository is accessible by putting it in public and not private. Now that you have copied your URL, input the following command 

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s2j91uxonimi631j7gna.PNG)
We have successfully deployed our web app. You can go-to Azure portal, and from the app-service section, you will be able to view the deployed resource.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/327kdnmv798ipk67pkv5.PNG)
Click on your web app to see the overview, and from the overview, you will be able to access your domain.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/paow8f5vfjhldiskjrw0.PNG)
Click on your default-domain to view the html.index file
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g8lcoko6t1nu8hy3726x.PNG)
To view our Deployment, click on the "Deployment Center", we can also the link to our repository and the master branch.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/witzgzp8w7ujjtjz4bjl.PNG)
You can also view your commit message on the Logs

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ljdtg2p2a292rxraspy5.PNG)
Now lets go ahead to create deployment slot. A deployment slot is a test version of your web app to see if it qualifies for deployment. In a situation where a version of your web app is already running, you can release a new version without users experiencing a down time.
To create a deployment slot, go to your web app, navigate to 'deployment slot', you will notice our deployment is in deployment state, and running traffic is 100%. To add slot, click "add slot'


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7hexq2cg0x6k9zl7526a.PNG)
Give your slot a name, and select add

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/28oeszuwmendbq6rssk2.PNG)

Input the percentage of traffic you want to give your deployment slot, save it. 
You can also have an overview of the deployment slot by clicking the name
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sgrwos7e0ti5gv0ncp39.PNG)
If you click the overview, you will notice the new deployment has a new environment where you can configure it, without it affecting the already running resource. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ghiridm8rs48xwefjov.PNG)
Now we are going to return traffic back to production. Follow the steps on the images below
Click on "SWAP"

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jqlasxug1fj9mdq24f9o.PNG)
Go ahead and swap.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pxrjsxp7hfdgqd1m5p2r.PNG)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/an5pz8l82dmlx2k2f3si.PNG)

So our web App has been updated without tampering with the production environment.