Challenge 1: Building a HTML5 CSS3 Website on Ubuntu under Windows Azure

For my first challenge I decided to do a Ubuntu VM in Windows Azure – available here: http://168.62.162.254/

Being a Linux enthusiast, and having heard my coworkers talk about Windows Azure in the past, I could not help but doing this challenge instead of the others available. Little I knew it was going to be so difficult – it took me over 10 hours and 2 days of work!

When I started the challenge, I tried following Jeff’s tutorial to the letter and added a few screenshots of my own (this was the first day when I thought I’d take less than 3 hours in the whole thing). I noticed that Jeff’s tutorial was missing a few screenshots (although he did provide a link that had all of these, so still a great tutorial). One interesting feature I learned about is that Windows Azure offers the option to connect virtual machines to balance the load of traffic to your application and it also offers what they call “availability set” which allows you to create a set of virtual machines across multiple domains to make sure that your application is not affected by single points of failure.

2

3

I found these two features very interesting because these are topics I have heard about at my work and are certainly more difficult to implement that a single click of a button.

As Jeff pointed out, the process to install the machine does take a while but you can check the status by clicking on the bottom information button.

4

I also found it very interesting that you can “load-balance traffic on an existing endpoint,” which I guess allows you to load-balance the connections to specific ports.

5

One of the first “road-blocks” I hit during the tutorial was testing out the apache installation. I wasn’t getting the “It works!” page and I thought it was an issue with my browser/OS (I’m using Ubuntu) so I tried my Windows 7 virtual machine and still couldn’t get it to work. However, then I changed my endpoint from port 85 to port 80 and it worked just fine!

8

After installing apache and getting the “it works!” page however, I got stuck and could not get to phpmyadmin. After several attempts, I finally gave up and restarted my machine into Windows 7 thinking that doing so would solve my problem – and of course it didn’t!

I then researched how to install phpmyadmin on Ubuntu server, and came across this page: https://www.digitalocean.com/community/articles/how-to-install-and-secure-phpmyadmin-on-ubuntu-12-04

From there, I found instructions to manually add phpmyadmin to apache’s config file and that did it!

9

Note however, that you will need to press Ctrl X to exit the editor and then confirm “Y” to save changes and press enter to confirm the path of the file (leave that unchanged). Then, as the instructions in the link above state, you’ll need to restart apache.

10

After a while of fighting with the command line, I decided to give the tutorial a spin-off and decided to install a desktop for my server. I then found this tutorial: http://blog.appliedis.com/2012/11/05/remote-desktop-to-ubuntu-in-windows-azure/. Upon preparing for the installation, I realized that installing the desktop would take over 1GB of disk space, so I decided to run a command to know how much space I had available.

14

15

After ensuring that I would have enough disk space, I went for it and installed the Ubuntu desktop. If you’re doing this, it will take a while, so you should expect to wait a few minutes. After a bit, it’ll stop downloading and updating stuff.

16

After that, I went ahead and installed the RDP software, set up the endpoint, and clicked connect in the main screen as explained in the tutorial above.

17

18

Once you download the “.rdp” file, you’ll probably have to accept a few windows security screens like these ones:

19

20

As the tutorial says, make sure to change your username in the Xrdp and put the password for it.

21

And… voila!

22

After spending nearly 2 hours trying to get a WordPress installation to work, I decided to take another approach and use FTP to upload files to my VM instead. For that I used Vsftpd following these two tutorials:

http://blogs.msdn.com/b/avkashchauhan/archive/2012/06/18/installing-and-running-vsftpd-in-centos-gallery-image-available-at-windows-azure-virtual-machines-for-linux.aspx

https://www.digitalocean.com/community/articles/how-to-set-up-vsftpd-on-ubuntu-12-04

24

After I got filezilla to connect to my VM, I went to /var/www and changed the name of the existing index.html to something else and then I tried to upload my files from my local machine, however, this turned out to be more complicated that I thought. After researching all over the internet, I realized that the issue was that the files in my “www” folder in the VM were owned by “root” so I had to change the ownership of my files (used this link to learn about changing ownership: http://manpages.ubuntu.com/manpages/lucid/man1/chown.1.html)

28

29

After changing ownership, I was able to upload my files using Filezilla and got the website we built for CIS 425 on my page – I would’ve done something cooler but I already spent way too much time on this challenge.

30

31

And finally, the ultimate test (site running from within the server’s GUI):

32

It was A LOT OF WORK, but certainly worth the learning!

Advertisements

One thought on “Challenge 1: Building a HTML5 CSS3 Website on Ubuntu under Windows Azure

  1. Pingback: Challenge 2: Intro to Windows Azure on Microsoft Virtual Academy | yvivas440

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