Azure : Create an URL Rewrite Azure Web App
Introduction
Azure Web apps provide a rapid and easy way to deploy web applications and publish them on Internet or attach them to your Azure virtual network, so they can be accessed by users.
In this post i will detail how to create an Azure Web app which the purpose is to make URL Rewrites.
Example :
- We have an URL which i want to distribute among users so they can access it
- The URL is too long, and users will have difficulties memorizing this URL. The aim is to use a simplest URL (https://simpleurl.samirfarhat.com/) which will be communicated to users. And we want that some mechanism redirect this URL to the desired target URL.
- Using DNS CNAME is not possible since we cannot create a CNAME for a composed URL
The solution is to use an URL rewrite solution, which will redirect the simple URL to the composed URL. We can achieve this using an Azure Web app.
The following are the steps which will be conducted during this walk-through:
- Create an Azure Web app
- Configure the Azure Web app
- Create the URL Rewrite Configuration file
- Upload the configuration file to the Azure Web app
- Create a Public CNAME DNS record which redirect the Simple URL to the Azure Web App URL
Create an Azure Web app
Connect to the Azure portal and sign in using a subscription Admin account
NB : I’m using the Azure preview portal but the classic portal can be used too.
Go to New + –> Web + Mobile –> Web App
https://buildwindows.files.wordpress.com/2015/09/00_thumb.png?w=903&h=629
The Web app creation wizard will show
Type the following information :
Param |
Description |
Example value |
Web app |
A suffix for the Web App public URL. This will compose be the Public URL Name for this web app. It will be appended to ‘.azurewebistes.net’, so choose a significant suffix. This suffix is public, that means, you may enter a suffix which is already used by another customer. I recommend including your enterprise name within the suffix since it’s hard that someone else used it. The CNAME that will be configured later will resolve to this Public URL |
Suffix : MyAzureURLrewrite Public URL : MyAzureURLrewrite.azurewebsites.net |
Subscription |
Choose the Subscription where to place this Web app |
France LAB – SAMIR FARHAT |
Resource Group |
Choose and Existent Resource Group or Create a new Resource Group for this Web app |
MyAzureURLrewriteRG |
Now, click on App Service Plan
https://buildwindows.files.wordpress.com/2015/09/0387_thumb.png?w=903&h=537
We can create a new Service Plan or use an existent Service Plan
To simplify the description, a Service Plan defines the properties of the underlying compute resources that hold your Web App. Consider the service plans as different machines with different performances level**.** A service plan can host one or more Web apps (just like a machine can hold one or more IIS websites)
If we decide to create a new Service Plan, click Create New
Type the Flowing Information
Param |
Description |
Example value |
App Service plan |
Choose a name for your service plan |
MyBasicPlan |
Location |
Choose a location where to place this Service Plan (This where the Web App will be hosted too) |
North Europe |
Pricing Tier |
This allow you to choose between the different tiers. You can look here (Azure Service Plans tiers Pricing) for more information about the Service Plan tiers NB: You can upgrade from one tier to another when needed |
B1 Basic |
Now, we can click on Create. You web app will start deploying.
https://buildwindows.files.wordpress.com/2015/09/0392_thumb.png?w=582&h=387
First Configuration steps for the Web App
Go to Browse ALL –> Web Apps and select the Created Web App
https://buildwindows.files.wordpress.com/2015/09/0393_thumb.png?w=552&h=680
2.1- Verify that the Web App is published
Click on the Web App URL. You will be redirected to the Web App. A page with the ‘This web app has been successfully created‘ should appear.
https://buildwindows.files.wordpress.com/2015/09/0394_thumb.png?w=903&h=467
2.2- Add custom domain and SSL Certificate
Because we will not use the MyAzureurlrewrite.azurewebsites.net in the real life, and use instead, a custom URL containing your domain prefix (samirfarhat.com), we should declare which domains will be targeted on this Web app and which SSL Certificate will be used.
Go to All settings –> Custom domains and SSL
https://buildwindows.files.wordpress.com/2015/09/0396_thumb.png?w=903&h=651
2.2.1- Add an External domain
Click on Bring External Domains
https://buildwindows.files.wordpress.com/2015/09/0397_thumb.png?w=300&h=680
Add domains prefixes. Example : samirfarhat.com
NB : As mentioned on the wizard, Azure must verify that you are the owner of this domain name. So you should create a CNAME in a public DNS provider that match your domain to the the Web app public URL (SimpleURL.samirfarhat.com –> MyAzureURLrewrite.azurewebsites.net or awverify.samirfarhat.com –> MyAzureURLrewrite.azurewebsites.net)
2.2.2- Add the SSL certificate for the domain
Now that we successfully added our domains to the Web app configuration, we should bind a certificate which will secure your website when it’s accessed via URLs which contains our domain name.
Example:
In our case, we want to redirect https://simpleurl.samirfarhat.com/ to this Web App (http://myazureurlrewrite.azurewebsites.net/). So the user accessing this web app will tape https://simpleurl.samirfarhat.com/ in the browser. The certificate have to match the the requested URL, that means SimpleURL.samirfarhat.com
Click on Upload Certificate and upload a Certificate that match your requested URL. The certificate must be of the PFX format (with the Private Key)
https://buildwindows.files.wordpress.com/2015/09/0398_thumb.png?w=594&h=656
NB : If we use this Web app as a redirect service for many URLs, this web App will receive requests on many names (https://simpleurl.samirfarhat.com/, https://thehall.samirfarhat.com/ , https://ssj.samirfarhat.com/…), so to avoid uploading many certificates, you can use a wildcard certificate *.domain.com (*.samirfarhat.com)
2.3- Setup the FTP parameters
Now, we need to configure the FTP user credentials in order to be able to connect (using FTP or GIT) to the Web App content.
Go to All settings –> Deployment Credentials
https://buildwindows.files.wordpress.com/2015/09/0400_thumb.png?w=843&h=680
Param |
Description |
Example value |
FTP/deployment user name |
Type the User Name you would use. The user name can contain only letters numbers, hyphens and underscores, and must start with a letter. |
samirfarhat |
Password |
Type a complex password |
************** |
Confirm password |
Retype the password |
************* |
Configure the URL rewrite
After completing the previous steps, we can configure the URL rewrite service. The following steps will be conducted:
- Prepare the redirection configuration file
- Upload it to the Web application
3.1- Prepare the redirection configuration file
Download the following file (Web.config)
- Open it with a text editor (Notepad or Notepad++)
https://buildwindows.files.wordpress.com/2015/09/0412_thumb.png?w=1232&h=225
- Change the following information :
Param |
Description |
Example value |
name |
Type an identification name for this URL to be redirected |
SimpleURL |
url |
Type the URL of the application to which you want make redirect (the composed URL) |
https://complexURL.samirfarhat.com/dsf5ds4f54sdf54dsf7ds5s7df87fds4qs5d7q7sd57qs687q6f54qfq |
pattern |
Type the URL on which the Web app will receive the request, the simple URL (You must respect the format, a ‘.’ is replaced by ‘\.’) |
SimpleURL\.samirfarhat\.com |
- Save the file and keep the same name (web.config)
NB: If you have more than one URL to redirect, just add a new rule to the same file, by copying/pasting the Rule ‘section’
https://buildwindows.files.wordpress.com/2015/09/0413_thumb.png?w=1050&h=302
3.2- Upload the configuration file to the Web App
We will use FTP to connect and upload files to the Web app.
You can use the Windows Explorer or a FTP client like Filezilla (Download Filezilla)
In my Example i will use the Windows Explorer.
- On the Web App blade, locate the FTP hostname and copy the URL (You can use the copy shortcut)
https://buildwindows.files.wordpress.com/2015/09/0405_thumb.png?w=903&h=513
- Open a Windows Explorer window and paste the copied URL. We will be prompted for the FTP credentials. Enter the credentials we already configured on the previous steps.
https://buildwindows.files.wordpress.com/2015/09/0406_thumb.png?w=860&h=680
- Go to site/wwwroot/ and paste the web.config file
https://buildwindows.files.wordpress.com/2015/09/0407_thumb.png?w=903&h=293
- You successfully created an URL rewrite Web app on Azure
NB: We may have to restart the Web App
Create the Public DNS CNAME record
This is the final step, you should now create a public DNS record which will redirect the desired URL (https://simpleurl.samirfarhat.com/) to the Azure Web app URL (myazureurlrewrite.azurewebsites.net)
Annex
The following is the content of the web config file.
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name=”SimpleURL” patternSyntax=”ECMAScript” stopProcessing=”true”>
<match url=”(.*)” />
<action type=”Redirect” url=”https://complexurl.samirfarhat.com/dsf5ds4f54sdf54dsf7ds5s7df87fds4qs5d7q7sd57qs687q6f54qfq%22 appendQueryString=”false” redirectType=”Permanent” />
<conditions>
<add input=”{HTTP_HOST}” pattern=”SimpleURL\.samirfarhat\.com” />
</conditions>
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>