DEVELOPMENT LAB REQUIREMENTS
Task 1:
a. To create a Linux Compute Engine VM instance suitable for web serving and low cost to
operate, the following steps can be followed:
Step 1: “First need to log in to the Google Cloud platform”.
Step 2: “Next need to go to Compute Engine and then need to click on VM instances”.
Step 3: “Then need to click on “Create Instance” to create a new instance of VM”.
Step 4: After that need to select a name for the new instance and a region within Europe. For
example, “webserver-instance” and “Europe-west1-b”.
Step 5: Next need to choose a machine type that is fulfilling the requirements and is low-cost to
operate. For example, “f1-micro” can be chosen as it is a low-cost machine type.
Step 6: Under “Boot disk”, “Ubuntu” need to be selected as the operating system, and need to set
the boot disk size to a minimum of 10GB.
Step 7: Then under “Firewall”, need to select “Allow HTTP traffic” and “Allow HTTPS traffic”.
Step 8: Then need to click on “Create” to create the instance.
b. To install and test a web server one needs to follow these steps:
Step 1: At first need to SSH into the newly created instance using the GCP console.
Step 2: “Then need to update the package list and install a web server. For example, to install the
Apache web server on Ubuntu one needs to run the following commands”:
“sudo apt-get update”
“sudo apt-get install apache2”
Step 3: “After that start the Apache web server by running the following command”:
“sudo service apache2 start”
Step 4: Lastly need to test that the web server is working by opening a web browser and
navigating to the external IP address of the instance. The Apache default welcome page will
open.
c. To copy a photographic image file to the instance and show it can be served by the web server
using a URL by the following steps:
Step 1: Next need to choose a tool and copy the image file to the instance using a tool such as
scp or the GCP console.
Step 2: Then need to place the image file in the appropriate directory for the web server. For
example, in Apache, the file can be placed in the “/var/www/html directory”.
Step 3: “Then need to verify that the image file can be served by the web server by navigating to
the URL of the file in a web browser”. “For example, if the file is named “image.jpg” and is
located in the “/var/www/html directory”, the URL would be
http://<external-ip-address>/image.jpg”.
d. To develop and test a simple App Engine app that displays a message when accessed using an
appropriate URL the following steps need to be followed:
Step 1: At first create a new App Engine app in the GCP console by navigating to App Engine ->
Dashboard and clicking “Create Application”.
Step 2: Then choose a region and a unique name for the app.
Step 3: After that choose a programming language that is supported by App Engine. For
example, Python, Java, etc.
Step 4: “Next create a new file in the chosen language with a simple web app that displays a
message containing the name and student ID when accessed using an appropriate URL. For
example, in Python, create a file named main.py with the following contents”:
“from flask import Flask”
“app = Flask(__name__)”
“@app.route(‘/’)”
“def hello():”
“return ‘Hello, my name is [ name] and my student ID is [ student ID].’”
“if __name__ == ‘__main__’:”
“app.run()”
Step 5: Test the app locally by running it on a local machine using a tool such as Flask or Google
Cloud SDK.
Step 6: Deploy the app to App Engine by running the appropriate command in the chosen
language's SDK or using the GCP console.
Step 7: Test the app remotely by navigating to the URL of the app in a web browser. For
example, if the app is named “my-app” and is deployed in the region “Europe-west1”, the URL
would be “https://my-app.europe-west1.appspot.com/”.
Step 8: Verify that the app is working by checking that the message containing name and student
ID is displayed in the web browser.
Task 2:
a. To create a Cloud Storage bucket configured to replicate its content to two regions with a
storage class appropriate for frequent access can be done by the following steps:
Step 1: “Login to the Google Cloud Console”.
Step 2: “Go to the Cloud Storage section”.
Step 3: “Click on Create bucket”.
Step 4: “Choose a globally unique name for the bucket”.
Step 5: Select the desired default storage class for the bucket. For frequent access, one can
choose “Standard” or “Nearline”.
Step 6: Select the desired location for the bucket.
Step 7: Select “Multi-regional” for the “Replication” option.
Step 8: Choose the two regions to replicate in the bucket.
Step 9: Click “Create”.
By following these steps the first part of task 2 can be done.
b. To upload three image files to the bucket and to ensure all are publicly accessible one needs to
follow the steps:
Step 1: “In the Google Cloud Console, go to the Cloud Storage section”.
Step 2: Click on the bucket created in step a.
Step 3: Click on "Upload files".
Step 4: Select the three image files to upload.
Step 5: Click “Upload”.
Step 6: “Once the upload is complete, select each image and click on Edit permissions”.
Step 7: Under “Public access”, select “Public” and click “Save”.
c. To complete the part c of task 2 one need to follow the steps:
Step 1: Create a new HTML file using a text editor.
Step 2: Copy the following code into the HTML file, replacing “BUCKET_NAME” with the
name of the bucket and “IMAGE_NAME” with the names of the images:
“<html>”
“<head>”
“<title>My Images</title>”
“</head>”
“<body>”
“<h1>My Images</h1>”
“<p><img src="https://storage.googleapis.com/BUCKET_NAME/IMAGE_NAME1.jpg"
alt="Image 1"><br> Caption for Image 1</p>”
“<p><img src="https://storage.googleapis.com/BUCKET_NAME/IMAGE_NAME2.jpg"
alt="Image 2"><br> Caption for Image 2</p>”
“<p><img src="https://storage.googleapis.com/BUCKET_NAME/IMAGE_NAME3.jpg"
alt="Image 3"><br> Caption for Image 3</p>”
“</body>”
“</html>”
Step 3: “Save the file as index.html”.
Step 4: “Upload the “index.html” file to the compute engine instance using an SFTP client”.
Step 5: “Make sure the web server is running and navigate to the URL of the compute engine
instance in a web browser”. One will see the HTML file displayed with the images and captions.
d. To complete part d of Task 2, one can follow these steps:
Step 1: “Create a new directory for the second App Engine app, navigate to it, and create a new
file called app.yaml”.
Step 2: “Add the following code to app.yaml”:
yamlCopy code
runtime: python39 handlers: - url: /(.+\.png) static_files: gs://<bucket_name>/\1 upload: (.+\.png)
- url: /(.+) script: auto
“Replace <bucket_name> with the name of the Cloud Storage bucket created in Task 2a”.
Step 3: “Create a new file called main.py and add the following code”:
“from flask import Flask, abort, send_file”
“app = Flask(__name__)”
“@app.route('/')”
“def index():”
“html = '''”
“<html>”
“<body>”
“<h1>Images:</h1>”
“<ul>”
“<li><a href="/1">Image 1</a></li>”
“<li><a href="/2">Image 2</a></li>”
“<li><a href="/3">Image 3</a></li>”
“</ul>”
“</body>”
“</html>”
“'''”
“return html”
“@app.route('/<int:image_id>')”
“def get_image(image_id):”
“if image_id < 1 or image_id > 3:”
“abort(404)”
“image_path = f'image{image_id}.png'”
“return send_file(image_path, mimetype='image/png', as_attachment=False)”
“if __name__ == '__main__':”
“app.run(host='127.0.0.1', port=8080, debug=True)”
This code creates a Flask app with two routes: one for the index page that displays links to the
three images, and one for serving individual images. The send_file function is used to serve the
images, and the abort function is used to return a 404 error if the requested image ID is not valid.
Step 4: Install the Flask library by running pip install Flask.
Step 5: Test the app locally by running python main.py and navigating to “http://localhost:8080”.
Step 6: Click on the links to make sure the images display correctly.
Step 7: Deploy the app to App Engine by running gcloud app deploy.
Step 8: Test the app remotely by navigating to “http://<your-project-id>.appspot.com”. Click on
the links to make sure the images display correctly.
Note: Make sure to replace <project-id> with actual Google Cloud project ID.
Task 3:
a. “To retrieve the metadata for a resource contained in a Google cloud storage bucket, one can
use the Objects: get method of the Google Cloud Storage JSON API”. We can find the
documentation for this API at the following URL:
“https://cloud.google.com/storage/docs/json_api/v1/objects/get”
To obtain the metadata for each of the three images in our storage bucket, we need to make a
GET request to the following URLs, replacing <bucket_name> and <object_name> with the
appropriate values:
“https://www.googleapis.com/storage/v1/b/<bucket_name>/o/<object_name>?alt=media “
b. “To develop and test a third App Engine app that serves the metadata for the images in the
bucket, one can use the following steps”:
Step 1: Create a new App Engine app using the same project used in Tasks 1 and 2. Choose a
different <chosenpath> for this app.
Step 2: “Create a new Python file called main.py in the root directory of our app. Add the
following code to this file”:
“python code”:
“import requests”
“from flask import Flask, jsonify”
“app = Flask(__name__)”
“@app.route('/<chosenpath>/<int:image_id>/metadata')”
“def serve_metadata(chosenpath, image_id):”
“bucket_name = '<bucket_name>'”
“object_names = ['image1.jpg', 'image2.jpg', 'image3.jpg']”
‘object_name = object_names[image_id-1]’
“url = "https://www.googleapis.com /storage /v1/b /{bucket_name} /o/{object_name}”
“?alt=media"”
“response = requests.get(url)”
“metadata = response.headers”
“return jsonify(metadata)”
Step 3: “Replace <bucket_name> with the name of the storage bucket”.
Step 4: “Deploy the app using the following command”:
“gcloud app deploy”
Once the app is deployed, one can test it locally by running the following command:
“gcloud app browse -s <service_name>”
Step 5: Replace <service_name> with the name of our app's service.
Step 6: In the browser window that opens, navigate to the URL “http: //localhost: <port>/
<chosenpath>/<image_id>/metadata”, replacing <port> with the port number displayed in the
terminal and <chosenpath> and <image_id> with appropriate values.
Step 7: The browser should display the metadata for the specified image.
c. To secure the App Engine app using Google Identity-Aware Proxy, one can follow these steps:
Step 1: Go to the Cloud Console and navigate to the IAP page for the project.
Step 2: Click "Add" to add a new App Engine app.
Step 3: Choose the App Engine app we created in Task 3 and click "Continue".
Step 4: Under "Access Settings", choose "IAP-secured Web App User" and click "Continue".
Step 5: Under "App Engine App Permissions", choose "Cloud IAP Secured Web App User" and
click "Continue".
Step 6: Under "Test IAP", click "Add IAP-secured resource".
Step 7: Choose our App Engine app and click "Continue".
Step 8: Choose the default IAP policy and click "Continue".
Step 9: Under "Access", choose "Only allow access to IAP-secured Web App User" and click
"Continue".
Step 10: Under "Summary", click "Start Configuration".
Step 11: Wait a few minutes for the IAP configuration to be created.
Step 12: Once the configuration is created, navigate to the URL
“https://<app_id>.appspot.com /<chosenpath>/<image_id>/metadata”, replacing <app_id>,
<chosenpath>, and <image_id> with appropriate values.
“from flask import Flask, jsonify”
“import requests”
“app = Flask(__name__)”
“# replace <bucket_name> with bucket name”
“bucket_name = '<bucket_name>'”
“# replace <metadata_api_url> with the metadata API URL for bucket”
“metadata_api_url = 'https://www.googleapis.com/storage/v1/b/{}/o/{}/'”
“# replace <chosenpath> with the path of choosing”
“@app.route('/<chosenpath>/metadata')”
“def serve_metadata():”
“image_metadata = []”
“for i in range(1, 4):’
“image_url = 'https://storage.googleapis.com/{}/{}{}.jpg'.format(bucket_name, chosenpath,
i)”
“response = requests.get(metadata_api_url.format(bucket_name, chosenpath + str(i) +
'.jpg'))”
“if response.status_code == 200:”
“image_metadata.append(response.json())”
“return jsonify(image_metadata)”
“if __name__ == '__main__':”
“app.run(host='0.0.0.0', port=8080, debug=True)”
To test the app, one can run it locally using python app.py command and accessing the URL
“http://localhost:8080/<chosenpath>/metadata”. One can also deploy it to App Engine using the
gcloud app deploy command.
For the final part of Task 3, one can secure the App Engine app using Google Identity-Aware
Proxy (IAP) by following these steps:
1. Enable the IAP API in your Google Cloud project.
2. Add the App Engine app as an IAP-secured app in the Cloud Console.
3. Grant yourself the IAP-secured Web App User role on the app in the Cloud Console.
4. Access the app using the IAP-secured URL that is provided in the Cloud Console, and ensure
that only you are able to access it.
Once all these have completed, one can test the app to show that it is secured and can only be
accessed by him/her.
