This guide provides instructions on how to deploy the Tour of Beam environment on Google Cloud Platform (GCP) and Firebase environment. Before starting the deployment, ensure that you have the following prerequisites in place:
GCP User account (Note: You will find the instruction “How to create User account” for your new project)
Ensure that the account has at least following privileges:
Google Cloud Storage bucket for saving deployment state
An OS with the following software installed:
Existing Beam Playground environment
Apache Beam Git repository cloned locally
beam/learning/tour-of-beam/terraform directorycd beam/learning/tour-of-beam/terraform
gcloud init gcloud auth application-default login
gcloud auth configure-docker `chosen_region`-docker.pkg.dev
gcloud container clusters get-credentials --region `chosen_gke_zone` `gke_name` --project `project_id`
gcloud datastore indexes create ../backend/internal/storage/index.yaml
terraform init -backend-config="bucket=`created_gcs_bucket`"
terraform plan -var "environment=prod" \
-var "region=us-west1" \
-var "project_id=$(gcloud config get-value project)" \
-var "datastore_namespace=playground-datastore-namespace" \
-var "pg_router_host=$(kubectl get svc -l app=backend-router-grpc -o jsonpath='{.items[0].status.loadBalancer.ingress[0].ip}:{.items[0].spec.ports[0].port}')"
terraform apply -var "environment=prod" \
-var "region=us-west1" \
-var "project_id=$(gcloud config get-value project)" \
-var "datastore_namespace=playground-datastore-namespace" \
-var "pg_router_host=$(kubectl get svc -l app=backend-router-grpc -o jsonpath='{.items[0].status.loadBalancer.ingress[0].ip}:{.items[0].spec.ports[0].port}')"
Where:
Update config.dart configuration file under beam/learning/tour-of-beam/frontend/lib:
8.1. Navigate to beam/learning/tour-of-beam/frontend/lib.
8.2. Update config.dart file, replacing values in ${ } with your actual values.
Where:
const _cloudFunctionsProjectRegion = '${cloudfunctions_region}';
const _cloudFunctionsProjectId = '${project_id}';
const cloudFunctionsBaseUrl = 'https://'
'$_cloudFunctionsProjectRegion-$_cloudFunctionsProjectId'
'.cloudfunctions.net/${environment}_';
9. Create file .firebaserc under beam/learning/tour-of-beam/frontend
9.1. Navigate to beam/learning/tour-of-beam/frontend.
9.2. Create .firebaserc file with the following content.
Where:
- **${project_id}** - GCP project where infrastructure being deployed
{ “projects”: { “default”: “${project_id}” } }
10. Login into the Firebase CLI
firebase login
firebase login --no-localhost
11. Create Firebase Project
firebase projects:addfirebase
12. Create Firebase Web App and prepare Firebase configuration file
firebase apps:create WEB ${webapp_name} --project=$(gcloud config get-value project)
Once Firebase Web App has been created, there will be following output example:
Create your WEB app in project cloudbuild-383310: ✔ Creating your Web app
🎉🎉🎉 Your Firebase WEB App is ready! 🎉🎉🎉
App information:
You can run this command to print out your new app's Google Services config: firebase apps:sdkconfig WEB WEBAPP_ID
Copy and paste into the terminal last line to get Web App configuration. Output example:
✔ Downloading configuration data of your Firebase WEB app // Copy and paste this into your JavaScript code to initialize the Firebase SDK. // You will also need to load the Firebase SDK. // See https://firebase.google.com/docs/web/setup for more details.
firebase.initializeApp({ “projectId”: “cloudbuild-384304”, “appId”: “1:1111111111:web:111111111111”, “storageBucket”: “cloudbuild-384304.appspot.com”, “locationId”: “us-west1”, “apiKey”: “someApiKey”, “authDomain”: “cloudbuild-384304.firebaseapp.com”, “messagingSenderId”: “111111111111” });
Copy the lines inside the curly braces and redact them. You will need to: 1) Remove "locationId" line. 2) Remove quotes (") from key of "key": "value" pair. 3) E.g. `projectId: "cloudbuild-384304"` 4) In overall, redacted and ready to be inserted data should be as follows:
projectId: “cloudbuild-384304”, appId: “1:1111111111:web:111111111111”, storageBucket: “cloudbuild-384304.appspot.com”, apiKey: “someApiKey”, authDomain: “cloudbuild-384304.firebaseapp.com”, messagingSenderId: “111111111111”
Paste (replace) the redacted data inside the parentheses in beam/learning/tour-of-beam/frontend/lib/firebase_options.dart file.
static const FirebaseOptions web = FirebaseOptions(
);
13. Run flutter and firebase commands to deploy Tour of Beam frontend Navigate to beam/playground/frontend/playground_components and run flutter commands
flutter pub get flutter pub run build_runner build --delete-conflicting-outputs
Navigate to beam/learning/tour-of-beam/frontend and run flutter commands
flutter pub get flutter pub run build_runner build --delete-conflicting-outputs flutter build web --profile --dart-define=Dart2jsOptimization=O0 firebase deploy --project=$(gcloud config get-value project)
# Validate the deployment of the Tour of Beam: 14. Open the Tour of Beam webpage in a web browser (Hosting URL will be provided in terminal output) to ensure that deployment has been successfully completed. Example:
✔ Deploy complete!
Project Console: https://console.firebase.google.com/project/some-gcp-project-id/overview Hosting URL: https://some-gcp-project-id.web.app