How to deploy React applications to Google Cloud Storage

In the beginning of 2020, the company I worked for started to migrate our applications from our on-premise environment to the cloud, so we chose the Google Cloud Platform since we are already using the Firebase SDK in our auth system.

The GCP docs recommends deploying static applications through the App Engine, but after running some tests, we detected that the costs of running a simple static app in App Engine would be high (very high).

Since we were running this app trough NGINX serving the static files, we wanted to eliminate this "extra" layer and serve it totally from the Cloud Storage (a.k.a "the S3" from Google).

Enough talk, let's get started

Assuming that you already have an static app (could be built in your favourite library such as React, Angular or Vue) you will need the Cloud SDK installed in your machine. If you want to deploy your app using a CI/CD environment, you will need a docker image with Cloud SDK installed. The Cloud SDK is a set of command-line tools to interact with your GCP projects.

• If you want to deploy from your machine: how to install Cloud SDK.
• If you are using CI/CD: Dockerhub Cloud SDK image.

Make sure you have the Cloud Storage Command Line Tool installed, running the command below in your terminal:

gcloud components list

The output will be something similar to this:

Getting the Service Account key

In order to use Cloud SDK locally or with CI/CD, you will need a service account key file. It can be obtained in your GCP panel.

1. In the main menu, to go to IAM & Admin section;
2. Go to Service Accounts;
3. Click +create service account;
4. Fill the fields as you want;
5. The option to download a sa-key.json file will appear, download and save it wherever you want.
6. Go to IAM section and make sure your service account has one of these two permissions: Storage Admin or Storage Object Admin (or both).

Setting up your project

Now go to your project's folder and we will start the deploy process. You can run the following commands in a local terminal or you can put them into a .yml file (in case you are using CI/CD).

gcloud auth activate-service-account key-file path/to/your/sa-key.json

This command will allow us to interact with our bucket
without the need of authenticating with our personal credentials, using our previously generated service account key.

If you are using CI/CD to deploy your app, I really recommend you to store the content of you sa-key.json in a environmental variable. Never keep your service account file inside your app source code. Your YML script using environmental variables should look like the example below.

gcloud config set project YOUR_PROJECT_ID

This command will set the active project for the subsequent commands. The project ID is the name of your project in GCP.

gsutil rm gs://YOUR_BUCKET_NAME/**

Optional: the command above removes all the old files from the bucket. This is useful when you want to delete old cache files before pushing the new ones. You can do this with the entire bucket, specific folders or files, like:

gsutil rm gs://YOUR_BUCKET_NAME/static/**
gsutil rm gs://YOUR_BUCKET_NAME/*.cache.js

WARNING: use the rm commands with caution, make sure you know what you're doing before running them.

gsutil cp -r build-folder/* gs://YOUR_BUCKET_NAME

Finally, we will sync up our local files to our bucket. Make sure you don’t forget the -r param, as it will allow our local folder and subfolders to be sent to the bucket recursively.

That's it!

Now all you have to do is connect your domain (if you have one) to Cloud Storage through your domain registration service.