This entry seeks to provide you with a quick and easy way to get up to speed on Azure quickly by deploying your own personal website as an MVC application in to the cloud. Consider it a “Hello World”. I will do the following:
- Demonstrate how to write and deploy a simple Azure hosted website
- Demonstrate how to to create your own image and content server using Azure Storage and expose your content publically through URLs
- Demonstrate how to use new tools like Azure Storage Explorer to access your cloud storage
So over the Thanksgiving week I decided to move all my stuff over to Azure for fun. This includes hosting my website, moving my RoR code over to a ASP.net MVC code (don’t freak, ASP.net MVC is pretty much set up like RoR and PHP as far as directories and deployment, so it’s easy), and moving all my images and other media over to Azure Storage so that I can just reference images and CSS using URLs without needing to redeploy my website (much like I did with Amazon’s S3).
SIDEBAR: If ASP doesn’t interest you, we now have PHP, Java, Eclipse, Tomcat and MySQL on Azure. Check it out here.
Now, since I’m a fan of bullets, this is what I’ll walk you through:
- Setting up your Azure Compute and Azure Storage instances
- Grabbing some tools to make it easy to upload images/documents/code/zips to your Azure Storage cloud
- Creating an ASP MVC application in Visual Studio
- Making a simple MVC website
- Get the URLs for your images and content from your Azure Storage and plugging them in (Optional)
- Deploying your application in Azure
- Changing your DNS settings to point your domain to your cloud application
If you have access to Azure, all the other tools in this post are *free* – and you can probably do a simple site in an evening.
SIDEBAR: I’m most familiar with Amazon’s cloud storage solutions, as are you most likely. So, you probably want tools and functionality that matches that experience. I’ll do my best to set you up in the same way. After all, that’s what I wanted too.
First: Setting up Azure Instances
I really wanted to launch in to the tools first since they are so cool and easy to use, but first I wouldn’t be a good citizen if I didn’t tell you how to get all the tokens and keys you will need to use the tools you’re going to download. So, first you’re going to need to set up a few things in the Azure portal. I assume you are either in the CTP *or* you’re reading this in January and purchased Azure through the Microsoft Online portal. Either way the actual configuration portal is: https://windows.azure.com
You will need at least two things created here:
- Azure Hosted Service Instance (for your code)
- Azure Storage Account Instance (for your images) (optional)
On Introducing a Model using SQL Azure
You *may* want a SQL Azure instance if you want to really make your Model in your MVC fancy. I’m doing an easy slope today, but once you read through this adding SQL to your Model won’t be hard at all. In fact, the new Azure portal actually gives you connection strings you can just cut/paste in to your application, so hand holding isn’t really necessary. You also can technically use “Tables” in your Azure Storage account and use ADO.net to do simple things. However, these tables aren’t true SQL but more MySQL circa 2000 - flat and dumb but good enough for simple things.
Both of these instances are available from the Azure portal, just click on the “New Service” link and set up one of each:
As you can see from above, I’ve already used my one Hosted Services account the Azure Gods give you for CTP, but you get two Storage Accounts. Once you go through the configuration, you’ll be given a bunch of information on how to access your instances (particularly for your Storage Account). It’s fine just to “Next” past it all, you can get back to it easily.
Important Things To Consider When Selecting URLs and Names in Azure Instances
Keep in mind that whatever you choose here, especially URLs, will be publically facing. It’s best to name them something that you can easily type, remember, and won’t cause suspicion when others access your data. Sure you may be redirecting to your website’s domain name, but anyone is going to think twice when they see turnyellowteethwhite.cloudapp.net somewhere in your CSS.
On Affinity Names
One of the options you’ll see when creating both instances is setting your “Affinity”. You can choose the geographic region that your storage and application is hosted in. This is interesting, since Google AppEngine and Amazon S3 abstracts this away. However, a lot of customers like to know exactly where their instances are to make sure they are physically as close as possible for latency reasons. You wouldn’t want your Storage on one coast and your Compute instance on another. With Google or Amazon you don’t get that assurance. You can just leave it be as “Anywhere, US” or if you want select a region, name it, and then select it any time you create other instances to make sure it’s all in one place.
Once finished, you should see something like this:
Here I named all my instances “Personal” so I know it hosts my personal site, and I simply made my URLs brandonwerner.* for each.
We will be going in to each of these to either deploy our application or get the tokens we need to connect to our storage, but for right now just keep the tab open and ready to go.
Second: Grab Some Tools
Azure Storage Explorer
I imagine right about now there are tons of developers doing for Windows Azure what CloudBerry S3 and DropBox did for Amazon S3 – making the Storage API something easy to use and abstracted away. As both of these companies proved, lots of money can be made by developers offering this piece of functionality to customers alone. As of this writing, while we are still in CTP, those tools have yet to emerge on the scene yet (but they are coming). However, one application contributed by a great development team on CodePlex is well on it’s way to bridging this gap. Called “Azure Storage Explorer”, it basically provides the same functionality as CloudBerry S3, if not providing as many features for consumers. However, for quickly getting connected to your Azure Storage and start adding images and files in the cloud, this app is awesome. It’s also free.
TODO: Grab and Install Azure Storage Explorer From CodePlex here: http://azurestorageexplorer.codeplex.com/
Visual Studio 2010 (Paid or Free)
There are now many types of Visual Studio as we try to offer more ways for developers to use the Windows and Azure platform without having to pay for it. As of this writing, Visual Studio 2010 is in beta 2 and free to download. Do so. I love it, and find it hard to go back to anything Visual Studio < 2010. It’s nice, and not nearly as heavy as past Visual Studios. However, if you want something you know we won’t come hat in hand asking for money later, you can also download one of the Visual Studio 2010 Express editions when they become available. These are also extremely nice and free. I don’t know why they are not more widely known, the delta between them and the full version isn’t too much for general development tasks. Azure SDK (which we’ll get next) supports all of these. It does support Visual Studio 2008 and Microsoft Visual Web Developer 2008 Express with SP1, but not the cool new MVC stuff we’ll be doing in this example. For now, just grab Visual Studio 2010 Beta, and then move on to an Express 2010 edition later if you need. Before you ask, VS2008 and VS2010 can sit side by side. Azure is better with VS2010.
TODO: Grab and Install Visual Studio 2010 Beta here: http://www.microsoft.com/visualstudio/en-us/products/2010/default.mspx
Grab the Azure SDK
The Azure SDK is amazingly lightweight for all the stuff it does for you. It will provide some nice templates for all your cloud work and provide a little virtualized Azure right inside your computer for testing and debugging. You’ll need to flip some settings on your Windows computer first though, as you’ll need IIS and ASP.net running on your machine.
To do this, let’s start doing it the Windows 7 / Vista smart way and make this three steps:
- Click on your Windows Orb, type “Turn Windows Features on or off” and hit enter. (isn’t that easier than 7 clicks?)
- In that dialog box that shows, select the following:
Under Microsoft .NET Framework 3.0, select Windows Communication Foundation HTTP Activation. Under Internet Information Services, expand World Wide Web Services, then Application Development Features, then select ASP.NET and CGI.
3. Now click “OK” and those features will install.
Now, assuming you have installed Visual Studio 2010 and selected these features above and installed them in your OS, all you have to do is download the Azure SDK and go through the prompts.
TODO: Grab and Install the Azure SDK here: http://www.microsoft.com/downloads/details.aspx?FamilyID=6967ff37-813e-47c7-b987-889124b43abd&displaylang=en
Third: Launch Visual Studio 2010 and Create a MVC WebRole for Azure
So, by now you should have:
- Setup your Azure Hosted and Storage Instances
- Downloaded the cool tools to get to work
This part is so easy it’ll make you want to go back in time and punch your RoR self in the face for being so smug. We’re going to make a MVC website and deploy it in the cloud in just a few clicks. No rails needed, but batteries are very much included (as I’ll show below)
- Launch Visual Studio 2010 (NOTE: You need to run Visual Studio as Administrator to deploy Azure applications)
- Select “New Project” from the left of the application
- Under Visual C#, select “Cloud Service”, name it what you want below and click “OK”
4. Next, you will be prompted with all I can say is the *real* Azure Cloud selection service, which offers a bunch of different Web Roles now supported with the new Windows Azure and Visual Studio 2010 in a bunch of different languages (I told you it was worth downloading the beta). You see that C# and Visual Basic gives you the most functionality, allowing you to create four different types of web roles.
SIDEBAR: What are Web Roles? Consider them little runtime bundles that Azure understands. Each has a purpose and is supported by Azure when being deployed (but you’ll have issues if you try to upgrade from one role to another, as I’ll explain later) They are pretty self explanatory for anyone familiar with development. The best thing to say here is that a *real* Azure application will have many roles – separated primarily by backend (Worker) roles and frontend (Web) roles.
For our purposes, we will only need one role, the ASP.NET MVC 2 Web Role. Select it, and move it over to your solution. You’ll see it automatically names it “MvcWebRole1”:
When you are finished, click “OK” and you’ll be prompted if you want to add test cases to your application. Yes, testing is good… but for our purposes click “No” and OK.
Your application is created. Technically, you could hit F5 and run this right now if you wanted, but that would be too easy. Next, well do some quick MVC hacking to get a website up and running.
Fourth: Create Your Website
I won’t go in to the whole design pattern of MVC here, except to say that it stands for Model, View, Controller. The View represents what people see, the Model is the data that your website uses and stores state, and the Controller is where all the work happens which uses the data in the Model and displays it in the View. It’s a great way to separate your programming in to different areas of concern. For our simple demo, we won’t be making much use of the Model, but we will be using the Controller and View (in fact, we will be storing data inside of the Controller since it is static text). It is also helpful to state that the MVC piece in ASP.net works much like Servlets in Java, you won’t be referencing files or keeping code in real files as shown in the web browser. Instead, information is called up using REST-esque URL endpoints.
Visual Studio sets this up very nice for you by providing a simple folder structure that separates the three components as shown below:
As you see above, Visual Studio has a high level group called “PersonalSite”. This is where all your WebRoles get bundled up for deployment. Some may be tempted to make a comparison to J2EE with Roles being EJBs, but don’t – configuration and deployment are miles easier in this environment than in J2EE environments, and WebRoles do not match 1:1 in regards to containment or design patterns. EJBs are meant to be very self contained things, whereas WebRoles expect to be able to communicate to each other and do not suffer from RMI hell that require local or remote calls.
Creating Our Template Page
In the process of including all the batteries you’d need to get up and running fast, the MVCWebRole template put a lot of code in your environment that you’ll need to customize. First on this list is the Site.Master template and the CSS.
ASP.net uses templates the same way as Dreamweaver and some Java IDEs use them, to provide a basic faming for a site and then allow all derived pages to inherit that template. It looks like this:
Looking at the Site.Master, it’s pretty easy to see you’ll need to do the lion share of the work here to get your website to look the way you want. The rest is just content.
You’ll probably want at least the following to be static in the Site.Master:
- A Menu that shows the pages in your website (this will be code that references your Views, more on that later)
- A footer that says what rights the views have to your site, if any
- A header and a site banner.
What you’ll probably want to define with <asp:ContentPlaceHolder> inside of some <div>s:
- Your title, which you will want to change for each page your user visits (so many people don’t do this)
- Your main content, such as your text in your About page or Publication list in your Publications page
Here is what I’ve done for my site. Notice the callouts for helpful pointers on what you should do on your Site.Master:
Brief View and Controllers Overview
One of the things it is helpful to discuss here is what the Menu code is doing here. This ties deeply into our MVC pattern and you must have the view and controller code in your site in order for your menu to work. Essentially, I can boil this down visually for you in this manner:
As you see, each menu item references both the Controller for that link and the View which will use the information defined inside that Controller.
It’s helpful to illustrate here that one Controller can be used for many Views (in fact, that’s an important part of the pattern.)
In my website, which is simple, I just use the Controller to provide some static content for each View. In particular, I set three things for each View():
|Name ||Name of the Specific Page (will be used in Title) |
|Title ||The Title of the First Heading (I customize each <h3> heading this way) |
|TagLine ||Just the tagline to use on the site. Unused at the moment |
The code looks like this (notice how each method links to a separate view page):
1: public class HomeController : Controller
3: public ActionResult Index()
5: ViewData["Name"] = "Brandon Werner";
6: ViewData["Title"] = "About Brandon";
7: ViewData["TagLine"] = "I Love Software";
9: return View();
12: public ActionResult About()
15: ViewData["Name"] = "About Brandon Werner";
16: ViewData["Title"] = "Who Am I?";
17: ViewData["TagLine"] = "I Love Software";
19: return View();
22: public ActionResult Publications()
25: ViewData["Name"] = "Brandon Werner";
26: ViewData["Title"] = "Publications";
27: ViewData["TagLine"] = "I Love Software";
29: return View();
You will obviously wish to add more to use in your own View, including handing off much of the data to a Model and performing CRUD operations on that data from the Controller. However, we are building a simple website here, so it should do for now.
Creating Our Index.aspx and Other Site Pages
As you can see from above, we now have a HomeController.cs filled with all the stuff we may want to use in our webpages (Views). Visual Studio 2010 makes this part relatively painless, since we already have the template defined. All we need to do is call in our Template file, make sure we call in content from our Controller as we need to to make it dynamic, and fill our views with content.
Here is what it looks like at a high level:
If you notice above, we call things out of the Controller by using the code:
<h3><%= Html.Encode(ViewData["Title"]) %></h3>
Obviously, ASP.net provides a lot more features than simply pulling out Strings through this call, but for our simple website this enough to experiment with. Be sure to check out the ASP.net tutorials for more on this and the code available in the Controller, as there is deep functionality I am glossing over here. This code should get you pretty far, however.
Using the Design View for Views with Templates
You can leverage the Design view in Visual Studio 2010 to add content quickly without needing to play in the code very much. For instance, this is what my editor for index.aspx looks like after I’ve applied the Site.Master template:
As you see, it has hidden and locked all the content except the content I can edit in this page. (the code that is inside the <asp:Content> tags.) For really elaborate content, this view may be helpful to see if the content areas you’ve called out in Site.Master actually look appropriate to your website with the template applied. Although you can also type and add content in this open area, I wouldn’t. Although Visual Studio 2010 strives to be standards compliant, nothing will replace lovingly crafted <divs> with logical classes and ids. That’s just a personal opinion though, you can do whatever you wish.
Go To Town With Your Own Site
These are the basics you’ll need to start creating a great site. From here you can add pages to your heart’s content. You can even start injecting ADO.net in to your controller for a Model, or just define some global variables that all your site will use. Either way, you’ll have a ton of fun making this dynamic
When You Are Done: Run Your Website Locally!
Visual Studio 2010 and the Azure SDK make this very easy to do. Just Press F5. You will see your “Azure Development Fabric” startup and become an icon in your notification bar. If this is your first time running the Azure Developer Fabric locally, you will be prompted to setup your SQL instance to store some data. This usually requires no input from you (unless you did something fancy to your SQL Server Express install) and you’ll be up and running in no time.
SIDEBAR: The Azure Development Fabric tab has some great functionality, including being able to show you log files for *each* instance of our Compute instance you are running, and if you have more than one role, you can see the interaction of the various roles inside the consoles as you test your application. All of this is pretty impressive, but boring for us since we only have one webrole running in one instance.
Fifth: Create Your Own Image and Content Server On Azure Storage (Optional)
Whew. I know that you probably spent a good evening getting your site just the way you want it. Maybe you even played with some deeper and richer content from your Controller. Excellent. Maybe you’ll be writing some awesome Azure apps in your future? If not, you probably just want to crank open that awesome Azure Storage Explorer I talked about above and get cranking putting your content up there to reference in your website or CCS file. Awesome, you’re in the right place.
SIDEBAR: Why is this optional? Because you can just as easily add content inside of the Content folder of your WebRole in Visual Studio 2010 and references those images locally. This works quite well. You’ll only want to go this route if you like the idea of having unique URL access to your images and also wish to store other content in the cloud under your own URL.
Grab Your Azure Storage Token From the Azure Portal
Just like Amazon S3 and other cloud storage solutions, Azure Storage uses Access Keys to unlock your storage. You’ll need to pull these keys from the Azure Portal to use Azure Storage Explorer and start loading in content. All you need to go is go back to your Overview page, click on your Azure Storage account, and retrieve the Primary Access Key from the portal. It will look like below (obviously I will regenerate my keys after this is published)
Keep this tab open, and launch Azure Storage Explorer. (NOTE: You will also need to run this as Administrator.)
Azure Storage Explorer will start with some strange placeholders that will fail upon load. What will not fail, however, will be your own local Azure Development Fabric instance (that you created in Visual Studio 2010 above) that you’ll see in the list to the left. You can use this tool to insert in Tables, Blobs and Queues in your local instance for testing purposes as well (how cool is that?). However, we will need to use our Primary Key to set up our external storage “in the cloud”.
To set this up, you need to click:
Tools –> Storage Settings
Here, you will be prompted to add additional Storage instances.
You will need:
- Account Name: The unique id you gave Windows Azure when setting up your Azure Storage. Remember I named this brandonwerner (as seen above)
- Account Key: The Primary Key from your website
Enter this information in to one of the empty fields for as many instances as you want to access in the tool.
After you have done this, Azure Storage Explorer will connect to your instance and in a few moments it will appear to the left (as shown above)
Create Your Blobs, Start Adding Things
The only thing left to do is create a new Blob instance inside your storage and start adding content. We’re almost home!
But first, a conversation on the URL mapping before you start calling your Blob containers something funky:
How External URLs on Public Blobs Map to URLs
The URLs you will use to access content (or allow others to access files and content) are mapped the unique Azure Storage name you selected at setup and the name of your Blob container which you will soon create:
This means that you’ll want to choose container names inside your Blob instance that make sense in regards to the content you will be putting in the Blob instance. So, if you are going to host your awesome XNA game installers on your Blob, you’ll want to call it something like “Apps” or “PublicApps”. That will make it clearer for both you and your customers.
For us, we’ll want to create a Blob called images since that will be what we are putting in our Blob instance.
To do this in Azure Storage Explorer, simply select the “Blob Containers” folder and go to Storage Account –> New Blob Container and create a container called “Images”
NOTE: Make sure to make your Blob Container “Public” so others can access the content.
Adding images and other content in Azure Storage Explorer
After you’ve created your Blob Container all that’s left is the simple matter of uploading whatever you want to put in your blob space. It’s fairly simple with the Azure Storage Explorer, as shown here:
Once you’ve added all your images, it’s very handy to get the URL for the content you’ve uploaded to your Blob. Simply right-mouse click any file and select “View in Browser”.
Pretty cool huh?
Going Crazy And Loading My Important Stuff In Private Containers
You may have been thinking this is awesome and you’d love to use this as your backup site for important files and documents you don’t want to lose. You can easily do that, and I recommend you do. But before you get too comfortable with using Azure Storage Explorer for all those tasks, I’d like to recommend you wait for other tools to emerge. For instance, right now Blobs do not support hierarchical folders. Amazon S3 doesn’t support folders either, but the interfaces in to Amazon S3 APIs by third party software emulates this functionality.
Using the Azure Storage Blob URLs inside of your CSS, other content
Now that you’ve added everything you want in to the security of the cloud, you can go back in to your code and add the URL references to anywhere you would like, including your CSS files and any links to external content you may wish to host in the cloud.
Sixth Step: Deploy To Azure!
Now that you have everything ready to go, time to hit F5 one more time and click around and admire your handy work! It should be quite a thrill to see everything that was running in a dedicated environment executing smoothly locally and ready to go to the cloud. After one last look, click on your Cloud Project and select “Publish”. Windows Azure SDK will neatly package everything up for you and helpfully launch both a the Azure Portal and the location of your deployment payload.
Your deployment directory will contain two files:
- A Service Package file that will have all your roles and configuration neatly in one package
- A ServiceConfiguration file which will have the configuration data for your application (number of Azure instances, any external config strings you may have defined for runtime access, etc.
This is what their beautiful icons looks like in Windows Explorer (just cause I love we also now have hi-resolution icons in Windows finally)
Beautiful aren’t they?
How you’ll probably see it in your boring “just the facts” view
Now that we have our package and configuration file, on to the Azure website for Deployment.
The Azure Deployment Portal
The Azure Deployment Portal is the place where you will deploy your bundled application. This is for the computer instance, which includes for our purposes the MVCWebRole we just compiled and deployed above.
You can access this by going to the Azure Portal and clicking on the name of your Hosted Services instance you created at the top of this blog entry. Once there, you will see an empty section under “Hosted Services” with options to deploy a new instance.
Production vs. Staging
The Azure Portal has two deployment environments, Staging and Production. You will want to use Staging first to verify your application works correctly before deploying it in to Production. You will get your own unique URL that is internet accessible to validate your application’s functionality. HINT: This would be a good time to test your website’s standards compliance as the W3C tool will be able to access the staging URL.
When you are ready to deploy in to Production, you can move or swap your Staging code by clicking the “arrow” icon in between the two environments. You’ll see that in a moment.
Below, I already have a Production instance, but I’ve deleted my Staging instance to better show you what you should see when first visiting the portal:
The Azure team has done a great job since CTP providing a lot of visual and textual cues on deployment experiences as you publish your application. The example above around operation time is a good example of this. Each step along the way the portal will indicate to you when something is happening and provide good feedback on the status.
Click deploy to begin deploying your code to Azure. You will see the web page below. Here you simply upload your package and your config file where prompted. Pretty simple. Yes, you can also have uploaded this in to the Azure Storage Blob and deploy it from there. However, considering this is a simple site there is no reason to do so.
Once that has been accomplished, you’ll see the “Deploying Package” progress bar as illustrated below. During this time, it is also assigning you a Deployment ID for tracking and that temporary staging URL I mentioned above. Once that has completed, you’ll want to click “Run” to actually start up your Azure deployment. You’ll see an “Enabling Deployment” progress bar while it does so.
Once that is completed, you’ll see an initializing status indicator in your WebRole status. This will turn to Green and “Ready” once your application is fully deployed. While we’re waiting… it may be helpful to go through the different lifecycles and examine the deployment cube in more detail
Once you see that your webrole is green and ready, click on the URL and check your application. This is the second best time to catch application breaks (the first was on your local machine, before all this deployment work). If you are satisfied, you should see your portal look much like the portal below, except that your Production instance will be empty.
Now, simply click the arrows button and it’ll do what it suggests, either move the staging environment over to Production (you’ll get an empty Staging environment for your next use) or it will swap what is in Production with the new Staging code. You can then continue to modify and deploy your application in the Staging environment and when it’s ready for prime time.. click the button to production!
The Seventh and Final Step: Point Your URL to Azure with CNAME
It’s been a long journey, but you are finally ready to cut over completely to Windows Azure for your personal site. All that is left to do is log in to whatever domain registrar you used for your own website and change the CNAME to point to your Azure application. This is pretty straight forward, as all you’ll need to do is route “www” to point to your Azure Web Site URL.
NOTE ABOUT CNAME: This is not ideal, as you will have to make sure your users visit “www”.yoursite.com and not go directly to yoursite.com (which will fail or go to your old hosting account if you still have it). However, Azure currently does not provide static IP addresses for their cloud compute instances. Indeed, if you think about this for a moment it’s hard to imagine they ever would considering the range of ipv4 IP addresses left and the amount of applications users will deploy on Azure. For the moment, CNAME is the best way to get this redirection to occur. If you choose to use your domain for your Azure Storage URL, you will also use CNAME for that as well.
Here is an example of what this menu looks like in my registrar, GoDaddy.com:
You’ll see that I’ve already pointed my “www” to my cloud application, brandonwerner.cloudapp.net. However, chances are good that you will have an “@” symbol in there instead (you can see I have this on my “ftp” host name). This is simply the registrar’s way of indicating that all traffic should go to the default IP associated with this domain, most likely set up by your old hosting account when you bought the domain and the hosting package. In your settings, edit “www” to point to your cloud application instead. Set the TTL to 1 hour and click submit.
The configuration screen for CNAME in GoDaddy.com as an example
Once you’ve done this step, it should be relatively instantaneous depending on what DNS servers you use. In a few hours, your website will go directly to Azure and operate directly from that URL in all ways (URLs and pages)
You’re Done…. Or Are You?
I hope this brief introduction to Azure got you interested in the whole platform, and especially what you can do around Roles in Visual Studio 2010. Now that you have the very basic “Hello World” of a Simple MVC application under your belt, branch out and try new things with the platform. Read up on the MSDN website or explore the Azure forums. Also, keep an eye out for new applications leveraging the Azure Storage instances you have, or if you’re feeling like being a superstar, write your own (I’d really like a Firefox plugin, if you are taking requests.)