Hosting A Static Site On GCP
Aug 13, 2022

Intro

Reference

Hosting a static site has been pretty easy on AWS before if you're not trying for an HTTPS connection. These days it's the default and I've been shopping around for different solutions. My domains are already hosted on Google Domains, so I decided to try out hosting on that platform. Turns out it's pretty easy and found the above reference ready for this situation and includes how to add a load balancer to serve it over HTTPS.

Steps we'll be covering here are the following:

  • Create a bucket
  • Upload and share your site's files
  • Set up a load balancer and SSL certificate
  • Connect your load balancer to your bucket
  • Point your domain to your load balancer

Getting Started

Just a few things you'll need before getting started

  • An active project in Google Cloud with billing enabled
  • Enable the Compute Engine API for your project
  • An active domain you can manage (Google Domains or Cloud Domains)
  • A website to serve. At least have index.html and 404.html pages.

Create A Bucket

In the Google Cloud console, go to the Cloud Storage Buckets page.

  • Click Create bucket.
  • On the Create a bucket page, enter your bucket information. To go to the next step, click Continue.
  • Fill out the information for this bucket. If your domain is hosted by Google, you can make the bucket name the same as your domain.
  • Click Create.

Upload Files

Add the files you want your website to serve to the bucket:

  • In the Google Cloud console, go to the Cloud Storage Buckets page.
  • In the list of buckets, click the name of the bucket that you created.
  • The Bucket details page opens with the Objects tab selected.
  • Click the Upload files button or drag them into the files section.
  • After the upload completes, you should see the filename along with file information displayed in the bucket

Share Your Files

Make all objects (files) readable by anyone on the public internet:

  • In the Google Cloud console, go to the Cloud Storage Buckets page.
  • In the list of buckets, click the name of the bucket that you want to make public.
  • Select the Permissions tab near the top of the page.
  • Click the + Add button and the Add principals dialog box appears.
  • In the New principals field, enter allUsers.
  • In the Select a role drop down, select the Cloud Storage sub-menu, and click the Storage Object Viewer option.
  • Click Save.
  • Click Allow public access.

Assign Specialty Pages

Assign defaults for main pages and not found pages (index.html & 404.html). See Specialty Pages for more details.

  • In the Google Cloud console, go to the Cloud Storage Buckets page.
  • In the list of buckets, find the bucket you created but do not click on the name to enter into the bucket specific settings.
  • Click the Bucket overflow menu (three vertical dots) associated with the bucket and select Edit website configuration.
  • In the website configuration dialog, specify the main page and error page.
  • Click Save.

Setting Up The Load Balancer And SSL Certificate

One of the advantages we wanted to leverage here over the default AWS bucket hosting is the ability to leverage HTTPS. Cloud Storage doesn't support custom domains with HTTPS on its own so we need a Load Balancer to handle that. This is also how we can redirect all HTTP traffic to HTTPS.

  • Go to the Load balancing page in the Google Cloud console.
  • Under HTTP(S) load balancing, click Start configuration.
  • Select From Internet to my VMs or serverless services, Global HTTP(S) Load Balancer and click Continue.
  • The configuration window for your load balancer appears.
  • Before continuing with the configuration, give your load balancer a Name, such as domain-com-lb
  • Click Frontend configuration.
  • Under Protocol, select HTTPS (includes HTTP/2).
  • In the Certificate field dropdown, select Create a new certificate. The certificate creation form appears in a panel. Fill in the fields and click Create.
  • Under IP address, select a reserved IP address. If you do not have a reserved address, create one from the prompt.
  • Click the Enable HTTP to HTTPS Redirect checkbox to create the redirect.
  • You must select the HTTPS protocol and use a reserved IP address (not ephemeral) to be able to select the checkbox.
  • Click Backend configuration.
  • In the Backend services & backend buckets dropdown, click Create a backend bucket.
  • Choose a Backend bucket name, such as domain-backend-bucket. The name you choose can be different from the name of the bucket you created earlier.
  • Click Browse, found in the Cloud Storage bucket field.
  • Select the bucket you created earlier with the uploaded files and click Select.
  • Click Create.
  • Click Review and finalize.
  • Review the Frontend, Routing rules, and Backend then click Create.

Connect Your Domain To The Load Balancer

After the load balancer is created, click the name of your load balancer: domain-com-lb. Note the IP address associated with the load balancer: for example, 30.90.80.100. To point your domain to your load balancer, create an A record using your domain registration service.

    NAME                  TYPE     DATA
    www                   A        30.90.80.100
    @                     A        30.90.80.100

Note: For domains on Google Domains, the @ record field needs to be blank.

Monitor And Test

All that's left is to wait for your provisioned certificate to be created. It can take upwards of an hour after your DNS settings were changed to be ready.

To monitor the status:

  • Go to the Load balancing page in the Google Cloud console.
  • Click the name of your load balancer: domain-com-lb.
  • Click the name of the SSL certificate associated with the load balancer: domain-com-ssl.
  • The Status and Domain status rows show the certificate status. Both must be active in order for the certificate to be valid for your website.

Once the SSL certificate is active, verify that content is served from the bucket by going to https://www.example.com/index.html. If you set the MainPageSuffix property, https://www.example.com goes to index.html.

Thoughts

Static sites are a great way to host your content, and with Google Cloud you can get set up quickly and easily. Even though there's more steps here than what I was used to with AWS Buckets hosting, I think this is a good step in the right direction. Give it a go! Most new accounts on Google Cloud can get free credits for trying it out.