Launch Your First Website with Domain.com and Google Cloud Platform

Every MLH member event this season will have free Domain.com codes and hundreds of dollars in Google Cloud Platform credit available for every single hacker. This is fantastic, and a great opportunity to write and launch your first site or web app!

The thing is, DNS can be confusing, and Google Cloud Platform (GCP) has so many great products and options, it’s very easy to get lost and give up. Enter this tutorial: we’ll show you exactly how to set up the simplest of websites with Domain.com, GCP, and Node.js.

A Quick Overview of the Web

If this is your first hackathon or development experience, welcome to the community! Either way, cloud hosting, DNS, and other Internet tools can be confusing, so here’s a brief and very basic overview of everything we’re going to talk about.

First, we’re going to register a domain name with Domain.com. Without getting into the complexities of the Domain Name System (DNS), a domain name record is an entry in a distributed, synchronized lookup table which translates a human-readable name (like example.com) into an IP address (like 123.456.789.123) so the machines can talk. Domain.com can give us a domain because it is a domain name registrar.

We are going to point our domain to the IP of a virtual cloud server provided by Google Cloud Platform. A ‘Server’ is a computer that has internet access and that others will be making requests to. ‘Cloud’ just means that someone else has this computer, we’re renting it, and controlling it remotely. ‘Virtual’ means that we’re not getting control over a whole physical computer, but rather a simulation run by a larger server. Using such a solution lets us do everything we could do with any computer, but ignore much of the messiness of an actual machine, leaving it to Google.

On this server, we will set up a very basic Node.js web server app. Node.js is a JavaScript run-time which will interpret our code to receive requests from web browsers and respond with something.

That’s just a brief summary, but we’ll get into the details below.

Register a Domain with Domain.com

First, we’re going to register our domain. Pop open domain.com and type in a .com, .net, or .org domain of your choice into your search bar and see if it’s available. (Note: you can register other domain types, such as .me, but they are not covered by the MLH promo code.) As of the time of writing, my desired domain, gcp-ddc-example.com is available, so it is auto-added to my cart.

The Domain.com promo codes given out by MLH only cover one year of registration and WHOIS privacy, so if you don’t feel like paying for more, make sure the selection is set to only one year.

Now, type in your MLH/Hackathon provided promo code, apply it. This should bring your total down to $0.00. After filling out the required information for a DDC account (if you don’t already have one), and pressing “Purchase Now” you should have your domain!

Find a hackathon organizer to get your promo code. Or, if you aren’t at a hackathon now, find an upcoming event.

Set up a Node.js Site on GCP

Now we have our domain address, but we have nothing to point it at. To use an analogy, we’ve claimed our land, but we haven’t built anything on it. Here’s where Google Cloud Platform comes in: they’ll provide a virtual cloud server that will host our site.

Register for Google Cloud Platform

First, sign up for Google Cloud Platform (which as of writing, comes with $300 in free credit for one year!). Your hackathon may also provide you with additional refillable credit.

Create a Compute Engine Virtual Machine

Now it’s time to make our virtual cloud server. Demystification reminder: cloud means that Google has the actual computer and we’re going to control it remotely, while virtual means that we will get access to a program running on one of Google’s big servers, simulating a relatively small one.

If you’re new to GCP, once you finish registration and log in to the management console, you will see a ton of stuff, but at the top left on the blue bar should be an indicator for the currently selected project. By default it should say “My First Project”.

You can either use this project, or make a new one by clicking on the dropdown and selecting “New Project” in the top right of the menu that pops up.

Once you’ve settled on the project you’re using, we’ll shift our focus to the big sidebar on the left. This navigation menu gives you access to all of GCP’s myriad services, which range from SQL databases and file hosting to genomics analysis and Machine Learning. We’re going to scroll down to the “Compute” section and click “Compute Engine”.

This should take us to the VM (Virtual Machine) Instances tab. To make our new virtual machine, click “Create”.

This will take us to the instance creation page. Here you will give your server a name and set some options. Most of these you can leave as defaults for your first site, but I heavily recommend changing the boot disk (default operating system) to the latest LTS (Long Term Support) version of Ubuntu, currently 18.04. You will also need to check “Allow HTTP Traffic” at the bottom, which will let people actually reach our site through port 80, the standard port for unencrypted web traffic.

After you click “Create” Google will start setting up your machine and you will see a loading indicator.

Once the server is set up, you will see something like this:

This means our machine is up, has an external IP, and we can connect to it. To do so, click the dropdown next to “SSH” and click “Open in browser window”.

This will open a new browser window with a simulated SSH (Secure SHell) terminal. For those of you who are new to this, welcome to the command line. You are now a hax0r.

Through the command line you will be able to control your server; install packages, write code, launch programs, etc. So let’s get to it.

Make Your Site

As you now have control of a Linux machine, you could run your website using whatever you wanted, but for the purposes of this tutorial we are going to set up a quick and dirty Node.js server. Node.js is a very flexible package which lets us write anything from front-end websites to app backends — anything that takes and responds to HTTP requests — using JavaScript. To start using it, we will first need to install it. Enter the following into the command line:

curl -sL https://deb.nodesource.com/setup_8.x | sudo bash -

This will use the command curl to download the source files we need. Now enter:

sudo apt install nodejs

This will actually install Node.js and make its commands and capabilities available to us. Enter Y for “Yes” when prompted during the installation process.

Now, we are going to make a folder to house our code. Enter:

mkdir [your_website] and cd [your_website]

to create the new directory and open it. We’re now going to write all four lines of code needed for our first tiny site. Open a text editor with either nano app.js if you’re new or vim app.js if you’re familiar with vim, and write the following lines:

What’s going on here? The first line imports the Express web server, a Node.js package that makes certain things very easy. The second line creates an instance of that web server called app. The third uses the .get() function to tell app that when it gets a request for “/” (also known as root or index, someone just typing in gcp-ddc-example.com) to respond using the callback function, which just uses the response parameter to print back “Hello World” as a level-1 heading. The fourth and final line tells the server to start up and listen for requests on port 3000.

Before we launch the site, we have to install the Express library using the Node Package Manager or NPM: npm install express.

We also need to redirect traffic from port 80 to port 3000. This is because when you type in a URL in a browser it makes the request by default to port 80, but we have Node listening on port 3000. Port numbers lower than 1024 require superuser privileges, but running our server as a superuser is very unsafe. Instead, we will just redirect port 80 traffic to Node.js using an iptables firewall rule. Drop the following in your command line:

sudo iptables -t nat -A PREROUTING -p tcp --dport 80 -j REDIRECT --to-port 3000

Now, all you need to run your server is node app.js. The command line cursor will hang, and you should be able to check that the server is working by clicking on the External IP in your VM Instance console. Everything going well, you should see something like:

To stop the server and regain control of the terminal, press Ctrl+C. The thing is, we want our server to keep running while we do other things in the terminal or with the terminal closed entirely. To do this, we’re going to install a process manager called pm2. Run sudo npm install pm2 -g to install it, pm2 start app.js to start the web server, and pm2 restart app.js to reload the server in the future if you make changes to app.js.

Connect Your Domain to Google Cloud DNS

Of course, we don’t want to advertise our site as being 34.73.232.20. That’s why we got our domain in the first place. We could connect the two together directly through Domain.com, but instead we are going to take advantage of GCP’s robust Cloud DNS service.

Navigate to the Google Cloud DNS console by either using the GCP sidebar (under “Network Services”) or using this link. You should be presented with the following:

Click “Create zone”. A “zone” is a collection of the DNS records that relate to a certain domain.

Make sure to keep the zone type “Public”. The zone name can be whatever you want, but the DNS name should be the domain you got from Domain.com. After clicking “Create” you should be taken to the zone management page:

These record entries are just defaults. For Google DNS to know to point people from our domain to our server, we need to create an “A” record. Press “Add record set” to get the following form:

Now, Google Cloud DNS knows how to manage our domain. But Google DNS didn’t register our domain; Domain.com did! So we still need to tell Domain.com to let Google Cloud DNS manage it. Go back to your Domain.com dashboard. You should see something like this:

Click “Manage” to open up the domain’s management interface, and then select “DNS & Nameservers” on the sidebar.

You should see a list of default DNS records, and also the domain’s nameservers.

Now, we need to change these from Domain.com’s to Google’s. Click “Edit”, and change the nameservers as follows:

Once you’ve done this, control has been handed over to Google Cloud DNS.

And that should be it! It can take a minute for DNS records to propagate, but soon enough, we should get the following if we access our domain via a browser:

Solidifying Your Server

There are just a couple more things left to do to ensure your server keeps working even if our GCP VM reboots:

1. First, we are going to reserve our server’s IP as static to keep it from changing on reboot. Go to the GCP External IP management dashboard, find your VM’s address, and change it’s type from “Ephemeral” to “Static”.
2. Next, we are going to ensure that our port 80 to port 3000 redirect persists between reboots. Run sudo apt-get install iptables-persistent to install a package which will save our rules, and select “Yes” when asked if you want to save the current rules during installation.
3. Finally, we’ll make sure our Node.js server starts on system boot. While your Node server is running, execute pm2 save to save the current running process. Then, run pm2 startup systemd. This will generate a command to enable pm2 on startup. Copy it into your terminal and run it.

Now your server should keep working even after a restart or VM resize.

Next Steps With Your Domain and Hosting

So where can you go from here? Well, wherever you want. Node.js is extremely flexible. If you want to serve up complete .html files, take a look at the Node filesystem and possibly using template engines. If you’re writing an app backend/API, take a look at Node with SQL. Perhaps you want to set up your server more robustly for production purposes with nginx.

Or maybe you don’t want to use Node at all! After all, your shiny new GCP Computing Platform VM is a fully featured Ubuntu instance — it can run anything. Maybe take a look at Flask or Django, which are Python based web frameworks. You’ve got a plot on the internet and a machine to run things. Go nuts!