Hosting a static web app on Google Cloud using GCS – Get Cooking in Cloud
Articles,  Blog

Hosting a static web app on Google Cloud using GCS – Get Cooking in Cloud


PRIANKA VERGADIA: Welcome
to “Get Cooking in Cloud”, where we share the best recipes
to apply in your cloud kitchen. I am Priyanka Vergadia,
and in this episode, we will talk about
creating static websites on Google Cloud. [MUSIC PLAYING] Let’s say you’re a
small company looking to setup 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 let’s walk through
how to start small, deploying a static website. Static web pages can contain
client side technologies such as HTML, CSS,
and JavaScript. They cannot contain dynamic
content such as service side scripts like PHP. Before you begin, make sure
that you have a Google Cloud project created, a
billing account setup, and you have a domain
that you own or manage. This should be your
top level domain. To verify that you
manage the domain, check the link in the
description below. Now that you’ve
covered the logistics, there are four steps to
set up static websites. The first step is to connect
your domain to Google Cloud Storage. To do that, create
a CNAME record that points to
c.storage.googleapis.com. The 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 you created for your domain. In this case, the
storage bucket should be named www.example.com. The third step is
to upload the files you want your website to serve. You can do this in
one of two ways. First, by directly
uploading the files using the Google Cloud
console, or second, by using gsutil
command line, which is great for when you
have an existing website. Once the files are
uploaded, accessing them is going to be based on how
you choose to share your files. If you set the permission
at the bucket level, you can easily and quickly
make every file for your site publicly accessible. For file control, you can
choose to set the permission at the object level so that
only specific files are accessible through your website. At this point, you have a
functioning static website, and you could call it a day. But we recommend assigning an
index page suffix and a custom error page to better
guide your users. This helps in situations when
a user might request a URL, but you do not have
an associated file with that name in your bucket. In our example, when there
isn’t a file named Apple, cloud storage will attempt
to serve an index.html. If that file also doesn’t
exist, cloud storage will return an error
page with a 404 response. Now the fourth and final step
is to test our static website. Verify that the content
is served from the bucket by requesting the domain
name in a browser. One important thing to note here
is that Google Cloud Storage only supports HTTP. In order to serve HTTPS and
get all the security goodness, you need to either use direct
URIs using a CNAME redirect, or migrate to using a load
balancer as a front end. So today we learned how
to start small and deploy a static website on
Google Cloud Platform. We used Google Cloud Storage
to host the static content and pointed the domain
name to the storage bucket. That’s all for today on
“Get Cooking in Cloud”. Here’s hoping you can
whip up something great. Join us next time
because we will share the recipe to host
websites on managed platform Cloud Run. If you liked this video, then
check out our first episode as well. And to see more
such content, don’t forget to like and
subscribe to our channel.

2 Comments

  • John Hanley

    This is a very good video. There is technical depth in this video. Combine this video with your links and you can actually build (cook up) a real static website. I suggest creating a Qwiklab for each video and then we would have an entire training path with this series.

Leave a Reply

Your email address will not be published. Required fields are marked *