In this tutorial, we'll show you how to create a serverless website with Alibaba Cloud's Function Compute.
Alibaba Cloud's Function Compute is a fully-managed, event-driven compute service for serverless applications. With Function Compute, developers can focus on writing and uploading code without having to worry about building an underlying infrastructure or maintaining complicated server architectures.
Alibaba Cloud's Function Compute event-driven service has near limitless applications, including API gateways, data lake analysis, log stores and backups, web crawlers and image recognition, to name a few. With Function Compute, developing is convenient and reliable. Function Compute supports many different programming languages including Java, Python, PHP, and NodeJS.
Alibaba Cloud's Function Compute provides real-time auto scaling and dynamic load balancing inside millisecond timeframes for managing traffic bursts. The compute resources available make code flexible and reliable. Furthermore, Function Compute offers a Pay-As-You-Go option which means you are charged for consumed resources only. No fee is incurred if the code doesn't run. Moreover, the run duration is measured in milliseconds.
A few common business scenarios for Alibaba Cloud's Function Compute include analysis and management of media assets, for example integrating a range of services that run an elastic and highly available backend video system. Another common scenario is building a serverless backend that triggers Function Compute code to render dynamic webpages. Furthermore, these web applications can hook up to APIs when Function Compute is integrated with Alibaba Cloud's API Gateway. Another interesting business scenario is using Function Compute to manage real time IoT message processing and monitoring of data streams.
Serverless is a new paradigm in cloud computing. Serverless applications running on Alibaba Cloud's Function Compute provide custom code that runs in managed containers so there is no need to maintain costly, always-on, traditional servers. This reduces operational costs and complexity.
The Serverless Framework is an open-source project from MIT supporting the serverless development paradigm. The Serverless Framework allows cloud developers to build BaaS (Backend as a Service) applications comprised of microservices running in response to events. These applications auto-scale and are billed only when they run, which lowers the maintenance costs and enables developers to build applications faster.
The Serverless Framework for well-known cloud services plugs into event-driven cloud compute services such as Alibaba Cloud's Function Compute. It is a command-line tool, providing scaffolding, workflow automation, and best practices for developing and deploying serverless architectures. It also has a plugin architecture for extensibility.
Alibaba Cloud's Serverless Framework API is called Fun. Fun allows you to do everything you can do in the Alibaba Cloud Function Compute UI console but from the command line instead. You can learn more about Fun at https://www.alibabacloud.com/help/doc-detail/64204.htm
In this tutorial, we will look at building a simple website application with Alibaba Cloud's Function Compute in the UI console.
You will need an Alibaba Cloud account. If you don't already have one, head over to the Free Trial page to get $300-1,200 worth of Alibaba Cloud products to play around with in the Alibaba Cloud Free Trial.
Let's go ahead and set up Function Compute and build a serverless website.
Go to the console page and click through to Function Compute.
Click the add button beside Services.
In the Service slide out, give your service a name, an optional description, and then slide open the Advanced Settings.
In Advanced Settings you can grant access for Functions to the Internet, to VPC resources, and you can attach storage and a log service to a Function. You can also configure roles.
For our tutorial, we will need Internet access so make sure this configuration is on.
We will leave VPC and Log Configs as they are.
In the Role Config section, select Create New Role, and in the dropdown list pick AliyunOSSReadOnlyAccess as we will be accessing our static webpages from an Object Storage Service bucket.
Click Authorize.
You will see a summary of the Role you created.
Click Confirm Authorization Policy.
You have successfully added the Role to the Service.
Click OK.
You will see the details of the Function Compute Service you just created.
Now let's create a Function in the Service. Click the add button next to Functions.
You will see the Create Function process. The first part of the process is Function Template.
There are many Function Templates available, including an empty Function for writing your own bespoke Functions.
Alibaba Cloud-supplied Template Functions are very useful as they have relevant method invocation and demo code for getting started quickly with Function Compute.
For the tutorial's purposes, let's choose the flask-web Function written in Python2.7.
Click Select.
We are now at the Configure Triggers section of creating a Function.
Select HTTP Trigger from the dropdown list. Give the Trigger a name and choose Authorization details (anonymous does not require authorization).
Choose your HTTP methods and click Next. We are going to build a simple web-form application so we will need both the GET and POST HTTP methods.
Now we arrive at the Configure Function Settings.
Give the Function a name then scroll down to Code details.
We'll leave the supplied code for now. Scroll down to below the code sample.
You will see Environment Variable input options and Runtime Environment details.
Click Next.
Click Next at Configure Function Permissions.
Verify the Configuration details and click Create.
You will arrive at the Function's IDE. Here you can enter new code, edit the code directly, upload code folders, run, test, and fix your code.
Scroll down.
Underneath the code edit section is where you can Invoke your code and check the responses. Here you can fix any errors before integrating with other Alibaba Cloud services.
Copy the URL as we will need to add this to our static webpages so they can connect to our Function Compute Service and Function.
Now let's create some static files in an OSS bucket so we can test the Function properly.
Click through to Object Storage Service on the Products page.
If you haven't yet activated Object Storage Service, go ahead and activate it. In the OSS console, click Create Bucket.
Choose a name for the OSS Bucket and pick the region – you cannot change the region later. Select the Storage Class – you also cannot change this later.
We have selected Public Read for the Access Control List.
When you're ready, click OK.
You will see the Overview page for your bucket. Make a note of the public Internet URL.
In the Files tab, upload your static web files.
We have uploaded a simple index.html homepage and a background picture.
In index.html, we added a JavaScript which connects to the flask-app Function Compute Function we created earlier. In the <> section, paste the Function's URL from Function Compute.
<script type="text/javascript">
const functionURL = '<<Function URL>>';
const doHome = new XMLHttpRequest();
doHome.open('GET', functionURL, true);
doHome.onload = function () {
document.getElementById('home_message').innerHTML = doHome.responseText;
};
doHome.send();
</script>
In Basic Settings, click Configure to configure your Static Pages.
Add the homepage details and click Save.
Now go to a new browser window and access the OSS URL you saved earlier.
Back in the Function Compute console, you can now test the flask-app paths directly from the code.
We already tested index.html with no Path variable. Next, we test the app route signin with GET and check the Headers and status code.
The signin page code is working correctly. You can also check the Body to make sure the correct HTML will render on the page. Notice that because I entered the path variable, signin is appended to the URL.
Of course, any errors you encounter will show up in the Logs section for easy debugging.
Now, let's test this page on the Internet.
Make sure you include the exact Function Compute URL path in the signin.html page you upload to the OSS bucket. For example,
Now, when you go the browser and access the bucket URL with the correct path, you will see the signin page.
If you get an error here, implement a soft link for the page in OSS. Go to the OSS bucket and click More dropdown for the HTML file in question and choose Set soft link.
Give the link a name and click OK.
A link file will appear in the list of static files and you will now be able to access the page online with the relevant soft link and it will render as above.
Back in Function Compute, we can test the POST method in the console with the correct username and password details in the same way.
Add the POST variables to the form upload section in the Body tab.
Now you can test this function online.
To summarize, first we introduced Alibaba Cloud's Function Compute service and the concept of serverless computing. Function Compute is Alibaba Cloud's serverless product that allows developers to focus on coding their applications whilst eliminating the need for costly infrastructure.
We then showed you how to create a Function Compute Service and Function and we picked the Python 2.7 Flask App demo supplied in the Function Template section. We showed you how to set up your Function and test it in the Function Compute console.
We then showed you how to build a static webpage in Alibaba Cloud's OSS which connects to your Function Compute Function and renders dynamic content.
We hope you enjoy playing around with Alibaba Cloud's Function Compute serverless backend applications and look forward to presenting more tutorials on this product in the future.
2,605 posts | 747 followers
FollowAlibaba Clouder - June 2, 2020
Alibaba Clouder - February 10, 2020
Alibaba Clouder - November 21, 2018
Alibaba Clouder - September 24, 2020
Alibaba Clouder - September 6, 2019
Alibaba Cloud Serverless - June 28, 2022
2,605 posts | 747 followers
Follow
Function Compute
Alibaba Cloud Function Compute is a fully-managed event-driven compute service. It allows you to focus on writing and uploading code without the need to manage infrastructure such as servers.
Learn More
Domains
Over 20 million domain, free WHOIS privacy protection.
Learn More
OSS(Object Storage Service)
An encrypted and secure cloud storage service which stores, processes and accesses massive amounts of data from anywhere in the world
Learn MoreMore Posts by Alibaba Clouder