Notes on Hosting a Static Site in a Google Cloud Provider Storage Bucket

Static sites are great and hosting them in simple storage buckets like S3 or GCP Storage is cheap and easy. I've been drawn to GCP lately because the docmentation and tools are often simpler than AWS. However, GCP does have a few caveats for hosting static sites.

Looks look at the setup first. Once you've installed GCP's command line tool gsutil the quickest documentation for setting up a static site actually comes from the gsutil web --help command.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

For example, suppose your company's Domain name is example.com. You could set up a website bucket as follows:

  1. Create a bucket called example.com (see the "DOMAIN NAMED BUCKETS"
     section of "gsutil help naming" for details about creating such buckets).

  2. Create index.html and 404.html files and upload them to the bucket.

  3. Configure the bucket to have website behavior using the command:

       gsutil web set -m index.html -e 404.html gs://www.example.com

  4. Add a DNS CNAME record for example.com pointing to c.storage.googleapis.com
     (ask your DNS administrator for help with this).

Full instructions can be found in the GCP documentation.

And now for the caveats:

You can't host without a subdomain

Since you're creating a CNAME, you can't serve your site at http://example.com. There is no easy way to get around this. The best path forward is to use your registrar to forward example.com to www.example.com.

Single Page Apps will 404 on pages that don't exist

Step 3 in the above directions configures your bucket to use index.html as your MainPageSuffix. This means, the use won't see index.html as the last part of the URI.

If you're building a single page app, you probably want all urls to redirect to your index page so you can route on the client. To do this, you'd run the web command as:

1

gsutil web set -m index.html -e index.html gs://www.example.com

This works, but it unfortunately still returns a 404 response to the client. To the human on the other end, this doesn't matter, but to clients it may.

2017-07-27