How do I configure Cloudflare DNS to properly route HTTP and HTTPS traffic to a GCP load balancer?

I'm hosting a single-page web app on GCP on a subdomain managed by Cloudflare. Currently, the app is hosted in a bucket that is accessible via a Cloudflare CNAME pointing to c.storage.googleapis.com.

I now need to add TLS, which seems to require a load balancer in front of the bucket. My anticipated process was:

• Add a load balancer to direct traffic to the web app
• Add an A record on Cloudflare that points to the load balancer IP

However, the load balancer appears to have different IP addresses for HTTP and HTTPS as shown here:

Below is my Terraform configuration for setting up the load balancer:

HCLCopied
provider "google" {
  project = var.project_id
  region  = var.region
}

# Create the Cloud Storage bucket
resource "google_storage_bucket" "react_app" {
  name          = var.domain # Must be globally unique
  location      = var.region
  force_destroy = true # Automatically delete bucket and contents if needed

  website {
    main_page_suffix = "index.html"
    not_found_page   = "index.html"
  }
}

# Set public read permissions for the bucket
resource "google_storage_bucket_iam_member" "all_users" {
  bucket = google_storage_bucket.react_app.name
  role   = "roles/storage.objectViewer"
  member = "allUsers"
}

# Upload files to the bucket
resource "google_storage_bucket_object" "react_app_files" {
  for_each = fileset("${path.module}/../dist", "**") # Iterates over files in the 'dist' folder
  name     = each.value
  bucket   = google_storage_bucket.react_app.name
  source   = "${path.module}/../dist/${each.value}"
  content_type = lookup(
    {
      "html" = "text/html",
      "css"  = "text/css",
      "js"   = "application/javascript",
      "json" = "application/json",
      "png"  = "image/png",
      "jpg"  = "image/jpeg",
    },
    split(".", each.value)[length(split(".", each.value)) - 1],
    "application/octet-stream"
  )
}

# 2. Backend bucket for the load balancer
resource "google_compute_backend_bucket" "dashboard_backend" {
  name        = "dashboard-backend-bucket"
  bucket_name = google_storage_bucket.react_app.name
  enable_cdn  = true # Enable Cloud CDN for faster delivery
}

# 3. URL map to route traffic to the backend bucket
resource "google_compute_url_map" "dashboard_url_map" {
  name            = "dashboard-url-map"
  default_service = google_compute_backend_bucket.dashboard_backend.id
}

# 4. HTTP-to-HTTPS redirect
resource "google_compute_target_http_proxy" "dashboard_http_proxy" {
  name    = "dashboard-http-proxy"
  url_map = google_compute_url_map.dashboard_url_map.id
}

resource "google_compute_global_forwarding_rule" "http_forwarding_rule" {
  name       = "http-forwarding-rule"
  target     = google_compute_target_http_proxy.dashboard_http_proxy.id
  port_range = "80"
}

# 5. HTTPS proxy
resource "google_compute_managed_ssl_certificate" "dashboard_ssl" {
  name = "react-ssl-cert"
  managed {
    domains = [var.domain]
  }
}

resource "google_compute_target_https_proxy" "dashboard_https_proxy" {
  name             = "dashboard-https-proxy"
  url_map          = google_compute_url_map.dashboard_url_map.id
  ssl_certificates = [google_compute_managed_ssl_certificate.dashboard_ssl.id]
}

# 6. HTTPS forwarding rule
resource "google_compute_global_forwarding_rule" "https_forwarding_rule" {
  name       = "https-forwarding-rule"
  target     = google_compute_target_https_proxy.dashboard_https_proxy.id
  port_range = "443"
}

How can I configure DNS in Cloudflare so that traffic for both HTTP and HTTPS correctly routes to the load balancer?