Google App Engine — Cloud Storage Website and React Applications

Google App Engine is a great alternative to the basic way to host a static website through Google Storage. Google Storage offers a way to create a bucket that will act like a static website and CDN, although it is very basic and does not support rewrites (Especially to handle the routing of your single page applications written in React, Angular, or Vue JS) or forwarding rules (HTTP to HTTPS). One way we can get around this is to use App Engine.

Storage Website

https://console.cloud.google.com/storage/browser

Click Create Bucket.

When you click this button it will take you to the create bucket screen.

Give the bucket the name of what your domain will be, for instance: if the name of your domain is www.example.com.

When you click Create it will ask you to prove that you own the website from you domain provider, if you already haven’t proven it before.

You can verify a few different ways but in this article we will be using App Engine to do everything for us.

https://console.cloud.google.com/appengine/settings/domains

Open up the Custom Domain section of the Settings section under App Engine. We will adding a custom domain and let App Engine know we want it to create an SSL certificate for us. This is nice because they will provide the SSL certificate for us.

  1. Select the domain you want to use

If you already have setup your domain choose it from the list, otherwise click Verify a new domain…

When clicking Verify a new domain… a text input will appear for you to enter the name of the new domain you wish to verify.

Enter the name of the domain, for instance: www.example.com

Click Verify.

It will then open a new window for you to verify the domain.

Select your domain provider and add what you need to in order to verify your domain, such as adding a CNAME. Wait a little until your domain provider updates the CNAME record and then click Verify.

If you are successful you will see this page:

Now go back to the App Engine Custom Domains window.

Click Refresh domains and click Continue.

2. Point your domain to your project and add URL mappings. Click Save Mappings. Click Continue.

3. Update your DNS records to enable security. Add all the addresses to your domain provider so it can create your SSL certificate.

Click Done.

Now go back to Google Storage and you will be able to create the bucket.

Once your bucket is created, click the options on the right and click Edit bucket permissions.

Add the allUsers member under the Add members section and give it the permission of Storage Object User.

Now the bucket is ready to serve static content. The issue with this approach is that is does not support rewriting and forwarding. This is where App Engine is useful.

App Engine

https://github.com/ncruces/appengine-hosting

In this repo, there is a file called firebase-sample.json for examples on how to setup different buckets with different rules. Create a new file called firebase.json and copy the contents of the sample into this new file.

"www.example.com": {  // Google Storage Bucket name
"rewrites": [
{
"source": "**", // Rewrite files to use index.html
"destination": "/index.html"
}
],
"cleanUrls": true,
"trailingSlash": false
}

Add this site to allow for url rewriting for the bucket named www.example.com. This will look for the bucket that we created before with the name of www.example.com.

Now deploy to App Engine:

gcloud app deploy

If you don’t have the gloud sdk go here to install it:

https://cloud.google.com/sdk/install

This will deploy the app, look for buckets and files to serve with rewrites and forwarding.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store