This tutorial will show you how to buy a .app domain, set up a VPS (Virtual Private Server) on DigitalOcean, and serve a simple static website using the Nginx web server. Below is an overview of what we will be learning:

Notes:

  • This article assumes that you have a basic understanding of the web and the Linux shell
  • All the local commands in this article are run on a Mac terminal. If you are having difficulty running them on your OS, leave a comment and I'll help you out

Why .app Domains

If you are thinking about developing an app, it might not be a bad idea to try a .app domain for your app or its marketing pages. In addition to being more available and relevant, .app domains have security built-in and have HSTS (HTTP Strict Transport Security) pre-loaded. This means two things: one, you don't have to submit your domain to be included in the HSTS preload list. And two, your .app site/app will be only accessible via HTTPS. So if you are hosting a site/app, you need to configure your web server with the appropriate SSL certificates and headers to allow users visit your site/app over HTTPS. If you want to learn more, be sure to check out this Google I/O Talk explaining in more detail the benefits of .app domains.

Buying a .app Domain

Google opened .app domain registration to the public in the May of 2018 and you can buy them from any major domain provider. You can either buy them directly from Google or any other major domain provider. Below is a list summarizing prices for each major provider for the domain that we want to buy, supertask.app:

Looking at the prices, Google and Namecheap seem to be the most reasonable options in terms of price. You should definitely do your research too, but Google Domains is pretty decent and for the purpose of this tutorial we are going to use Google Domains to buy the supertask.app domain.

First go to https://domains.google and type in the name of the domain that you are looking for in the search box and click search:

Searching a domain

Then click on the Cart icon next to the domain name:

Add to cart

After that go to check out by clicking the cart icon on the top right corner:

Go to Checkout

On the checkout page, make sure that the "Privacy protection" is on. This way your information will not be published in the WHOIS directory. And if you want to auto renew your domain, make sure the "Auto-renew" option is on. Then scroll to the bottom of the page and click on the "Check Out" button.

Check out domain

After checking out the domain, login to your Google account if you are not already logged in. After you log in, you will need to enter your information for ICANN. Enter your information and click on the "Save and Continue" button:

Enter your information

For the last step, you just need to put in your credit card information and click the "buy" button:

Enter in credit card information

If the registration is successful, you can see your new domain in your dashboard https://domains.google.com/registrar:

List of domains

Setting up a VPS on DigitalOcean

In this section we will set up a server on DigitalOcean. You can use my referral link and get a $10 credit:

https://m.do.co/c/146880ef8884

After you created an account, you need to create a project. Creating a project is very simple, just click on "+ New Project" on the top left corner and give it a name. After you created a project, click on the "Get Started with a Droplet". Pick "Ubuntu 18" for the distribution, choose the 1GB memory Droplet ($5/month), and pick any data center that's closer to you. In the "Add your SSH keys", click on the "New SSH Key" button. Give your key a name and copy paste the content of your public key. If you don't know how to create a key pair, take a look at appendix 1, "Creating a Key Pair". After adding your public key, choose a hostname for your server. We are going to use supertask-server for the hostname. And finally, pick the project to which your Droplet belongs to and click on the "Create" button. The server should be up in couple of minutes. If everything is setup properly, you should be able to see your server's status in your dashboard:

Droplet Dashboard

Next, you need to confirm that you can SSH to your server. In order to SSH to your server, copy the IP address (IPv4) of your Droplet and run the following. Make sure to replace the IP address below with your server's:

ssh root@123.456.789.10

When you login for the first time you will see the following message:

Are you sure you want to continue connecting (yes/no)

Just type in yes and hit enter. Now you should be logged in as the root user. To logout, simply type logout and hit enter. After making sure that you can login to your server, follow the steps in this article to configure your server. The steps basically boil down to the following:

  • Create a non-root user with sudo privileges, and lock down the root user:
adduser tom
usermod -aG sudo tom
# go through instructions, and create a password for this user.
  • Set up a basic firewall:
ufw allow OpenSSH
ufw enable
  • Copy the public key from the root user's .ssh directory to the new user's .ssh directory:
rsync --archive --chown=tom:tom ~/.ssh /home/tom

Now you should be able to ssh to your server using the new user:

ssh tom@123.456.789

Configuring DNS Settings

In this section we are going to configure the DNS settings for our domain and point our domain to our server. Since we are using Google Domains as the DNS host, we can simply add two records to point our domain to our new server. Make sure to do this before moving onto the rest of the article.

First, login to your Google Domain manager dashboard and click on the DNS settings icon:

Click on DNS Settings

Then scroll to the bottom of the page and add two A (IPv4) records:

  • one for the naked domain @
  • and another for the www sub-domain

Make both of them point to your server's IP address:

Add A record for the naked domain

Add A record for the www subdomain

After that's done, wait a couple of minutes and run the following in your terminal, one after another, to make sure that both your naked domain and your sub-domain point to your server:

dig supertask.app
dig www.supertask.app

Running each command will output something like the following:

; <<>> DiG 9.10.6 <<>> supertask.app
;; global options: +cmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 4394
;; flags: qr rd ra; QUERY: 1, ANSWER: 1, AUTHORITY: 0, ADDITIONAL: 1

;; OPT PSEUDOSECTION:
; EDNS: version: 0, flags:; udp: 1280
;; QUESTION SECTION:
;supertask.app.      IN  A

;; ANSWER SECTION:
supertask.app.   1935  IN  A 123.456.789

;; Query time: 22 msec
;; SERVER: 10.8.0.1#53(10.8.0.1)
;; WHEN: Fri Aug 03 02:17:03 PDT 2018
;; MSG SIZE  rcvd: 59

In the output, look for the ANSWER SECTION, there you should be able to see the IP address of your server:

;; ANSWER SECTION:
supertask.app.   1935  IN  A 123.456.789

If you see the IP address for both your naked domain and the www sub-domain, you are ready to move on to the next section, otherwise you have to wait and try periodically.

Setting up Nginx and SSL Certificates

In this section we will install the Nginx server and install SSL certificates for our domain. To get started, connect to your server first. Then run the following to install Nginx:

sudo apt-get install nginx -y

Then run the following, one after the other, to configure the firewall allowing Nginx respond to requests:

sudo ufw allow 'Nginx Full'
sudo ufw delete allow 'Nginx HTTP'

Next, we need to install Certbot to handle SSL certificates installation. Run the following commands to install it:

sudo add-apt-repository ppa:certbot/certbot
# hit enter to confirm
sudo apt-get update
sudo apt-get install python-certbot-nginx -y

Now that we have Certbot installed, we can run the following to get SSL certificates for our naked domain and the sub-domain:

certbot --nginx -d supertask.app -d www.supertask.app

First, it will ask you to provide an email address. Then Agree to the terms, and optionally provide an email to get emails from Let's Encrypt. After you have answered the prompts, Certbot will attempt to get SSL certificates for your domain. If the command is successful, you should get the following message:

Please choose whether or not to redirect HTTP traffic to HTTPS, removing HTTP access.
-------------------------------------------------------------------------------
1: No redirect - Make no further changes to the webserver configuration.
2: Redirect - Make all requests redirect to secure HTTPS access. Choose this for
new sites, or if you're confident your site works on HTTPS. You can undo this
change by editing your web server's configuration.
-------------------------------------------------------------------------------
Select the appropriate number [1-2] then [enter] (press 'c' to cancel):

Just type 1 and hit enter to confirm. After that you should see the following output telling you where the certificates have been added:

Congratulations! You have successfully enabled https://supertask.app and
https://www.supertask.app

You should test your configuration at:
https://www.ssllabs.com/ssltest/analyze.html?d=supertask.app
https://www.ssllabs.com/ssltest/analyze.html?d=www.supertask.app
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

IMPORTANT NOTES:
 - Congratulations! Your certificate and chain have been saved at:
   /etc/letsencrypt/live/supertask.app/fullchain.pem
   Your key file has been saved at:
   /etc/letsencrypt/live/supertask.app/privkey.pem
   Your cert will expire on 2018-11-01. To obtain a new or tweaked
   version of this certificate in the future, simply run certbot again
   with the "certonly" option. To non-interactively renew *all* of
   your certificates, run "certbot renew"
 - If you like Certbot, please consider supporting our work by:

   Donating to ISRG / Let's Encrypt:   https://letsencrypt.org/donate
   Donating to EFF:                    https://eff.org/donate-le

That's it, if you go to https://supertask.app, you should be to see the default page of Nginx:

View the page on Chrome

Certbot updates the default configuration for Nginx which is located at /etc/nginx/sites-available/default. If you look at the file, you can see the lines where Certbot has updated. Also, if you notice, the content of the website are in the default location at /var/www. You can update the content of that folder as you please.

Appendix

Appendix 1: Creating a Key Pair

In order to create a key pair, first go to your ~/.ssh folder. If the folder doesn't exist, make sure to create it first. After navigating to the folder, run the following:

ssh-keygen -t rsa -C "your_email@gmail.com"

Next, type in a name for your key. For example, type my_ocean_key. Next, it will ask you for a passphrase, simply hit enter and one more time to confirm. Now you should see two files created in your ~/.ssh directory:

  • my_ocean_key
  • my_ocean_key.pub

The my_ocean_key file is your private key and should not be shared with anyone. The my_ocean_key.pub file is the public part of your key pair. You can open you public key file and copy its content and add it to the services that you trust. Also note that in order to make your key pair recognizable by your ssh agent, you need to run the following one after the other:

eval "$(ssh-agent -s)"
ssh-add -K ~/.ssh/my_ocean_key