Summary

This is a brief description of the steps to be performed in each task of Qwiklabs Serverless Firebase Development: Challenge Lab

Provision the environment

To prepare the environment, store the project ID in an environment variable.

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

Clone the source code needed for this lab from the Github repository.

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

Task1:Create a Firestore database

Create a Firestore Database, click [Firestore] from the Navigation Menu of the Cloud console. Click [SELECT NATIVE MODE], select [Nam5(United States)] as the Location, and then click [CREATE DATABASE] to create the Firestore Database.

Task2:Populate the Database

Import the Netflix content CSV file “netflix_titles_original.csv” into the Firestore Database. In the cloud shell, navigate to the directory of the application you want to import and enter the following command

cd ~/pet-theory/lab06/firebase-import-csv/solution
npm install
node index.js netflix_titles_original.csv

Refresh the Firestore Database page in the Cloud Console to see the dataset that has been imported.

Task3:Create a REST API

Deploy the REST API. In Cloud Shell, navigate to the directory of the REST API source code and enter the command.

cd ~/pet-theory/lab06/firebase-rest-api/solution-01
npm install
gcloud builds submit --tag=gcr.io/$GOOGLE_CLOUD_PROJECT/rest-api:0.1
gcloud run deploy netflix-dataset-service --image=gcr.io/$GOOGLE_CLOUD_PROJECT/rest-api:0.1 --allow-unauthenticated

Task4:Firestore API access

Update the REST API so that it can access the Firestore Database. In Cloud Shell, navigate to the directory of the new revision of the REST API. Then enter the command

cd ~/pet-theory/lab06/firebase-rest-api/solution-02
npm install
gcloud builds submit --tag=gcr.io/$GOOGLE_CLOUD_PROJECT/rest-api:0.2
gcloud run deploy netflix-dataset-service --image=gcr.io/$GOOGLE_CLOUD_PROJECT/rest-api:0.2 --allow-unauthenticated

It seems that this API can be used to retrieve Netflix titles for a specified year. If you run the API as shown below, you will get the results back in JSON format.

curl -X GET $SERVICE_URL/2019

Task5:Deploy the Staging Frontend

Deploy the frontend of the staging environment. In Cloud Shell, navigate to the source code directory of the frontend of the staging environment and enter the command.

cd ~/pet-theory/lab06/firebase-frontend
npm install
gcloud builds submit --tag=gcr.io/$GOOGLE_CLOUD_PROJECT/frontend-staging:0.1
gcloud run deploy frontend-staging-service --image=gcr.io/$GOOGLE_CLOUD_PROJECT/frontend-staging:0.1 --allow-unauthenticated

When you access the service URL of the frontend, you will see a web page like the following The frontend of the staging environment is not making any REST API calls. It seems that it is just displaying the demo data.

Task6:Deploy the Production Frontend

Deploy the frontend in the production environment. update app.js in pet-theory/lab06/firebase-frontend/public to call the REST API. Open app.js in an editor and modify the “const REST_API_SERVICE” section as follows

//const REST_API_SERVICE = "data/netflix.json"
const REST_API_SERVICE = "https://netflix-dataset-service-mpuuyeah2q-uc.a.run.app/2020"

Be careful to comment out the original REST_API_SERVICE. Replace the service URL part with the netflix-dataset-service service URL deployed in Task4. To confirm the URL of the netflix-dataset-service service, go to Cloud Console, click Cloud run -> netflix-dataset-service, and the top right part is easy to find.

After updating app.js, run build and deploy as a production environment in Cloud shell.

gcloud builds submit --tag=gcr.io/$GOOGLE_CLOUD_PROJECT/frontend-production:0.1
gcloud run deploy frontend-production-service --image=gcr.io/$GOOGLE_CLOUD_PROJECT/frontend-production:0.1 --allow-unauthenticated

It is OK if you see the 2020 Netflix title as the frontend of the production environment.

Youtube