Setting up a Custom Domain on GCP

Introduction

If you want to host a static site e.g. blog or website, there are plenty of great options available. One option is to host your content in a storage bucket. Another option is to use Firebase hosting. Recently I watched a couple of YouTube videos that walk through the process of setting up a site.

• Hosting a static web app on Google Cloud using GCS
• Using Google Cloud Storage + Cloudflare to Host a Static Website for just PENNIES PER MONTH!

Using a Custom Domain with Google Cloud and Cloudflare

Inspired by the above videos, I decided to give it a try and migrate my very old Wordpress blog to Google Cloud.

Google recommends securing content with SSL, which means you will need a certificate. To secure a site with SSL, the widely used method is to use something like letsencrypt. In this instance however, I used Cloudflare to do all the heavy lifting.

If you do not have a domain you can purchase one via Squarespace. The rest of this post covers the steps needed to get a site up and running.

Grab a HTML template

There are plenty of (free) html example landing pages available. Do not pick anything too complicated as you will hopefully be replacing it with your own content.

Not sure how to get started with an example landing page? Read one of my previous posts

• Part 1: Setting up a landing page
• Part 2: Creating a Static website in Google Cloud Storage

For reference the directory structure I used was:

1.
2├── images
3│   ├── background.jpg
4│   └── logo.png
5└── index.html

Google Domain

In this post, I will be using a Google Domain to set up a place to host my blog. A domain gives you a named placeholder on the internet for your content. You have probably seen multiple adverts mentioning how easy it is to get a domain.

Setting up a Domain requires a few steps:

• Select a domain name
• Make a choice about the duration of the domain contract
• Purchase a domain

In the following example, I will assume you have purchased mysite.com. You should replace this with whatever your domain name is actually called.

Cloudflare setup

I will point out that the use of Cloudflare is entirely optional. In my case, it saves me having to do some admin stuff e.g certs + DNS updates. If you used Firebase hosting, this would have done admin stuff for you as well.

Setting up with Cloudflare requires a few steps:

• Set up a Cloudflare account (Free tier is sufficient)
• Add your domain name to Cloudflare
• Add a CNAME record for Google Cloud Storage. Note: mysite.com should be replaced with your domain name

In the above record, we indicate that the domain will be served via the storage.googleapis. What this means is we are able to talk to Google Cloud Storage.

• Make a note of the Cloudflare nameservers information - you need this later to configure the Google Domain

Google Domain

Cloudflare is now setup and configured to use Google Cloud Storage, so we need to change the Google Domain configuration. At this point, we want to tell Google Cloud to defer to the Cloudflare nameservers.

• Replace the default Google Domain nameservers with the Cloudflare information

To do this go back to the Google Domains admin

• Select the domain to be updated
• Select the DNS setting for that site
• Update the Custom name server settings
• Activate the updated DNS settings

Google Cloud Storage

At this point you can start to connect the dots. On my GCP project, I created a new project to host my storage bucket. Note creating a new project is not necessary, you can just as well use an existing project. In my case, I used a new project as I will also be running a job to perform updates to my blog, so isolation seems like a good idea.

Time to configure the Cloud Storage:

• Ensure the name of the bucket matches your domain name
• Set up a new multi-regional storage bucket
• Config a main page
• Make storage bucket files publicly accessible
• Upload the test html landing page to the bucket

1. Set up a multi-regional bucket e.g. Europe

1gsutil mb -l eu -p $GOOGLE_CLOUD_PROJECT -b on gs://[DOMAIN]

2. Config a main page and/or error page

1gsutil web set -m index.html -e 404.html gs://[DOMAIN]

3. Make the storage bucket files publicly accessible

1gsutil iam ch allUsers:legacyObjectReader gs://[DOMAIN]

• Note: Predefined role Storage Object Viewer i.e. roles/storage.objectViewer also works

4. Upload the test html - NOTE: rsync is a great way to sync between source/dest

1gsutil -m rsync -d -r [SOURCE] gs://[DOMAIN]

In the above -d is optional. In my case, as the content of the bucket should match the source, using the -d option provides an easy way to synchronize both source and destination. If you have a single source of truth (ie. a git repo, then this option is the one you want to use).

Test access

To test access use your domain name i.e. mysite.com to access the site

Troubleshooting