Hosting a static website on Google Cloud using Google Cloud Storage
Get Cooking in Cloud
Introduction
In this mini series we are covering, how to create websites on Google Cloud. This is the second article in the series.
- Hosting web apps on Google Cloud: An Overview
- Hosting a web app on Google Cloud using Google Cloud Storage (This blog)
- Hosting a web app on Google Cloud using Cloud Run
- Hosting a web app on Google Cloud using Google Compute Engine
- Scaling web app on Google Compute Engine
- Case Study
Let’s say you’re a small company looking to set up a basic web presence. You don’t expect a lot of traffic, and don’t want to pay a lot to get up and online. So, read on to find how to start small by deploying a static website.
What you’ll learn
- Create static website on Google Cloud
- Point your domain to GCS
- Create bucket, upload and share the files using access control
- Set up index page suffix and error page
- Test the website
Prerequisites
- Read the first article that covers high level concepts about setting up websites on Google Cloud.
Check out the video
What is a static website?
Static websites are a good option for sites like blogs — where the page rarely changes after it has been published, or where there isn’t any dynamically-generated content. Static web pages can contain client-side technologies such as HTML, CSS, and JavaScript. They cannot contain dynamic content such as server-side scripts, like PHP.
How to create static websites on Google Cloud
Before we begin, we need to make sure we are properly set up in Google Cloud Console. Ensure the following:
- You have a GCP project created
- A Billing account is set up
- You have a domain that you own or manage (this should be a Top level domain). To verify that you manage the domain, check here.
Now that we’ve covered the logistics, there are four steps to set up a static web app.
Step 1 : Point your domain to GCS
First step is to connect your domain to cloud storage. To do that, create a CNAME record that points to c.storage.googleapis.com. Your domain registration service can help with this.
www.example.com CNAME c.storage.googleapis.com.
Step 2 : Create the bucket that is linked to your domain
Second step is to create a Google cloud storage bucket. To do this, browse to the google cloud console, click on cloud storage, and click create bucket. Make sure the bucket name matches the CNAME created for your domain. In this case, the storage bucket should be named www.example.com
Step 3 : Upload and share your site’s files
Third step is to upload the files you want your website to serve. We can do this in one of two ways.
First, by directly uploading files using the google cloud console.
Second, is using gsutil command line, which is great for when you have an existing website.
gsutil rsync -R local-dir gs://www.example.com
Access Control:
Once the files are uploaded, we need to make sure they are properly shared for access. You can either make all files in your bucket publicly accessible, or you can set individual objects to be accessible through your website. Generally, making all files in your bucket accessible is easier and faster.
At this point, we essentially have a functioning static website but it is recommend to assign an index page suffix and a custom error page to guide the users better.
Index page suffix and Custom error page:
This helps in scenarios when say you have no file named apple in your bucket www.example.com. In this situation, if a user requests the URL http://www.example.com/apple, Cloud Storage attempts to serve the file www.example.com/apple/index.html. If that file also doesn’t exist, Cloud Storage returns an error page with 404 response.
You can learn more about setting this up here.
Step 4 : Test the website
The last step is to test our static website. Verify that content is served from the bucket by requesting the domain name in a browser.
Serving HTTPs content on GCS
One important thing to note is that GCS ONLY supports HTTP. In order to serve HTTPS, and get all that security goodness, we need to either using direct URIs using a CNAME redirect, or migrate to using a load balancer as a front-end as shown in the picture.
Conclusion
In this article we learned how to start small and deployed a static web application on Google Cloud platform. We used Google cloud storage to host the static content and pointed the Domain name to the storage bucket.
Next steps
- Follow this blog series on Google Cloud Platform Medium.
- Follow Get Cooking in Cloud video series and subscribe to Google cloud platform YouTube channel
- Want more stories? Check my Medium, follow me on twitter.
- Enjoy the ride with us though this series and learn more about Google Cloud :)
