mlaprise / react-serverless-gcp-terraform

Serverless full-stack React app on GCP

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