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: https://www.gcpserverless.com/

Pre-requisites

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

terraform -help # prints Terraform options

Domain set-up

• Verify domain ownership for the domain-named bucket. 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

• In Cloud DNS, creat A records for both <YOUR-DOMAIN>, and *.<YOUR-DOMAIN> and point them 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.

If you find this project helpful, please give a ⭐ or even better buy me a coffee ☕ 👇 because I'm a caffeine addict 😅

License

MIT