NOTE: This article is written for our First-Generation Cloud Control Panel. You can access this interface from the Next-Generation Cloud Control Panel by clicking your username in the upper-right of the control panel and selecting "First-Generation Control Panel".

Overview

In this tutorial we plan to deploy a simple web page that retrieves an image from the Cloud Files platform. Under the hood we will be using some rewrite rules to obfuscate the origin URL. For SEO purposes etc.

What we need

• FTP Application FileZilla is a good choice
• Python installed on the local machine. (Optional)
• A Text Editor (Not a Word Processing program..Like MS Word or OpenOffice) I Like ConText for Win and VIM for Linux.
• A Picture any will do.
• FireFox / Python (depending on what method you use to upload to Cloud Files)
• Coffee **MOST IMPORTANT!**

Our Data Floating in the Clouds

To CloudFiles we go.

Now we will cover a couple of ways to get some media onto CloudFiles. The first example is very simple and covers using an application called FireUploader a Mozilla FireFox extension. The next example will describe how to upload files using the Python API.

Example one FireUploader (Less Technical)

This is a simple Mozilla FireFox Extension that allows you to upload files directly from your machine to CloudFiles in seconds.

Install

• Head to FireUploaders Website in FireFox.
• Select Download at the time of the writing it is on the right side of the page.
• There will be a popup asking if you would like to install this Plugin select install.
• After you are done installing you are prompted to restart FireFox do so.

Upload stuff

• Head to manage.rackspacecloud.com.
• Login.
• Head to Your Account then API Access.
• Copy Username and API Key.
• Then in FireFox select Tools -> FireUploader.
• In the drop down on the right select Mosso Aka The RackspaceCloud.
• Now select manage.
• Put your Username in the Username spot and the API Key in the password spot. Do not use your manage.mosso.com password as this will not work.
• Toggle Save password as desired then click Add then ok.
• Now lets create a container. For this example lets call it media. To do so select the blue create directory icon in the right hand corner of the application, name the container click ok.
• Now doubleclick on the newly created media container.
• For this example drag and drop the video and image file onto the container window.
• Wait for the stuff to upload; while waiting checkout out our new Tools Site this site showcases applications running on Cloud Technology!

Enable Container on CDN

• Head to manage.rackspacecloud.com.
• Login.
• Head to Hosting then CloudFiles.
• Select media then at he bottom click the checkbox that says publish to CDN.
• Copy the CDN URL for later.

Example two - Python API (More Technical)

For the purposes of this example we assume you have Python and the API installed. For more info on setting up the API for Python see Python API Installation for configuration steps.

The Code

This script is very simple and is a great place to start working with the Python API. This will upload one file and is really only useful for this example but gives you a good idea of how to upload a file from the Python API. =)

#!/usr/bin/env python
import cloudfiles
conn = cloudfiles.get_connection('UserNameGoesHere','APIKeyGoesHere')
cont = conn.create_container('media')
obj  = cont.create_object('image1.jpg')
obj.load_from_filename('PutPathToImageHere')
print "File Uploaded!"
if cont.is_public == False:
    cont.make_public()

Walkthrough

Ok so the code above does a very simple task... uploads a file and enables CDN on the container named media we created. Here is a quick walk through of how to execute this code on your local machine:

• At line 3 replace UserNameGoesHere with your manage.rackspacecloud.com username and replace APIKeyGoesHere with your API key.
• At line 6 replace PutPathToImageHere with a valid system path like Example C:\\images\\image1.jpg <== Windows Paths have to be escaped with an extra \.
• Save the Script to your Desktop - let's call it cfupload.py.
• Open your terminal.
• Change directories to your desktop.
• Run this command from your terminal :

python cfupload.py

• Now wait for the image to upload this should only take a second.
• Wipe your brow the worst part is over...

Cloud Sites Setup

The Sample Page

Here we will create a simple page that calls an image on cloud files using the local server side path in this part of the tutorial we use mod_rewrite.

The Simple xhtml page

The Code:

<html>
 <head><title>Real Simple Webpage</title></head>
 <body><img src="image1.jpg" /></body>
</html>

Ok well there is the super simple code.

Now the .htaccess

Here we will create the rewrite rules that will redirect the image to the Cloud Files platform. We need to grab the CDN URL for the container media we created. To do this:

• Head to manage.rackspacecloud.com
• Login
• Head to Hosting -> Cloud Files -> Hightlight media and copy the CDN URL

Once we have that; here is what the rewrite rule will look like:

RewriteEngine on
RewriteBase /
RewriteRule image1\.jpg  http://c0203623401.cdn.cloudfiles.rackspacecloud.com%{REQUEST_URI}

Replace the container URL with your own and ensure the %{REQUEST_URI} is right in front of it with no spaces.

What this does is rewrite anything called image1.jpg.

The {REQUEST_URI} is a variable that holds the relative path to the file that is being requested. So it will always redirect to the correct place. if you have anymore questions about mod_rewrite check out Apache's Documentation

You might run into trouble getting mod_rewrite working if your application resides in a subdirectory of the main site.  Try replacing "/" with the subdirectory of your application in the RewriteBase directive, as described in this article.

Creating the demo Cloud Site

For the sake of this tutorial we will create a sample Cloud Site. To do this:

• Head to manage.rackspacecloud.com.
• Login.
• Head to Hosting -> Cloud Sites -> Select Add -> Name the domain whatever you would like. I recommend not registering a domain.
• Follow the steps in the site creation process.
• Once the domain has added select the General settings tab.
• Copy the FTP URL.
• Open your FTP application and login using the username and password for this domain.
• Upload the .htaccess file and the html page to the /www.domain.com/web/content/ directory.

Conclusion

Now go ahead and navigate to the sample page we created; and like magic the image being called is actually coming from Cloud Files and if the user looks at your source code it looks like the image is being called locally =). Now this won't change the actual http request, but it does however obfuscate the URL in the source code.

If you have any questions or comments or; if this demo suddenly does not work please shoot us an email at cloudfiles@rackspacecloud.com and we would be more then happy to answer any questions you have!