New blueprint for React & Python single page app

blueprints/serverless/cloud-run-react-spa/README.md

@@ -0,0 +1,94 @@
+# React single page app on Cloud Run + Cloud Storage
+
+## Introduction
+
+This blueprint contains a simple React single page application created with [`create-react-app`](https://create-react-app.dev/)
+and necessary Terraform resources to deploy it in on Google Cloud. The blueprint also contains a very simple Python backend
+that returns `Hello World`.
+
+## Prerequisites
+
+You will need an existing [project](https://cloud.google.com/resource-manager/docs/creating-managing-projects) with [billing enabled](https://cloud.google.com/billing/docs/how-to/modify-project) and a user with the “Project owner” [IAM](https://cloud.google.com/iam) role on that project. __Note__: to grant a user a role, take a look at the [Granting and Revoking Access](https://cloud.google.com/iam/docs/granting-changing-revoking-access#grant-single-role) documentation.
+
+## Spinning up the architecture
+
+### General steps
+
+1. Clone the repo to your local machine or Cloud Shell:
+
+```bash
+git clone https://github.com/GoogleCloudPlatform/cloud-foundation-fabric
+```
+
+2. Change to the directory of the blueprint:
+
+```bash
+cd cloud-foundation-fabric/blueprints/serverless/cloud-run-react-spa
+```
+
+You should see this README and some terraform files.
+
+3. To deploy a specific use case, you will need to create a file in this directory called `terraform.tfvars` and follow the corresponding instructions to set variables. Values that are meant to be substituted will be shown inside brackets but you need to omit these brackets. E.g.:
+
+```tfvars
+project_id = "[your-project_id]"
+region="[region-to-deploy-in]"
+```
+
+may become
+
+```tfvars
+project_id="my-project-id"
+region="europe-west4"
+```
+
+Although each use case is somehow built around the previous one they are self-contained so you can deploy any of them at will.
+
+4. Now, you should build the React application:
+
+```sh
+# cd my-app
+# npm install
+# npm run build
+# cd..
+```
+
+5. The usual terraform commands will do the work:
+
+```bash
+terraform init
+terraform plan
+terraform apply
+```
+
+It will take a few minutes. When complete, you should see an output stating the command completed successfully, a list of the created resources, and some output variables with information to access your services.
+
+__Congratulations!__ You have successfully deployed the use case you chose based on the variables configuration.
+
+### Deploy regional load balancer
+
+You can choose between global and regional load balancer (or use both) by setting `regional_lb` and `global_lb` variables in
+your `terraform.tfvars`.
+<!-- BEGIN TFDOC -->
+## Variables
+
+| name | description | type | required | default |
+|---|---|:---:|:---:|:---:|
+| [project_id](variables.tf#L61) | Google Cloud project ID. | <code>string</code> | ✓ |  |
+| [region](variables.tf#L66) | Region where to deploy the function and resources. | <code>string</code> | ✓ |  |
+| [backend](variables.tf#L15) | Backend settings. | <code title="object&#40;&#123;&#10;  function_name   &#61; optional&#40;string, &#34;my-react-app-backend&#34;&#41;&#10;  service_account &#61; optional&#40;string, &#34;my-react-app-backend&#34;&#41;&#10;&#125;&#41;">object&#40;&#123;&#8230;&#125;&#41;</code> |  | <code>&#123;&#125;</code> |
+| [bucket](variables.tf#L24) | Bucket settings for hosting the SPA. | <code title="object&#40;&#123;&#10;  name          &#61; optional&#40;string, &#34;my-react-app&#34;&#41;&#10;  random_suffix &#61; optional&#40;bool, true&#41;&#10;  build_name    &#61; optional&#40;string, &#34;my-react-app-build&#34;&#41; &#35; Build bucket for CF v2&#10;&#125;&#41;">object&#40;&#123;&#8230;&#125;&#41;</code> |  | <code>&#123;&#125;</code> |
+| [global_lb](variables.tf#L34) | Deploy a global application load balancer. | <code>bool</code> |  | <code>true</code> |
+| [lb_name](variables.tf#L40) | Application Load Balancer name. | <code>string</code> |  | <code>&#34;my-react-app&#34;</code> |
+| [nginx_image](variables.tf#L46) | Nginx image to use for regional load balancer. | <code>string</code> |  | <code>&#34;gcr.io&#47;cloud-marketplace&#47;google&#47;nginx1:1.26&#34;</code> |
+| [project_create](variables.tf#L52) | Parameters for the creation of a new project. | <code title="object&#40;&#123;&#10;  billing_account_id &#61; string&#10;  parent             &#61; string&#10;&#125;&#41;">object&#40;&#123;&#8230;&#125;&#41;</code> |  | <code>null</code> |
+| [regional_lb](variables.tf#L71) | Deploy a regional application load balancer. | <code>bool</code> |  | <code>false</code> |
+| [vpc_config](variables.tf#L77) | Settings for VPC (required when deploying a Regional LB). | <code title="object&#40;&#123;&#10;  network                &#61; string&#10;  network_project        &#61; optional&#40;string&#41;&#10;  subnetwork             &#61; string&#10;  subnet_cidr            &#61; optional&#40;string, &#34;172.20.20.0&#47;24&#34;&#41;&#10;  proxy_only_subnetwork  &#61; string&#10;  proxy_only_subnet_cidr &#61; optional&#40;string, &#34;172.20.30.0&#47;24&#34;&#41;&#10;  create                 &#61; optional&#40;bool, true&#41;&#10;&#125;&#41;">object&#40;&#123;&#8230;&#125;&#41;</code> |  | <code title="&#123;&#10;  network               &#61; &#34;my-react-app-vpc&#34;&#10;  subnetwork            &#61; &#34;my-react-app-vpc-subnet&#34;&#10;  proxy_only_subnetwork &#61; &#34;my-react-app-vpc-proxy-subnet&#34;&#10;&#125;">&#123;&#8230;&#125;</code> |
+
+## Outputs
+
+| name | description | sensitive |
+|---|---|:---:|
+| [global_lb](outputs.tf#L15) | Global load balancer address. |  |
+| [regional_lb](outputs.tf#L20) | Regional load balancer address. |  |
+<!-- END TFDOC -->

blueprints/serverless/cloud-run-react-spa/backend/main.py

@@ -0,0 +1,20 @@
+# Copyright 2024 Google LLC
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     https://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+import functions_framework
+
+
+@functions_framework.http
+def hello_function(request):
+  return 'Hello World'

blueprints/serverless/cloud-run-react-spa/backend/requirements.txt

@@ -0,0 +1,14 @@
+# Copyright 2024 Google LLC
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     https://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+functions-framework

blueprints/serverless/cloud-run-react-spa/global-lb.tf

@@ -0,0 +1,150 @@
+# Copyright 2024 Google LLC
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     https://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+module "xlb" {
+  for_each            = toset(var.global_lb ? [""] : [])
+  source              = "../../../modules/net-lb-app-ext"
+  project_id          = module.project.project_id
+  name                = var.lb_name
+  use_classic_version = false
+  backend_service_configs = {
+    python-backend = {
+      backends = [
+        { backend = "python-backend-neg" },
+      ]
+      health_checks = []
+      port_name     = "http"
+    }
+  }
+  backend_buckets_config = {
+    gcs-static = {
+      bucket_name = module.bucket.name
+    }
+  }
+  health_check_configs = {}
+
+  urlmap_config = {
+    default_service = "gcs-static"
+    host_rules = [{
+      hosts        = ["*"]
+      path_matcher = "api"
+    }]
+    path_matchers = {
+      api = {
+        default_service = "gcs-static"
+        route_rules = [
+          {
+            description = "Send all backend traffic to our Cloud Function"
+            match_rules = [
+              {
+                path = {
+                  value = "/api/"
+                  type  = "prefix"
+                }
+              }
+            ]
+            service  = "python-backend"
+            priority = 50
+          },
+          {
+            description = "Passthrough all static assets to the bucket"
+            match_rules = [
+              {
+                path = {
+                  value = "/*.ico"
+                  type  = "template"
+                }
+              },
+              {
+                path = {
+                  value = "/*.png"
+                  type  = "template"
+                }
+              },
+              {
+                path = {
+                  value = "/*.json"
+                  type  = "template"
+                }
+              },
+              {
+                path = {
+                  value = "/*.txt"
+                  type  = "template"
+                }
+              },
+              {
+                path = {
+                  value = "/*.css"
+                  type  = "template"
+                }
+              },
+              {
+                path = {
+                  value = "/*.js"
+                  type  = "template"
+                }
+              },
+            ]
+            service = "gcs-static"
+            header_action = {
+              response_add = {
+                "Content-Security-Policy" = {
+                  value = local.csp_header
+                }
+              }
+            }
+            priority = 60
+          },
+          {
+            description = "Rewrite all non-static requests to index.html"
+            match_rules = [
+              {
+                path = {
+                  value = "/**"
+                  type  = "template"
+                }
+              }
+            ]
+            service  = "gcs-static"
+            priority = 100
+            header_action = {
+              response_add = {
+                "Content-Security-Policy" = {
+                  value = local.csp_header
+                }
+              }
+            }
+            route_action = {
+              url_rewrite = {
+                path_template = "/index.html"
+              }
+            }
+          }
+        ]
+      }
+    }
+  }
+
+  neg_configs = {
+    python-backend-neg = {
+      cloudrun = {
+        region = var.region
+        target_service = {
+          name = module.backend.function_name
+        }
+      }
+    }
+  }
+}