Practice Lab: Using Cloud Storage and Deploying Applications on Google App Engine (CLI)

Objective: In this practice lab, you will learn how to work with Google Cloud Storage, utilize it within your applications, and deploy applications using Google App Engine. By the end of this lab, you will have uploaded an image to Cloud Storage, created a Python application that displays the uploaded image, and deployed this application using Google App Engine.

What is Google App Engine?

Google App Engine

Google App Engine is a fully managed platform as a service (PaaS) by Google Cloud Platform (GCP) that allows developers to build and deploy applications without managing the underlying infrastructure. App Engine automatically handles infrastructure concerns such as hardware provisioning, load balancing, application health monitoring, and more.

Key Features of Google App Engine

1. Fully Managed:

• No need to manage servers, storage, or networking.
• Google handles the infrastructure, scaling, and monitoring.

2. Automatic Scaling:

• Scales your application automatically in response to the amount of traffic it receives.
• Can handle sudden spikes in traffic seamlessly.

3. Support for Multiple Languages and Frameworks:

• Supports popular languages such as Python, Java, Node.js, Go, Ruby, PHP, and more.
• Easily deploy applications using standard frameworks and tools.

4. Integrated Security:

• Built-in security features including SSL/TLS, firewall rules, and integration with Google Cloud IAM.

5. Versioning and Rollbacks:

• Deploy multiple versions of your application and easily roll back to previous versions if needed.

6. Developer Productivity Tools:

• Integrated with GCP’s development and monitoring tools, such as Cloud Build, Cloud Monitoring, and Stackdriver Debugger.

Part 1: Setting Up Your Google Cloud Account

1. Create a Google Cloud Account:

• Go to the Google Cloud Console at https://console.cloud.google.com
• Sign in with your Google account. If you don’t have one, create a new Google account.

2. Set Up Billing (Optional if you use GCP Directly, not CloudGuru)

• Navigate to the “Billing” section in the Console.
• Add your billing information. Google offers a free tier with credits for new users.

Setup Billing

Part 2: Setting Up Cloud Storage

1. Navigate to Cloud Storage:

• In the Google Cloud Console, use the navigation menu to go to “Storage” > “Browser.”

2. Create a New Bucket:

• Click “Create bucket.”

• Configure your bucket:
• Name: Enter a unique name (e.g., my-app-bucket2). If conflict, choose another name.
• Location type: Choose “Region” and select a region close to you.
• Storage class: Select “Standard.”
• Click “Create” to set up the bucket.

3. Upload an Image to the Bucket:

• After creating the bucket, click on its name to open it.
• Click “Upload files” and select any jpeg image from your computer to upload. And rename it itu myimage.jpg

Part 3: Creating a Python Application

1. Install Google Cloud SDK:

• If you don’t already have the Google Cloud SDK installed, download and install it from the Google Cloud SDK website at https://cloud.google.com/sdk/docs/install
• or this link https://cloud.google.com/sdk/
• Choose the installation step based on your operating system.
• Follow the installation steps as guided on the link

2. Create a Simple Application:

We are going to create application using python.

Clone my Repo (Optional)

You can creating the app typing or copying sample code in below. Or you can also pull the complete code from there repository here:

git clone https://github.com/novrian6/python-storage-app-engine.git

GitHub - novrian6/python-storage-app-engine: Python app that display image on cloud storage…

However you still need to adjust some value like bucket_name and image_name in the app.yaml. Please read throughthe following sections.

Create or Modify the Code

• Create a directory for your application, e.g., my-app.
• Inside the directory, create a file named main.py with the following content:

from flask import Flask, render_template
from google.cloud import storage

app = Flask(__name__)

@app.route('/')
def index():
    # Replace with your Google Cloud Storage bucket and image name
    bucket_name = 'my-app-bucket4'
    image_name = 'myimage.jpg'

    # Construct the image URL
    image_url = f'https://storage.cloud.google.com/{bucket_name}/{image_name}'

    return render_template('index.html', image_url=image_url)

if __name__ == '__main__':
    app.run(debug=True)

3. Create a Template File:

• Inside the my-app directory, create a folder named templates.
• In the templates folder, create a file named index.html with the following content:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flask App with Image</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        .page-heading {
            text-align: center;
            margin-bottom: 20px;
        }
        .image-container {
            text-align: center;
        }
        .image-container img {
            max-width: 100%;
            height: auto;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="page-heading">
            <h1>Welcome to My Flask App</h1>
        </div>
        <div class="image-container">
            <img src="{{ image_url }}" alt="My Image">
        </div>
    </div>
</body>
</html>

4. Create a Requirements File:

This requirements file will be needed to install libary needed when running python.

• In the same directory (my-app), create a file named requirements.txt with the following content:

Flask==2.0.1
Werkzeug==2.0.1
# Add other dependencies as needed
gunicorn==21.2.0
google-cloud-storage

5. Create an app.yaml File:

App.yaml is the core configuration file that you need to create when using App Engine.

• In the same directory (my-app), create a file named app.yaml with the following content:

runtime: python39
entrypoint: gunicorn -b :$PORT main:app

• Replace my-app-bucket with your actual bucket name, and your-image-file-name with the name of the image file you uploaded to the bucket.

Part 4: Deploying the Application Using Google App Engine

1. Go into your Shell to run Google CLI

Check the gcloud SDK/CLI is installed by running gcloud version

Make sure you have logged in by running

gcloud auth login

• Login with your GCP account. Then return to the shell or CLI.

To list all account by

gcloud auth list

Choose corresponding email that is used on you GCP account.

To set it run

gcloud config set account <one of the email listed>

2. Initialize the App Engine Application:

• Open a terminal and navigate to your application directory (my-app).
• Run the following command to initialize the App Engine application. Replace the project_id from your cloud console

get the project id

gcloud app create --project=[YOUR_PROJECT_ID]

if it has been created , just go to the next step.

3. Deploy the Application:

• Run the following command to deploy your application to App Engine:

gcloud app deploy

3. Access Your Application:

• After deployment, you will receive a URL where your application is hosted. Visit this URL in your browser to see your running application displaying the uploaded image.
• Your visit also by running gcloud app browse

Page displayed

Conclusion

Congratulations! You have successfully set up cloud storage, uploaded an image, created a Python application that displays the uploaded image, and deployed the application using Google App Engine. This practice lab covered the essential steps to work with cloud storage, manage application configurations, and deploy applications in GCP.

By mastering these skills, you are now equipped to handle more advanced scenarios and configurations in GCP, enabling you to build, deploy, and scale cloud-native applications effectively. Continue exploring GCP to leverage its full potential for your projects and applications.