Azure : Create an URL Rewrite Azure Web App

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 :

–> 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:

  1. Create an Azure Web app
  2. Configure the Azure Web app
  3. Create the URL Rewrite Configuration file
  4. Upload the configuration file to the Azure Web app
  5. Create a Public CNAM DNS record which redirect the Simple URL to the Azure Web App URL

1- 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

00

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 CNAM  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

0387

 

You 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 you 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, you can click on Create. You web app will start deploying.

0392

2- First Configuration steps for the Web App

Go to Browse ALL –> Web Apps and select the Created Web App

0393

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.

0394

2.2- Add custom domain and SSL Certificate

Because you 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

0396

 

2.2.1- Add an External domain

Click on Bring External Domains

0397

Add your 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 you successfully added your domains to the Web app configuration, you should bind a certificate which will secure your website when it’s accessed via URLs which contains your 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)

0398

NB : If you will 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

0400

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 *************

3- Configure the URL rewrite

After completing the previous steps, we can configure the URL rewrite service. The following steps will be conducted:

  1. Prepare the redirection configuration file
  2. 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++)

0412

  • 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’

0413

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 thr URL (You can use the copy shortcut)

0405

  • Open a Windows Explorer window and paste the copied URL. You will be prompted for the FTP credentials. Enter the credentials you already configured on the previous steps.

0406

  • Go to site/wwwroot/ and paste the web.config file

0407

  • You successfully created an URL rewrite Web app on Azure

NB: You may have to restart the Web App

4- Create the Public DNS CNAM 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” appendQueryString=”false” redirectType=”Permanent” />
<conditions>
<add input=”{HTTP_HOST}” pattern=”SimpleURL\.samirfarhat\.com” />
</conditions>
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s