How to deploy a static React site to Google Cloud Platform
Looking at the few guides out there, I was pretty confused when trying to find out how to deploy my app.
I looked at a few guides from Google’s site and some Stack Overflow posts but didn’t find them too helpful.
I found a great resource which got me 70% there on MDN:
Filling in a few gaps I was able to deploy my static React site. So here’s my guide, in a few easy steps.
Tools we’ll use:
- create-react-app cli tool
- Google cloud platform (I’ll call it GCP for short)
Note: we’ll be deploying a static site which uses React to render the Front End. No backend/server is hooked up in this example.
Let’s deploy!
- Create a react app using the
create-react-app
cli tool, add your code, assets, etc. For this example we’ll use the commandcreate-react-app test-app
where a directory called test-app will be created with all my app files. - Move into the test-app directory and create a minified bundle of your project using the
npm run build
command. This will create a new folder called build that has all the files necessary for deploying your static React site.
$ cd test-app
$ npm run build
3. Create a bucket in GCP. You can keep the default values, just click create
.
We’ll be using this bucket to easily upload our build folder files into GCP. Afterwards we’ll transfer the files to our GCP project. Take note of the bucket name as we’ll be using this later. This bucket’s name is straight-veld-8658
4. Once the bucket has been created, click into it and select upload files
. Browse to your project directory and upload the entirebuild
folder.
5. Another thing we need is an app.yaml
file. This file is a config file that tells the App Engine how to map the URLs to static files. I’ve used the same app.yaml file as provided in the sample-app of MDN’s tutorial (but have changed the website
directory to build
. It looks like this:
runtime: python27
api_version: 1
threadsafe: truehandlers:
- url: /
static_files: build/index.html
upload: build/index.html- url: /
static_dir: build
Upload this file to the bucket as well.
Your bucket should now be populated with the following files:
6. On the same page find the icon that lets you open a Google Cloud Shell to your app instance. Click on it and open the shell.
Now we’ll upload the build directory and app.yaml file that we uploaded into the straight-veld-8658
bucket into our instance so we can launch the app. Use the following commands:
$ mkdir test-app
$ gsutil rsync -r gs://straight-veld-8658 ./test-app
Note: the format of the gsutil rsync command is as follows : gsutil rsync -r [source] [destination] (-r means sync files recursively)
You can make sure that the files are there. When you cd test-app
and ls
you should see both app.yaml
and build
7. Deploy the app by running gcloud app deploy
in the shell. You should see some sort of success message indicating the app is served. It should also provide you with the url you can visit to see the app.
Generally this url is in the following format unless you’ve linked a custom domain name to it: https://[app_name].appspot.com