Host a Static Website on GCP With Load Balancer and CDN

Introduction

In my last article, we had discussed how to configure a load balancer on Google Cloud with Google-managed SSL Certificates. Then someone asked me is it possible to host a static website with loadbalancer and CDN? That’s why this article is here.

CDN

Some of you may not know what CDN (Content Delivery Network) is, let me briefly explain. According to Google document, Cloud CDN uses Google’s global edge network to serve content closer to users, which accelerates your websites and applications. Cloud CDN content can be sourced from various types of backends: Instance groups, Zonal network endpoint groups (NEGs)Internet network endpoint groups (NEGs), and Google Cloud Storage Bucket. Last time we mainly focus on instance group, this time we will focus on Google Cloud Storage for static web site. In Cloud CDN, these backends are also called origin servers.

Solution Diagram

Now, let’s take a look what we will do today:

Solution Diagram

I have prepared a simple web page with photo. When we are the first time to load the web site, it may be quite slow. But when we visit more time, the delay will be significantly reduced. The final result will look like:

Before we start, please firstly download the prepared files from my github. Or

git clone https://github.com/manbobo2002/gcp_lb_cdn.git

Setup

In console, we choose Cloud Shell and then click the editor mode such that we could easily review our code.

The we have to setup our environment e.g. define project, zone and region:

gcloud config set project <you-project-id>
gcloud config set compute/zone us-central1-a
gcloud config set compute/region us-central1

Now, we are ready to really create something. For convenience, I create some scripts which could create what we want very fast.

Actually, this time I create a fully automated script, when you kick start the below script and then everything will be done. However, it may not be suitable for tutorial. I will still go through the script one by one.

In startup script, the only thing we have to edit is the domain name.

Once it is edited, then all go well. If you do not have any domain, please go to no-ips and register it. After we run the script, please point your domain to the load balancer ip address, in my case is 35.244.226.151.

cd gcp_lb_cdn
sh startup.sh

Create Bucket

The first thing we have to do is to copy our index file and image to the Cloud Storage. Also, we should set the permission such that all users could access it. Then we could go to storage bucket and see what we have created.

Create Load Balancer with CDN

I will not go through too much details about load balancer since my previous article covered it a lot. I think here are two important things. The first one is this time we have to create backend bucket instead of backend service. The second thing is we have to specify enable-cdn flag into backend bucket. Other things are quite similar as previous that we apply on instance group.

When we go the Network services and click on Cloud CDN, we will see a urlmap is created.

Test the CDN

Now let we test whether it works or not. By typing the following command:

sh test.sh

It will count the request time to get the image content. We could see that the first time it takes much longer than the 2nd and 3rd times relatively. That means we successfully cache the content and use it on the 2nd and 3rd time.

We could also enter our website to see whether it works or not.

Great, my cute Sally is here.

You may wonder the above method is not obvious to prove the CDN works. Then we could check it in logging.

In logging, we filter out and take a look at Cloud HTTP Load Balance.

There are 2 metrics which show CDN works: cacheHit and jsonPayload. As you see above, cacheHit will be true when we expand the httpRequest. Also, the statusDetails will be response_from_cache when we expand the jsonPayload.

Clean up all the Things

This time I write a script to clean up this lab very quickly:

sh clean.sh

That’s the end of today’s tutorial, please enjoy it. If you think it is useful to you, please clap.

Leave a Reply