How to Use Windows Azure

Jacco Blankenspoor
Tweet

You’ll no doubt be aware of the great contest SitePoint is currently holding in conjunction with Windows Azure. Push the Web Forward invites you to take on one of three challenges that involve uploading an app or website to Windows Azure. There are plenty of cash prizes, up to $5,000 for the toughest challenge. The most basic challenge involves uploading a WordPress site to Windows Azure, and we published somem gudielines for this in Chris Leeds’ article WordPress on Windows Azure in 2 Minutes or Less. Now it’s time for some help with the more advanced challenges.

Introduction

In this article I will show you a few different ways of how to get your site running on Windows Azure. Launched in 2010 with only a few features, Microsoft quickly expanded its cloud offering to the all round service it is now. You can launch basically any type of website or app in the Azure cloud, but you probably would like to know how. I will demonstrate this by:

  • Showing you the Windows Azure Portal
  • Setting up a simple HTML site
  • Setting up a Magento ecommerce store

I will start by giving you a look round in the dashboard (or portal as they call it), from which you can launch and manage your services.

The Windows Azure Portal

Windows Azure

The Windows Azure portal is where you build and manage your deployments. At the bottom you find the big “NEW” button. This is where you start all of your deployments. On the left you see the number of services your are using, with “All items” showing a list of all of them.

Some applications are built up from different services. Like my Magento demo, which is using a storage account, a virtual machine and a cloud service. In this article I will be using these services:

  • Web site: You can see this as regular hosting. It’s easy to quickly set up a website with a database or install an app from the Gallery (like WordPress).
  • Virtual machine: These are the cloud servers as most of us know them. You can configure your desired OS, on which you add a LAMP stack for example.
  • Storage Account: This is the network attached storage, which you can use for storing an image (like in this article), or add storage to a virtual machine.
  • Cloud service: This provides a management console for your instances. This is also where you set up scaling, and here you can combine multiple instances. As Microsoft states is, it allows you to focus on your app instead of your infrastructure.

Azure provides you with a very good help function. On the bottom of your screen you see a question mark. When you click it, it shows you help information relevant to the page you are looking at. And it provides a fast and easy way to the excellent resource section.

azurefig2

When you click on one of the items (in this case the magento-demo virtual machine), you are presented with a dedicated management console. As you can see, you have some very nice usage graphs, as well as some additional services like a monitor (web endpoint status) and autoscale configuration. And here you also have your access details on the right.

Now let’s see how easy it is to launch actual websites on Windows Azure.

How to setup a simple HTML site on Windows Azure

azurefig3

I will now set up a simple HTML site, without a database or anything fancy. I do this by clicking “Compute” –> “Web Site” –> “Quick Create”, filling in a temporary URL and click “Create Web Site”.

azurefig4

Within less than a minute, the site is up and running with a nice landing page, and is visible in my dashboard.

azurefig5

From here, you will see an impressive range of features, but let’s not get too excited right away. I will cover some of these features further on this article. Let’s focus on getting the HTML site up and running.

You can do this with FTP, or use a special tool called WebMatrix (download). WebMatrix is free, and after an easy setup (just keep hitting “Yes” and “Ok”, you don’t need to install extra services for now) you can connect to your own site.

azurefig6

After I login using my Azure credentials, I can open my previously launched site.

azurefig7

Now I can easily build a simple HTML site. A good way to start is by using a Boilerplate template, which you can load by selecting “File” –> “New” –> “Site from Template Gallery”.

azurefig8

Now select the “Boilerplate” template, click “Next” and then “Skip” to load it locally without configuring. You now have a solid framework to work with.

azurefig9

As you can see in the above screenshot, it also takes care of proper loading of (in this case) jQuery code (grabbing it from the Google CDN), and it also prepares Google Analytics code. There is already an included style.css, which you can edit and expand.

I will now make a nice welcome message for you SitePoint visitors. After I’m done editing, I can easily upload my code to Azure, on my current site or a new one (which you can create from within WebMatrix). WebMatrix does all the work, you just wait and click “Next” a few times. And within minutes, there it is: http://jbboilerplate.azurewebsites.net/

How to setup Magento e-commerce on Windows Azure

Now let’s make it a bit more interesting by setting up Magento on Azure, to see how easy it is to launch a database application. And to give it some extra juice, I will set it up on a subdomain of my own site.

Since Magento isn’t offered in the gallery (like WordPress is), I will have to use a different approach. Say “Hello” to VMDepot, a richer version of the Gallery. It works with images, like the ones Amazon AWS is using. And with around 700+ images available, anything you won’t find in the Gallery should be there as an image.

azurefig10

Images are added in the “Virtual Machines” tab. Selecting “Browse VM Depot” gives me a long list of all available images. You first need to select an image to load into your Azure account, after which you can build a “Virtual Machine” on top of that.

azurefig11

As you can see, all the most recent versions are covered. In this case they are offered by BitNami, a reputable provider. It comes with Apache, PHP, MySQL and of course Magento itself. If you want to browse the list outside of Azure, it’s here.

azurefig12

In the next screen you fill in a few basic details to configure a storage account (where the files are actually located). After that, you just have to wait while it’s being installed.

azurefig13

Afterwards, you need to register your image before you can proceed. An unobtrusive (perhaps too unobtrusive?) notification alerts you to this fact, and that’s also where you will find the “Register” button.

azurefig14

A pop-up appears, where you can change the name of your install if you want. Then, after a little more waiting, your image gets the “Available” status. You can now build your “Virtual Machine”.

azurefig15

Remember I said Magento wasn’t in the Gallery? By downloading the image it now is, and you can access it by clicking “From Gallery”. It is now located in “My Images”, and you can install this just like WordPress, with the addition of configuring SSH access.

azurefig16

Don’t forget to set a HTTP endpoint in step 4, or else you can’t connect to your virtual machine. After you have completed all the steps, it runs for a few minutes while it is deploying the image.

azurefig17

There it is: Under “DNS Name” you will find your URL, for which you can configure a CNAME (or access it directly). You need to add your site CNAME URL in the admin to make it actually work, of course.

azurefig18

If you are seeing this, you know it worked. “Access my application” brings you to the actual Magento frontpage. You can find my demo here (it’s empty, but it’s working):
http://azure.buildyourownwebstore.com/magento/.

azurefig19

I hope you’ve picked up a few techniques in this article that will come in handy when you enter the Push the Web Forward contest. The deadline for entries is 20 December. Keep your eyes open for one more article from me soon on some more advanced tips and tricks when using Windows Azure.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

No Reader comments