In the old days, the need of having the test and production environment close together was a big concern! Nowadays, Azure takes care of it with Deployment slots. The changes you want to make in your app are only a few clicks away from the internet making your life much easier.
In this post we will focus on some basic steps on how to create and configure an Azure web app. We will also use Deployment slots (staging and production slots), deploy code from GitHub , and finally swap between the staging and production slots for testing purposes.

The first thing you need to do is to sign in to your account, if you don’t have one then you can go to https://azure.microsoft.com/en-us/free/ and create an account for free.After you sign in you go to “+ Create a Resource” from the blade or from Azure Services Page as you can see below.

A search field will come up, just type “Web App”.

The first item result will be the service you want to create, so click on “Create”.

Once you click on create, you get a wizard form filling it as follows:

undefined

Ok, first, select the subscription.
Then the resource group name in which we want our app to belong to (the resource group name is used to organize resources),next choose the name for the app. Azure provides by default the domain “.azurewebsites.net” so, in this case the full URL of the web app will be appl001.azurewebsites.net.
Next, pay attention to two instance details: Publish and Runtime Stack.
This is where you “tell” to Azure either to use Code or docker container for your app, depending of your choice you will get the appropriate options as well.

For example, if you opt for Code then you will get a list of options in the Runtime Stack field (actually you get a list of all supported programming languages in Azure so your app must be written in one of these languages).
Next, select the region for your Web App, e.g. East US.

Finally, you will see the App Service Plan, which is a set of resources and capacity available to deploy our web app service into. These resources are VMs with set amount of CPU and memory, so that give us the option to decide how your web apps are hosted, what resources are available to what applications and ctr, but for now keep the default value.

Although keep in mind that depending the App Service plan pricing tier determines the location, features, cost and compute resources associated with our app.By clicking on “Change Size” you can explore a variety of Tier Pricing options with additional options depending always on your point of interest (Dev/Test, Production, Isolated):

You can always have a great review of the App Service Plan pricing Tier and calculate the desired options here: https://azure.microsoft.com/en-us/pricing/details/app-service/windows/

Once you have filled the Basic tab you proceed to Monitoring tab:

Here are the Application Insights which is the performance management for your service.With this option enabled you can monitor your application and get everything you need to know about the monitor, availability, performance and usage for your App.Since we go through some basic steps in this post, there is no need to enable it.

The next tab is about Tagging.

Tags can be used to quickly group and then view resources with the same Tag for easier management (billing and filtering purposes for example).

For this lab its not necessary to create tags because we will not have too many resources to be managed, just the basics, so there is no need to do this.

Now click on Review + Create.

In this step, Azure validates the information you entered in the previous forms tabs and if everything goes fine, then you just click on “Create” to create your Web App.

*Note that there is an extra option “Download a template for automation”. You can download the template you ‘ve just created so next time you would want to create a web app with the same configuration it won’t be necessary to create it from scratch, in other words, it is a “snapshot” of the current state of your resource. Templates are in JSON format but there is no need to get into it right now because we are not going to cover this topic in this post.

After you click “create” you will start getting notifications updates about the process of the deployment.

If everything goes well, in a few seconds you will get the confirmation that the resource has been created and you click on “Go to resource”.This will redirect you to the overview page of your web app.

While you are in the overview page ,among other important information, you will also find the public url address of your app:

If you click on it then you will be redirected to your application’s URL seeing the demo page:

Now you are going to add a deployment slot. To do that go to the application’s blade and go to Deployment Slots:

Deployment Slots are a feature of Azure App Service. They are live apps with their own hostnames. You can create different slots for your application (e.g. Dev, Test or Stage).

Using Deployment slots, you can validate any app changes in the staging mode before you swap it in the production mode. So that means that if you make any changes to the staging slot and you are satisfied with, then you can easily swap the new version of your app right away! When Deployment slot page opens, you see only one slot, the Production slot which is created by default when we created the Web App

but now you need to add a new Deployment slot (for testing purposes as we mentioned above) so you simply click on +Add slot

Once the Add a slot window opens, you name the new slot as “staging”

You can also clone a configuration from any existing slot. Settings that can be cloned include app settings, connection strings, language framework versions, web sockets, HTTP version, and platform bitness, but for now, select “Do not clone settings”.
Then you click “add” and the new deployment slot is listed under the production slot.

Now you are going to import your application code.On the Deployment slots page, select appl001-Staging to display the Staging App Service (slot) page.
On the Staging blade, select Deployment Center.

Now you are going to create an FTP account in order to upload files using an FTP client like (WinSCP or Visual Studio). To do that, In the Deployment Center Page scroll down to the bottom of the page and click on FTP.

Once you clicked on FTP you will get a “Dashboard” button, click on it and you will get the next page:

You will notice that here we have two level credentials: App Credentials and User Credentials.
The User credentials is one set of credentials for the entire Azure account. It can be used to deploy to App Service for any app, in any subscription, that the Azure account has permission to access.
The App credentials is one set of credentials for each app. It can be used to deploy to that app only. The credentials for each app are generated automatically at app creation.
Go to the User Credentials, fill the username and password fields and click on Save credentials.
(Here is a link on how to deploy files to Azure via FTP:
https://docs.microsoft.com/en-us/azure/app-service/deploy-ftp#deploy-files-to-azure).

Now you are going to connect your GitHub account in Azure. To do that return to the Deployment Center page, click on External and then on Continue button.

Select the App Service build service and click on continue button again.

Here is some important information you must provide to Azure, for example your Github repository and some other additional information such as Branch, repository type and if this repository is Private or not. Change the values as shown, click continue and Finish.

(notice that for testing purposes, I use the Azure sample repository).

Wait for the status of the deployment to change to Success (Active).

Now go to the overview page of the staging slot you’ve just created and click to the public url link https://appl001-staging.azurewebsites.net you should see the ASP.NET page.

(notice that the staging url is different than the production’s which is https://appl001.azurewebsites.net).

Finally ,you are going to swap the staging deployment to production deployment to update your web app.Go to the appl001 page and click on “Swap”.

You will get the following window. In this scenario you have made some changes to the staging slot and you want the production slot to take these changes, so your Source must be the staging deployment and the Target your production deployment.

You click on Swap and after a while you get a confirmation message.

Now go to the appl001 overview page and click on its public url address.
You will see that the main page has changed to:

Instead of:

That’s it!

Thank you for reading my very first post in my blog!1
I hope you found it useful, simple (as much as it can be!) and easy to read.The next thing you could do just to play around would be to create a clone of your app for failover purposes.If you have any questions,corrections on how this post could be more useful, i would be glad to hear them as well!

See you in my next post!
Stay safe and stay at 127.0.0.1 !

Previous articleView Razor changes without building the project
Next articleTeams Easy Button with Flic
avatar
For almost twenty years, I have served as a system administrator and operational support officer for various departments of Eurobank, the leader of retail banking in Greece. Being a member of the bank's dedicated MIS team for Finance, my current role is to ensure the financial data close cycle runs smoothly and to support my colleagues in their day-to-day operational processes. I have extensive experience with issue management, troubleshooting and end-user support and I am always eager to assist a person in need. I have a strong work ethic and take pride from my work, I am hard-working and thorough in the tasks at hand. My experience in radio production and media content creation is the most solid proof of excellent communication skills.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.