Mastering Static Website Hosting on GCP: A Step-by-Step Guide

Mastering Static Website Hosting on GCP: A Step-by-Step Guide

This blog describes how to host a static website on a Cloud Storage bucket for a domain you own. 

What is a static website?

Static websites are ideal for use cases like blogs, where the content rarely changes after publication or does not require dynamically generated elements. Static web pages can contain client-side technologies like HTML, CSS, and JavaScript. It does not contain dynamic content such as server-side scripts.

Following services we are going to use:

• Cloud DNS - Domain management

• Cloud CDN - Cache the static content of the website

• GCS bucket - Store website content

• Static IP - For public access of Load balancer

• Global External Application Load Balancer with DNS authorization

Architecture

If any of the users try to visit our website, Cloud DNS will handle that request for whatever the domain name is, then go to the Cloud CDN which is used to cache HTTP(S) load balanced content close to your users and we will use Cloud Load Balancer to forward those requests to Cloud Storage containing our website content.

We will use External Application Load Balancer to serve content from a custom domain over HTTPS because Cloud Storage doesn’t support custom domain with HTTPS on its own.

Bucket configuration

Create the GCS bucket and upload the files you want your website to serve. You can either make all files in your bucket publicly accessible, or you can set permission for individual objects to be accessible through your website.

It is recommended that index.html and error.html pages are created to guide the users better.

With an external Application Load Balancer, you can configure a single URL map to send traffic to different destinations based on rules defined in the map:

• Requests sent to https://example.com/file1 are routed to one backend service.

• Requests sent to https://example.com/file2 are routed to a different backend service.

• Requests sent to https://example.com/file3 are routed to a Cloud Storage backend bucket.

• Requests sent to any other host and path combination are sent to a default backend service.

https://cloud.google.com/load-balancing/docs/url-map-concepts

Network configuration

Reserve a static IP address for Load balancer and add the record in Cloud DNS or Your Domain management configuration.

Set up Load Balancer

If you are creating an HTTPS load balancer from the console, GCP will create a partial HTTP load balancer for you to redirect HTTP traffic to HTTPS. If you are using IAC tools then you need to create a partial HTTP load balancer for HTTPS redirection. The partial HTTP load balancer uses the same IP address as HTTPS load balancer and redirects HTTP requests to your load balancer's HTTPS frontend.

Frontend configuration

Forwarding rule:

A forwarding rule specifies how to route network traffic to the backend services of a load balancer. A forwarding rule includes a public static IP address of a load balancer, an IP protocol, and one or more ports on which the load balancer accepts traffic.

Target Proxy: 

The target proxy listens on the static IP address and port specified by the load balancer's forwarding rule.

URL Map:

When a request arrives at the load balancer, the load balancer sends the request to a backend service or a backend bucket based on the rules defined in the URL map.

SSL Certificate:

Create an HTTPS certificate and add the domain for your website. You can use your own public key certificate, certificate chain, and private key or you can use a Google-managed certificate where Google will automatically provision an SSL certificate once you finish your LB configuration and point DNS of all domains specified to the IP associated with the Load Balancer.

There are two types of Google-managed certificates:

Google-managed certificate with load balancer authorization

You can add multiple domain names at the creation of an SSL certificate but you cannot add new domains to an already existing Google-managed SSL certificate because the Cloud SDK interface for the compute ssl-certificates resources has only 4 methods:

• create

• delete

• describe

• list

For example, if you have created an SSL certificate for www.site1.com and now you want to add a new domain www.site2.com to the existing SSL certificate then you cannot update the existing certificate. To add a new domain to your SSL certificate you will need to delete the certificate and create a new one adding both domains. That's why we use DNS authorization to support wildcard entry in domain names and it will automatically attach the SSL to sub-domains. https://cloud.google.com/certificate-manager/docs/deploy-google-managed-lb-auth

Google-managed certificate with DNS authorization

Suppose we have multiple subdomains such as site1.example.com or site2.example.com. It is not a good idea to keep adding SSL for each of these.

Using DNS Authorization, you need to create an additional DNS CNAME record as proof of your ownership of the domain, then you can provision GCP-managed SSL certificates in advance. With DNS Authorization we can create wildcard SSL certificates for our domains.

Create a certificate with DNS authorization and add a domain as *.example.com, example.com. Now this will automatically attach the SSL to sub-domains like site1.example.com and site2.example.com.

The * matches to only 1 level of subdomain. For the next level of subdomain, you will need to create a new DNS authorization, for eg: *.site1.example.com.

https://cloud.google.com/certificate-manager/docs/deploy-google-managed-dns-auth

Backend Configuration

Add the bucket as a backend bucket and enable CDN to deliver content to your users.

Test the Website

Once the SSL certificate is active, verify that content is served from the bucket by going to https://example.com.

Cost

The cost of hosting static websites on GCP can vary depending on the amount of usage and services that are used. 

For example, 50 GB storage, 100 GB CDN egress, 730 hours forwarding rule:

• Cloud Storage: $1.30/month

• CDN egress: $8.00/month

• Forwarding rule: $18.25/month

Total: $27.55/month

You can use a pricing calculator to check the cost according to your usage https://cloud.google.com/products/calculator?hl=en 

Here is the reference to deploy a static website on GCP using terraform https://github.com/TechHoldingLLC/th-website-blogs-code-examples/tree/main/static-website-hosting-on-gcp