Overview

In this lab, you deploy the Quiz application into App Engine Flex, leveraging App Engine features, including versions and traffic splitting.

Objectives

In this lab, you learn how to perform the following tasks:

• Create an app.yaml file to describe the App Engine Flex requirements for an application.

• Deploy the quiz application into App Engine Flex.

• Employ versions and traffic splitting to perform A/B testing of an application feature.

Setup and requirements

For each lab, you get a new Google Cloud project and set of resources for a fixed time at no cost.

1. Sign in to Qwiklabs using an incognito window.

2. Note the lab's access time (for example, 1:15:00), and make sure you can finish within that time.
   There is no pause feature. You can restart if needed, but you have to start at the beginning.

3. When ready, click Start lab.

4. Note your lab credentials (Username and Password). You will use them to sign in to the Google Cloud Console.

5. Click Open Google Console.

6. Click Use another account and copy/paste credentials for this lab into the prompts.
   If you use other credentials, you'll receive errors or incur charges.

7. Accept the terms and skip the recovery resource page.

Activate Google Cloud Shell

Google Cloud Shell is a virtual machine that is loaded with development tools. It offers a persistent 5GB home directory and runs on the Google Cloud.

Google Cloud Shell provides command-line access to your Google Cloud resources.

1. In Cloud console, on the top right toolbar, click the Open Cloud Shell button.

   

2. Click Continue.

It takes a few moments to provision and connect to the environment. When you are connected, you are already authenticated, and the project is set to your PROJECT_ID. For example:

gcloud is the command-line tool for Google Cloud. It comes pre-installed on Cloud Shell and supports tab-completion.

• You can list the active account name with this command:

gcloud auth list

Output:

Credentialed accounts: - @.com (active)

Example output:

Credentialed accounts: - google1623327_student@qwiklabs.net

• You can list the project ID with this command:

gcloud config list project

Output:

[core] project =

Example output:

[core] project = qwiklabs-gcp-44776a13dea667a6 Note: Full documentation of gcloud is available in the gcloud CLI overview guide .

Task 1. Preparing the case study application

In this section, you access Cloud Shell, clone the git repository containing the Quiz application, configure environment variables, and run the application.

Clone source code in Cloud Shell

1. Clone the repository for the class:

git clone --depth=1 https://github.com/GoogleCloudPlatform/training-data-analyst

2. Create a soft link as a shortcut to the working directory:

ln -s ~/training-data-analyst/courses/developingapps/v1.3/nodejs/appengine ~/appengine

Configure the case study application and review code

1. Change the directory that contains the sample files for this lab:

cd ~/appengine/start

2. Configure the Quiz application:

. prepare_environment.sh Note: This script file:

• Creates an App Engine application.
• Creates a Cloud Storage bucket.
• Exports environment variables GCLOUD_PROJECT and GCLOUD_BUCKET.
• Runs npm install.
• Creates entities in Datastore.
• Creates a Pub/Sub topic.
• Creates a Spanner Instance, Database, and Table.
• Creates a Cloud Function.
• Prints out the Google Cloud Platform Project ID.

3. In Cloud Shell, click Open Editor. If prompted, click Open in a new window.

4. Navigate to appengine/start.

Note: The folder structure for the quiz application has changed to reflect how it is deployed in App Engine.

The web application is in a folder called frontend.

There are configuration files for App Engine; app.yaml and config.json in the frontend folder.

Click Check my progress to verify the objective. Preparing the Case Study Application

Task 2. Preparing application code for App Engine Flex deployment

In this section, you modify the configuration files for deployment of the quiz application frontend into App Engine Flex.

Create the app.yaml file for the frontend

1. In the Cloud Shell code editor, open appengine/start/frontend/app.yaml.
2. Add two key: value pairs, and set scaling to manual:

• The first setting, runtime, indicates that you want to use the nodejs runtime.

• The second setting, env, indicates that you want to use the flexible environment.

• The number of instances is set to 1. A production service should typically be allowed to scale to more instances.

...frontend/app.yaml

runtime: nodejs env: flex manual_scaling: instances: 1

3. Modify the appengine/start/frontend/config.json file to include a key GCLOUD_BUCKET, the value is the name of the -media bucket in your project, which is <GCP-Project-ID>-media.

...frontend/config.json

{ "GCLOUD_BUCKET" : "<REPLACE_WITH_BUCKET_NAME>" }

4. Save the files.

Deploy the frontend to App Engine Flex

1. In Cloud Shell, deploy the quiz application to App Engine Flex:

gcloud app deploy ~/appengine/start/frontend/app.yaml

If asked "Do you want to continue (Y/n)?" press Y.

Note: The App Engine automatically packages up the code, containerizes it, and deploys it.

It may take up to five minutes to complete the deployment.

2. Wait for the deployment to be completed.
3. In the Cloud Platform Console, on the Navigation menu, click App Engine.
4. Click on the link to your application in the top-right corner of the App Engine Dashboard.

Note: The link is in the form https://<PROJECT_ID>.appspot.com.

You should see your application. Deploy the frontend to App Engine Flex

Task 3. Updating an App Engine Flex application

In this section, you modify the application code and then redeploy the application.

Update the quiz application

1. In the Cloud Shell code editor, open the appengine/start/frontend/web-app/views/home.pug file.

2. Add several exclamation points to the top-level heading.

...frontend/web-app/views/home.pug

extends base.pug block content h1 Welcome to the Quite Interesting Quiz!!!!!!!!!! .jumbotron p Welcome to the Quite Interesting Quiz where you can create a question, take a test or review feedback h3.col-md-4 a(href="/questions/add") Create Question h3.col-md-4 a(href="/client/") Take Test h3.col-md-4 a(href="/leaderboard") Leaderboard Note: This small change stands in for all the changes you might make when updating an application.

3. Save the file.

Deploy the updated application

1. In Cloud Shell, redeploy the App Engine application:

gcloud app deploy ~/appengine/start/frontend/app.yaml --no-promote \ --no-stop-previous-version

If asked "Do you want to continue (Y/n)?" press Y.

Note: Notice the two additional flags in the command, which mean that the previous version will continue to receive traffic.

It may take up to five minutes to complete the updates to the deployment.

2. In the Cloud Platform Console, on the Navigation menu, click App Engine > Dashboard.
3. Click on the application URL in the top-right corner of the window. You should see that your application still displays the old title.
4. In the App Engine window, click Versions.

Note: You should see that there are two versions of the application. The version ID is in the form yyyymmddthhmmss, so it's easy to see which is the new and which is the old version.

5. Click on the version link for the new version.

Note: You should see the new version of your application (with all the exclamation marks!).

6. Use the checkboxes to select both versions of the application, and click Split traffic in the top-right of the Versions page.
7. Configure the traffic allocation to deliver 50% of traffic to the old version, and 50% to the new version.
8. Select the radio button to randomly split traffic to each versions.
9. Click Save.
10. Navigate to the site and refresh the homepage a few times.

Note: You should see that that the homepage displays the old version approximately half the time, and the new version half the time.

In real-world scenarios, you might start by delivering small amounts of traffic to the new version in a canary release, and would use either a cookie or IP address to ensure that a client viewed a single consistent version of the application. Updating the App Engine Flex Application

Task 4. Bonus

In the bonus, you can explore activating the Cloud Debugger and Cloud Error Reporting features in your application. Use the steps from the Debugging Application Errors lab guide to:

1. Create a Cloud Source Repository.
2. Push the appropriate code into the repository.
3. Set up Cloud Debugger and Cloud Error Reporting.
4. Explore debug snapshots and logpoints.
5. Explore Error Reporting.
6. View Cloud Logging.

Note: Review

Which of the following statements about App Engine Flex and Container Engine are true?

1. Both App Engine Flex and Container Engine use Docker containers.
2. Both App Engine and Container Engine require a load balancer to be provisioned explicitly.
3. Both App Engine and Container Engine serve traffic via an appspot.com domain.

Which mechanisms can you use to direct traffic splits with App Engine?

1. Via the IP address
2. Via a cookie
3. Randomly
4. Via authenticated username
5. None of the above; this is not possible with App Engine

End your lab

When you have completed your lab, click End Lab. Google Cloud Skills Boost removes the resources you’ve used and cleans the account for you.

You will be given an opportunity to rate the lab experience. Select the applicable number of stars, type a comment, and then click Submit.

The number of stars indicates the following:

• 1 star = Very dissatisfied
• 2 stars = Dissatisfied
• 3 stars = Neutral
• 4 stars = Satisfied
• 5 stars = Very satisfied

You can close the dialog box if you don't want to provide feedback.

For feedback, suggestions, or corrections, please use the Support tab.

Copyright 2022 Google LLC All rights reserved. Google and the Google logo are trademarks of Google LLC. All other company and product names may be trademarks of the respective companies with which they are associated.