Skip to content

Backend: Digital Ocean

Jump to bottom
nc22349 edited this page Apr 21, 2017 · 2 revisions

In addition to thoroughly rerouting our website using Flask, we changed from hosting our website on GitHub Pages to hosting it on Digital Ocean. The advantage of Digital Ocean is that it allows us to run Python and (hypothetically) host a more dynamic website. Below, we detail the process by which we created our Digital Ocean "droplet"--i.e., the server that hosts our website. As in setting up Flask, we followed Ryan Fuller's tutorial closely.

Creating Our Server

For free access to Digital Ocean, we used a promo code available through our GitHub Student Developer Packs.

Digital Ocean deals in what it calls droplets: virtual servers that can be used for anything from hosting a website to serving as a cloud backup. It's cool to think that our little Streamer Surf project has its own dedicated server at Digital Ocean.

Configuring Our Server

From Terminal, we logged in to our remote server and installed the tools necessary to set up a virtual environment and use a virtual host--viz. Apache and WSGI:

sudo apt-get update
sudo apt-get install apache2
sudo apt-get install libapache2-mod-wsgi python-dev
sudo a2enmod wsgi

Afterward, we were able to clone a copy of our repo to the server and establish a virtual environment within it:

sudo apt-get install python-pip
sudo pip install virtualenv
sudo virtualenv -p python3 venv

Inside the virtual environment, we used pip install flask to add the tools necessary to run our repo's app.py file within the server. We found to our delight that we were able to build our website; for the first time, our proprietary website had been run on its proprietary server.

Publishing Our Website

So far, we'd only been able to run out website on our server; it was not available to the world, or even to us unless we logged in to our droplet's virtual environment. So the next step was to take our website public. We found that this was a two-step process: first, we would need to set up a virtual host to build and display our website, and then we would need to connect our domain name to our server.

Step One: Virtual Host

In order to take our website public, we set up and enabled a virtual host inside our virtual environment in our cloned repo on our Digital Ocean droplet. (I know, I know, it's a mouthful.) To do so, we first entered this command in Terminal: sudo nano /etc/apache2/sites-available/cs329e-idb.conf. We were then able to directly edit the virtual host, connecting it to our server's IP address. To enable the host, we typed sudo a2ensite cs329e-idb.

We still needed to allow the host to build our website. To do so, we created a WSGI file which held a call to our app.py file. Now, whenever our server received a request to display our website, it would access the virtual host, which would use Apache to build app.py, thus displaying our website.

But we still had a problem: it was impossible for someone to visit our website, because the URL streamersurf.me wasn't yet connected to our server!

Step Two: Linking Namecheap to Digital Ocean

The next thing we did was link our Namecheap domain name (streamersurf.me) to our droplet's IP address. This way, whenever someone navigated to streamersurf.me, Namecheap would redirect them to our droplet, which would trigger the build of app.py.

On the Namecheap side, all we had to do was tell it to connect to the Digital Ocean DNSs, the colorfully named ns1, ns2, and ns3. Now, when someone typed "streamersurf.me" into their URL bar, Namecheap would direct the traffic to the Digital Ocean DNSs; this was not enough setup, yet. By returning to Digital Ocean and associating our droplet with our domain name, we ensured that the Digital Ocean DNSs would be able to convert the URL into a recognizable IP address--namely, our IP address.

Basking in Our Success

So--through all this setup, we discovered that there's a complicated dance between one's entry of a URL to the display of a website. The process between URL entry and StreamerSurf popping up goes like this:

  1. User inputs URL "streamersurf.me"
  2. User's DNS recognizes the URL as belonging to Namecheap and redirects the URL there
  3. Namecheap recognizes the URL, accesses our custom settings, and passes the URL along to the Digital Ocean DNS
  4. The Digital Ocean DNS converts the URL to our server's IP address
  5. Our server is notified of the request
  6. Our virtual host builds app.py
  7. The website displays for the user
Clone this wiki locally