GCP Serverless React App

A reference project to deploy a static React app onto Google Cloud Storage, Cloud Build as the CI/CD tool, and Cloud Functions as serverless back-end, referencing this GCP documentation

App URL here

Pre-requisites

You own a domain via Google Domains
You have created a project repository on Cloud Source Repositories
You have installed Terraform:

terraform -help # prints Terraform options

Domain set-up

Add the GCP credentials JSON client_email as an owner of the domain. See Cloud Storage documentation here

Configurations

Populate the variables in terraform.tfvars

project                = <GCP-PROJECT-ID>
bucket_name            = <STATIC-SITE-BUCKET-NAME>
cloud_source_repo_name = <CLOUD-SOURCE-REPOSITORY-NAME>
# and other variables

Create a secret on Secret Manager for Cloud SQL database password

Deploy

gcloud auth application-default login # authenticate with GCP
cd deploy # change to deploy directory
terraform init # initialises Terraform
terraform apply # deploys GCP stack
terraform destroy # destroys GCP stack

Build/run app locally

Create a .env file with the following, and place at project root directory:

REACT_APP_API_BASE_URL=<CLOUDFUNCTION-TRIGGER-URL>

Run npm run start and visit aapp at http://localhost:3000

Domain configuration

Creat an A record and point it to the external static IP address. See reference GCP documentaion here

Connect to Cloud SQL

Connect to Cloud SQL to view database tables:

psql postgresql://postgresql-database-user:<DB-PASSWORD>@<CLOUD-SQL-IP>:5432/react-serverless-gcp-database

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

MIT

mlaprise/react-serverless-gcp-terraform