September 12, 2023
A simple web page in Google Cloud Functions
Purpose
This document will demonstrate Google Cloud Functions power and simplicity via an example.
Audience
While this document welcomes all readers, the key audience will be:
- software engineers
- learners
- the cloud-curious
Prerequisites
This document contains all of the information you need to create your first function on the Google Cloud Platform (GCP), but readers may benefit from some experience of:
- Cloud platforms
- Python programming
- HTML documents and HTTP
You will need a Google Cloud account to create and deploy and Function.
Introduction
The Google Cloud Platform (GCP) is a suite of cloud computing servicing that runs on the same infrastructure that Google uses for its end-user products such as Search, Gmail, Google Drive, and YouTube.
Like most cloud providers, GCP offers a range of services, and like most providers, a popular choice for light tasks is serverless functions. The term 'serverless functions' denotes compute products that do not require engineers to provision or manage servers.
Google Cloud Functiuons is a serverless platform that allows you to run single-purpose pieces of code that can be invoked by:
- HTTP requests
- Cloud Pub/Sub messages
- Cloud Storage events
This document will focus on HTTP requests, by far the most widely used trigger type.
Step-by-step
- Sign into the Google Cloud Platform - console.cloud.google.com. Create a new account if you do not already have one. Click "Go to console"
2. On the next page, click "Create or Select a Project
3. Click "New Project". If you already have a project you want to use, search for it and select it.
4. If you are creating a project, give it a name. I used 'Demo-project;
5. You will be returned to the Dashboard. Ensure your project is selected in the drop-down box at the top of the page.
6. Welcome to the Google Cloud Dashboard. Look for a pane titled: "Getting started" and click "Create a Cloud Function"
7. Welcome to Cloud Functions! Click "Create Function"
8. You may see a pop-up asking you to enable various APIs. Click each toggle to enable them. It may take a few moments for this to complete. Now Click "Create Function".
9. Here we will configure our Function. Ours is a simple function so select the following options:
- Environment - 2nd Gen
- function name demo_function
- region - choose a region
10. The trigger section describes how clients will access our web page. Our trigger is HTTPS - i.e., a client hitting a web page. Real-world use-cases may require authentication, but for this example, we will select "Allow Unauthenticated invocations". This means anyone on the internet can access our page.
Click "Next".
11. Source code! This is where the magic happens. Our source code will be simple, it will return an HTML page that displays a greeting.
12. First things first, let's change the programming language to Python. The default is Node.js, a popular framework. Select the latest Python language from the "Runtime" drop-down.
13. This is important. Change the entry point text box to "serve_page".
14. Paste the code at the end of this tutorial in the box on the right hand side. Ensure main.py is highlighted.
15. Our code has a function called "serve_page" that matches our entry point. The function and entry point can be called anything but they must match.
import os
def serve_page(request):
# Get the query from the request body
name = request.args.get('name')
response = """<!DOCTYPE html>
<html>
<head>
<title>Demo page</title>
</head>
<style>
body {
background-color: #ffffff;
font-family: Arial, sans-serif;
}
h1 {
color: #4285f4;
font-size: 24px;
}
p {
margin: 10px 0;
}
.container {
width: 500px;
margin: 0 auto;
}
</style>
<body>
<h1>GCP Demo Page</h1>
<p>Welcome to Google Cloud {{ name }}:</p>
</body>
</html>"""
response = response.replace("{{ name }}", str(name))
return response 16. Once you have pasted the code, click deploy!
17. Deployment may take a few moments. Click the Logs tab to check if there are any errors. There should not be.
18. Once the Function has deployed, we can test out web page. Click on the URL in the logs tab, it should open the page in a new browser tab.
19. You will see a blank page with a message reading: "Welcome to Google Cloud none".
20. Unless your name is "none", you might want to personalise this message. Our code takes any URL query string arguments and inserts them into the page for us. Edit the URL in the browser and add "?name=Chucky" (where Chucky is your name) to the end of it.
21. et voila! You have created your first web page with Google Cloud Functions.
NOTE: Make sure to delete both the function and the project you created to avoid any unwanted bills.
262 views