Build a Low‑Cost Dynamic Web Site with Serverless Devs on Alibaba Cloud

Overview

This guide shows how to create a modern, low‑cost dynamic web site on Alibaba Cloud using the Serverless Devs toolkit. The architecture combines API Gateway for traffic entry, Function Compute for dynamic requests, and Object Storage Service (OSS) for static assets, with optional HTTPS and traffic‑limiting features.

Architecture Diagram

The gateway forwards dynamic requests to Function Compute and static files to OSS, while also handling security policies such as rate limiting.

Prerequisite Services

Cloud DNS

API Gateway

Function Compute (FC)

Object Storage Service (OSS)

Domain Preparation

Register a domain (e.g., serverless-developer.com) and complete real‑name verification. The example uses a Hong Kong region deployment.

Install Serverless Devs CLI

Run the following command to install the global CLI tool:

npm install -g @serverless-devs/s

Step 1: Configure Credentials

Initialize cloud provider credentials with the interactive command: s config add This stores the necessary AccessKey ID and Secret for Alibaba Cloud.

Step 2: Initialize Application

Search the Serverless Devs Application Center for the template modern-web-application , copy the generated command, and paste it into a terminal. Provide the prepared domain (e.g., demo.serverless-developer.com) and an OSS bucket name (e.g., hanxie-serverless-web).

Step 3: Deploy

After optional configuration changes (e.g., gateway group name), deploy the project with: s deploy The deployment typically finishes within a minute.

Step 4: Verify Deployment

Check the API Gateway, OSS, Function Compute, and DNS consoles to confirm resources are created. Screenshots of each console are provided in the original article.

Step 5: Enable HTTPS

Request a free SSL certificate from Alibaba Cloud SSL, bind it to the domain, and verify the HTTPS endpoint (e.g., https://demo.serverless-developer.com) works.

Step 6: Traffic Limiting

In the API Gateway console, enable the "Classic Network Instance" plugin for rate limiting. Create a policy that allows, for example, 5 requests per minute, then bind the policy to the homepage API. Test by refreshing the site more than the limit to see the request blocked.

Step 7: Observability

Use Alibaba Cloud ARMS for front‑end monitoring to collect metrics such as page views, unique visitors, and API errors. Custom events (e.g., button clicks) can be reported via source‑map uploads.

Cost Overview

Without a database, the only recurring costs are the domain registration (a few dollars per year) and traffic‑based charges. The author shares a personal bill demonstrating the minimal expense for a small‑scale deployment.

Future Work – Databases

The current template does not include a database. Upcoming articles will explore Serverless NoSQL options like Tablestore, followed by MySQL and MongoDB integrations.

Modern Application Concept

A modern application is the combination of modern technologies, architectures, software delivery practices, and operational processes that lead teams to deliver value more quickly, frequently, consistently, and safely. These applications typically take advantage of loosely coupled, distributed technologies and focus on event‑driven, serverless components.

The guide demonstrates the practical benefits of this architecture—low cost, security, scalability—while acknowledging that modern applications still face challenges that require ongoing experimentation.