Personal URL Shortening Service with Azure Storage

So, you've got your own domain. Let's say azure123.com. Wouldn't you like to have a URL shortening service just for you? How would that work? What's the cheapest way to do it?

I always forget my work webmail address. I always forget my blog URL (not true). I always forget my friend's site url. I'd like to have a URL that I always remember, and I'd like to have total control over it. I also am poor, so I'd like to avoid having to pay for a website or for a web role.

Here is one way to do it... using Azure Storage (and a little javascript)!

Step 1: Create a Windows Azure Storage Account

Do you have a Windows Azure subscription? Get one. You can use a trial account too. Login the management portal, click on the new button at the bottom left of the screen, select 'Data Services', 'Storage' and 'Quick Create'. Set a URL (you'll probably want to use your own custom domain later on), choose a data center closest to you. You can disable Geo-Replication if you want to shave off a little more off your usage (it won't matter really).

While the storage account is being created, you can start on step 2.

Step 2: Create your javascript redirector

So let's start work on the redirector itself. We'll have one for each url, but we can reuse most of it. Here's a sample javascript redirector:

<!DOCTYPE html>
<html>
<head></head>
<body>
<script>
// Where is Malta's Airport? Here!
var toUrl='http://binged.it/13dedtl';
window.location=toUrl;
</script>
</body>
</html>

For every redirector, just change the toUrl variable to point to the link you always forget, and save the file to a friendly name.

Step 3: Install a storage app

The next step is to get an application that will allow you to upload the redirector(s). You may want to use a dedicated app such as the CloudBerry Explorer with Windows Azure (http://www.cloudberrylab.com/free-microsoft-azure-explorer.aspx). It's a free tool that works well and is pretty easy to use. Otherwise, you can stick with Visual Studio with the latest Azure SDK to do so. Let's do it with Visual Studio.

Step 4: Upload the redirectors to the Storage Account

First, add the storage account to your server explorer. Right click on 'Windows Azure Storage', and select 'Add New Storage Account'. You can enter the settings manually. All you need is the account name and account key, both can be found in the Azure Management Portal (find the azure account, and click on 'Manage Access Keys' from the bottom.

Once the account has been created, expand it select 'Blobs' and create a new container. Here's an neat trick. Name the container '$root' (without the quotes). That will eliminate the container part from the final URL, making it as short as possible. We need this container to be publicly accessible so we need to switch this on. Right click on the container, select properties, find the 'PublicAccess' property and make sure it's set to 'Blob'.

Right click the container again and open it by clicking 'View Blob Container'. Great! Now find the upload icon (arrow pointing upwards) to upload your redirector files. I've saved mine as 'airport.html'. Upload the files in the $root container. Notice that the content-type is set to 'text/html'. This is important so that the javascript would be run by the browser, and not downloaded. If this doesn't happen on upload, you may want to check the file .html extension. If you'd like, you can use another azure storage tool (like the CloudBerry Explorer) to remove the extension (but keep the content-type) so that the final url would be even shorter. Havn't managed to find a way to do this last part in Visual Studio as yet! If you upload it without the extension, the content-type would be incorrect.

Till now, I got http://testme123.blob.core.windows.net/airport

Step 5: Associate your custom domain with Azure Storage

The above url is great, but it's a tad longer than my maximum memory limit (yeah, I know). I want it shorter! Shorter? I need a custom domain! If you've got a custom domain to play around with, we'll need to create a new DNS CNAME record. Let's say I own the domain azurerocks.com (which I don't), and I'd like to use this domain to add my cool redirector. I want the redirector to have the url http://urls.azure123.com/airport.

First, register the custom domain with Azure using the Management Portal. To access the dialog, select your storage account, and navigate to the 'Configure' tab. At the bottom, click on the 'Manage Domain' button. It will require an activation process before the domain is activated. The activation process would require you to register (temporarily) a long CNAME to point to verify.azure.com. Once this is done, click on the validate button to complete the registration. However, due to DNS propagation, it usually takes some time (even hours sometimes so have patience).

Step 6: See it work!

Well, at this point you should have your redirector work with your custom domain. If you'd like to add new redirectors, just copy/paste the file and change the URL from the javascript. Remember that since we're not using any cloud services or azure website hosting, we're just using Azure storage, this redirector is dirt cheap. You'll be charged only for the bandwidth and the storage cost, which both are ridiculously cheap. In comparison, my test redirector was 188bytes. Storage and bandwidth costs are measured in Gigabytes. First 5GB of bandwidth is free as well, so there!

Here's what we've covered:

1. Setting up a Windows Azure Storage Account

2. Creating a simple redirector with javascript

3. Installing and using an Azure storage application

4. Adding the storage account to Visual Studio

5. Creating a new container. Name it $root to make it invisible in the url!

6. Setting the container as public would allow public access without requireing security checks

7. Associate a custom domain with the Azure Storage account through some CNAMEs.

8. Play around with it. Show it to your friends. Create other redirectors!

Want to learn more? Follow these links!

http://www.w3schools.com/js/js_window_location.asp

http://www.windowsazure.com/en-us/downloads

http://www.windowsazure.com/en-us/develop/net/how-to-guides/blob-storage

http://msdn.microsoft.com/en-us/library/windowsazure/ee395424.aspx

On May 27 2013 9:40 PMBy GarethWith 0 Comments storage, azure, javascript, redirect

Personal URL Shortening Service with Azure Storage

Step 1: Create a Windows Azure Storage Account

Step 2: Create your javascript redirector

Step 3: Install a storage app

Step 4: Upload the redirectors to the Storage Account

Step 5: Associate your custom domain with Azure Storage

Step 6: See it work!

Here's what we've covered:

Want to learn more? Follow these links!

Leave a Comment

Links

Windows Azure

Global Azure Bootcamp Malta

Recent Posts

Azure Resource Naming Convention

The Global Azure Bootcamp 2015 - Malta!

SEO Tip: How to block the *.azurewebsites.net domain

Free eBook: Microsoft Azure Essentials - Fundamentals of Azure

When Azure broke down...

How to protect against POODLE attacks!

Quick Tip: How to output custom error messages on Azure Web Sites

Azure icons in Visio

How to migrate legacy apps to Microsoft Azure (part 1)

How to put a robots.txt file in your Windows Azure Blob Storage domain