GSP344_Serverless-Firebase-Development

GSP344 —— Serverless Firebase Development

Table of Contents （🔎 Click to expand／collapse）

• Overview
• Challenge Scenario
• Provision the Environment
• Task 1: Create a Firestore database
  • Description
  • Solution
• Task 2: Populate the Database
  • Description
  • Solution
• Task 3: Create a REST API
  • Description
  • Solution
• Task 4: Firestore API access
  • Description
  • Solution
• Task 5: Deploy the Staging Frontend
  • Description
  • Solution
• Task 6: Deploy the Production Frontend
  • Description
  • Solution
• References

Quest Outline （🔎 Click to expand／collapse）

Level	Code	Name	Note
Fundamental	GSP642	Importing Data to a Firestore Database	EN
Fundamental	GSP643	Build a Serverless Web App with Firebase	EN
Fundamental	GSP747	Deploy a Hugo Website with Cloud Build and Firebase Pipeline	EN
Fundamental	GSP174	Google Assistant: Build an Application with Dialogflow and Cloud Functions	EN
Advanced	GSP344	Serverless Firebase Development: Challenge Lab

Overview

This lab is recommended for students who are enrolled in the Serverless Firebase Development quest.

Prerequisites:

• Firestore
• Cloud Run
• Cloud Build
• Container Registry

Challenge Scenario

In this lab you will create a frontend solution using a Rest API and Firestore database. Cloud Firestore is a NoSQL document database that is part of the Firebase platform where you can store, sync, and query data for your mobile and web apps at scale. Lab content is based on resolving a real world scenario through the use of Google Cloud serverless infrastructure.

You will build the following architecture:

Provision the Environment

Link to the project:

$ gcloud config set project $(gcloud projects list --format='value(PROJECT_ID)' --filter='qwiklabs-gcp')

Clone the repo:

$ git clone https://github.com/rosera/pet-theory.git

Task 1: Create a Firestore database

Description

In this scenario you create a Firestore Database in Google Cloud. The high level architecture diagram below summarizes the general architecture.

Requirements:

Field	Value
Cloud Firestore	Native Mode
Location	Nam5 (United States)

To complete this section successfully, you are required to implement the following:

• Cloud Firestore Database
• Use Firestore Native Mode
• Add location Nam5 (United States)

Solution

1. Click Navigation Menu > Firestore.
2. Click SELECT NATIVE MODE.
3. Selectnam5 (United States) as the location.
4. Click CREATE DATABASE.

Task 2: Populate the Database

Description

In this scenario, populate the database using test data. A high level architecture diagram below summarizes the general architecture.

To complete this section successfully, you are required to implement the following tasks:

• Use the sample code from pet-theory/lab06/firebase-import-csv/solution.
• To import CSV use the node pet-theory/lab06/firebase-import-csv/solution/index.js.

Solution

# navigate to target folder and install dependencies
$ cd ~/pet-theory/lab06/firebase-import-csv/solution
$ npm install

# import csv file
$ node index.js netflix_titles_original.csv

Task 3: Create a REST API

Description

In this scenario, create an example REST API. A high level architecture diagram below summarizes the general architecture.

To complete this section successfully, you are required to implement the following tasks:

• Access pet-theory/lab06/firebase-rest-api/solution-01
• Build and Deploy the code to Google Container Registry
  • Container Registry Image: rest-api:0.1
• Deploy the image as a Cloud Run Service
  • Cloud Run Service: netflix-dataset-service
  • Permission: --allow-unauthenticated
• curl -X GET $SERVICE_URL should respond with: {"status":"Netflix Dataset! Make a query."}

Solution

# navigate to target folder and install dependencies
$ cd ~/pet-theory/lab06/firebase-rest-api/solution-01
$ npm install

# build and deploy the code to Google Container Registry (gcr)
$ gcloud builds submit --tag="gcr.io/$GOOGLE_CLOUD_PROJECT/rest-api:0.1"

# deploy the image as a Cloud Run Service
$ gcloud run deploy netflix-dataset-service \
    --region="us-central1" \
    --image="gcr.io/$GOOGLE_CLOUD_PROJECT/rest-api:0.1" \
    --allow-unauthenticated

# [Optional] check the resoponse
$ SERVICE_URL="<SERVICE_URL_OF_REST_API>"
$ curl -X GET $SERVICE_URL

Task 4: Firestore API access

Description

In this scenario, deploy an updated revision of the code to access the Firestore DB. A high level architecture diagram below summarizes the general architecture.

To complete this section successfully, you are required to implement the following tasks:

• Access pet-theory/lab06/firebase-rest-api/solution-02.
• Build the updated application
• Use Cloud Build to tag and deploy image revision to Container Registry
  • Container Registry Image: rest-api:0.2
• Deploy the new image as Cloud Run service
  • Cloud Run Service: netflix-dataset-service
  • Permission: --allow-unauthenticated
• curl -X GET $SERVICE_URL/2019 should respond with json dataset

Solution

# navigate to target folder and install dependencies
$ cd ~/pet-theory/lab06/firebase-rest-api/solution-02
$ npm install

# build and deploy the code to Google Container Registry (gcr)
$ gcloud builds submit --tag="gcr.io/$GOOGLE_CLOUD_PROJECT/rest-api:0.2"

# deploy the image as a Cloud Run Service
$ gcloud run deploy netflix-dataset-service \
    --region="us-central1" \
    --image="gcr.io/$GOOGLE_CLOUD_PROJECT/rest-api:0.2" \
    --allow-unauthenticated

# [Optional] check the resoponse
$ SERVICE_URL="<SERVICE_URL_OF_NETFLIX_DATASET_SERVICE>"
$ curl -X GET $SERVICE_URL/2019

Task 5: Deploy the Staging Frontend

Description

In this scenario, deploy the Staging Frontend. A high level architecture diagram below summarizes the general architecture.

To complete this section successfully, you are required to implement the following tasks:

• Access pet-theory/lab06/firebase-frontend
• Build the frontend staging application
• Use Cloud Build to tag and deploy image revision to Container Registry
  • Container Registry Image: frontend-staging:0.1
• Deploy the new image as Cloud Run service
  • Cloud Run Service: frontend-staging-service
• Frontend access to Rest API and Firestore Database

Solution

# edit the REST_API_SERVICE URL
$ cd ~/pet-theory/lab06/firebase-frontend/public
$ nano app.js

# navigate to target folder and install dependencies
$ cd ~/pet-theory/lab06/firebase-frontend
$ npm install

# build and deploy the code to Google Container Registry (gcr)
$ gcloud builds submit --tag="gcr.io/$GOOGLE_CLOUD_PROJECT/frontend-staging:0.1"

# deploy the image as a Cloud Run Service
$ gcloud run deploy frontend-staging-service \
    --region="us-central1" \
    --image="gcr.io/$GOOGLE_CLOUD_PROJECT/frontend-staging:0.1"

Task 6: Deploy the Production Frontend

Description

In this scenario, update the Staging Frontend to use the Firestore database. A high level architecture diagram below summarizes the general architecture.

To complete this section successfully, you are required to implement the following tasks:

• Access pet-theory/lab06/firebase-frontend/public
• Update the frontend application i.e. app.js to use the REST API
• Don't forget to append the year to the SERVICE_URL
• Use Cloud Build to tag and deploy image revision to Container Registry
  • Container Registry Image: frontend-production:0.1
• Deploy the new image as Cloud Run service
  • Cloud Run Service: frontend-production-service
• Frontend access to Rest API and Firestore Database

Solution

# navigate to target folder and install dependencies
$ cd ~/pet-theory/lab06/firebase-frontend
$ npm install

# build and deploy the code to Google Container Registry (gcr)
$ gcloud builds submit --tag="gcr.io/$GOOGLE_CLOUD_PROJECT/frontend-production:0.1"

# deploy the image as a Cloud Run Service
$ gcloud run deploy frontend-production-service \
    --region="us-central1" \
    --image="gcr.io/$GOOGLE_CLOUD_PROJECT/frontend-production:0.1"

References

• gcloud builds submit | Cloud SDK Documentation
• gcloud run deploy | Cloud SDK Documentation