*作者：寒斜｜阿里云云原生中间件前端负责人*

> **导读：** 本篇实战将介绍如何以超低成本构建动态的 Web 站点，并且实现灵活扩展，限流等效果，最后再跟大家聊一聊“现代应用”的相关概念。

相信很多同学都有过想要拥有自己的 Web 站点的想法，但是如果想要搭建动态的站点，需要采购云主机，买带宽并且自己搭建环境，部署运维，整体下来成本会非常高。若如果只是搞静态的站点的话，方式很多也很便宜，但是整体功能性就会比较弱，且收益效果也会差很多。

下面我们就使用 [Serverless Devs](https://github.com/Serverless-Devs) 为大家实操演示一下如何构建 Serverless 架构的现代化 Web 动态站点。

## 构建现代化 Web 动态站点

### 1、架构一览

首先为大家介绍一下本次 Web 应用的架构图：

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c688de3d74994ff6af6668bfd777df89~tplv-k3u1fbpfcp-zoom-1.image)

我们采用阿里云网关作为主流量入口，然后将动态请求转发给 阿里云函数计算，静态文件则交给 阿里云对象存储OSS 来处理。并在网关上做一系列的安全处理措施，如限流等。

### 2、准备工作

如上图所示我们需要开通几款阿里云的产品 ：

-   [云解析DNS](https://wanwang.aliyun.com/domain/dns)
-   [API 网关](https://www.aliyun.com/product/apigateway)
-   [函数计算](https://www.aliyun.com/product/fc)
-   [对象存储OSS](https://www.aliyun.com/product/oss)

然后准备一个自己喜欢的域名，可以去[万网](https://wanwang.aliyun.com/)申请一个，最便宜的只有几块钱，笔者申请的

serverless-developer.com 顶级域名仅 48 块/年，本次部署将选择香港 region, 域名需要实名认证，建议提前进行备案。

*（另外说一下 DNS 的域名解析是要花钱的，个人版的话第一个域名大约 40.8块/年，此外每增加一个需额外另加20块钱左右。）*

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dfdbcf601f34413584524380d497c92f~tplv-k3u1fbpfcp-zoom-1.image)

安装好 [Serverless devs](https://www.serverless-devs.com/zh-cn) 开发者工具: npm install -g @serverless-devs/s

### 3、操作步骤

#### 1）秘钥配置

对于新手而言，使用 Serverless Devs 的第一步就是将相关云厂商的秘钥信息配置好，这样才能够进行相关的构建部署操作。只需要打开电脑的终端，然后输入 **s config add ，** 即可进入引导式操作 。

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/35c7c9bbe72147a0929c825777e37d73~tplv-k3u1fbpfcp-zoom-1.image)

（打开[链接查看](http://www.serverless-devs.com/zh-cn/docs/provider-config/alibabacloud.html)更详细的阿里云秘钥教程 ）

#### 2）应用初始化

秘钥配置好，为了更便捷地检索相关应用模板，我们可以登录 [serverless devs 应用中心](https://serverlesshub.resume.net.cn/), 搜索 "**modern-web-application**"，然后根据下图所示操作即可。

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b09c41344a3747d4968471f99898cd71~tplv-k3u1fbpfcp-zoom-1.image)

1.点击复制指令

2.打开命令行终端进行粘贴

3.根据引导提示输入提前准备好的**域名(** 如 demo.serverless-developer.com **)** 以及**oss bucket 名称(** hanxie-serverless-web **)** 建议 oss bucket 提前在控制台创建

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1d3e477785ee47c59d79e4e1a10c23dd~tplv-k3u1fbpfcp-zoom-1.image)

#### 3）构建部署

初始化之后可以选择对项目进行配置修改，比如更改网关的分组名：

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3300e6e74f384fb2adf85e5dcefa0500~tplv-k3u1fbpfcp-zoom-1.image)

函数计算的服务名或者函数名：

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0790df0911f04462a62352470d18faec~tplv-k3u1fbpfcp-zoom-1.image)

改好之后直接输入 **s deploy** 即可,此处大约会有一个1分钟不到的部署构建时间

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a9fbf79d6dbe4f43bc55fad2be465709~tplv-k3u1fbpfcp-zoom-1.image)

最终返回结果如下：

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/493cec5efe04432a9388e16310015af7~tplv-k3u1fbpfcp-zoom-1.image)

#### 4）访问查看

当我们部署好之后，我们可以查看一下网关，OSS, 函数计算，以及 DNS 是否已经部署完成我们所需要的内容。

-   **网关部分**

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8e6d3a910d664d25acaccea91397c5e2~tplv-k3u1fbpfcp-zoom-1.image)

-   **函数计算部分**

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a20f5fe9424847fa8adac9e34f112253~tplv-k3u1fbpfcp-zoom-1.image)

-   **OSS 部分**

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dfcde53356ad4e4ab11ff4ec972a002e~tplv-k3u1fbpfcp-zoom-1.image)

-   **DNS 解析部分**

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bc361956908643ce86b4146b40ee6a32~tplv-k3u1fbpfcp-zoom-1.image)

此时我们可以尝试访问一下 **demo.serverless-developer.com ，** 发现访问不通：

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4104d7ff009b43968f2aab7878c51936~tplv-k3u1fbpfcp-zoom-1.image)

原因有一下两种可能性：

\

1. **gateway 的域名没有绑定成功**，此时我们可以查看

-   apigateway 分组管理
-   myserverlessdemo 查看域名绑定，发现这部分其实是 ok 的；

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a386da5e7cb4498b9d97bcd2972fd270~tplv-k3u1fbpfcp-zoom-1.image)

2. 那么有可能就是 **OSS 的域名未绑定成功**，我们可以通过 OSS 控制台查看

-   对象存储
-   Bucket列表
-   传输管理，发现上述域名未进行绑定；

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e27a68ecd69b4d02b7a73a49b6ad738a~tplv-k3u1fbpfcp-zoom-1.image)

这里我们点击域名绑定，将上述域名输入绑定，完成后再次访问域名，可以看到：

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d4043f8f8bc247328060bb9d5ef066cd~tplv-k3u1fbpfcp-zoom-1.image)

serverless devs 应用中心的部署效果

#### 5）站点安全

我们部署的站点还不是 https 的，所以需要把它变成 https 的站点以增加其安全性。

我们可以在阿里云 SSL 上申请免费的证书，然后绑定到域名上,具体操作如下：

1.  访问阿里云官网
1.  搜索ssl证书 ，[进入购买](https://common-buy.aliyun.com/?spm=5176.7968328.J_8413632810.2.5e9765c3tYD5XU&commodityCode=cas_dv_public_cn&request=%7B%22ord_time%22:%221:Year%22,%22order_num%22:1,%22product%22:%22cert_product%22,%22domain%22:%22all%22,%22productCode%22:%22symantec-dv-1-starter%22,%22service_num%22:1%7D)
1.  然后选择免费的域名

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e6aafbfb1440491985ea9b75fe29088a~tplv-k3u1fbpfcp-zoom-1.image)

之后进入 [SSL控制台](https://yundunnext.console.aliyun.com/?p=casnext#/certExtend/free) 选择 “SSL证书-免费证书”，点击创建证书。

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/39165dca98264be4bd1c3dfbaf608c5f~tplv-k3u1fbpfcp-zoom-1.image)

此时会生成一列待申请证书的数据：

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/007a74cc5f444d828f5ed7b41cae315b~tplv-k3u1fbpfcp-zoom-1.image)

点击右侧的“证书申请”将你的信息和域名填写上去，然后进行验证，通过后“提交审核”：

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1050236499ff407ea332bef5969aea1d~tplv-k3u1fbpfcp-zoom-1.image)

接下来回到 apigateway 控制台，域名绑定部分选择“证书”，可以看到已经创建好的域名：

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/85ca1148d2994b1faa43be9fa0f9be00~tplv-k3u1fbpfcp-zoom-1.image)

同步后稍等片刻，访问 [https://demo.serverless-developer.com](https://demo.serverless-developer.com) 即可看到效果：

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6bf8ed0d1c8c4348ab1f7e8ff2a92ce9~tplv-k3u1fbpfcp-zoom-1.image)

至此你已经拥有了一个加密的 Web 站点。

加密之后还需要考虑一个问题，比如这次我把站点做成 demo，可能会面临很多人的访问，甚至被攻击；那么我应该如何进行限制流量过多产生的高昂费用呢？有了网关之后，限流的问题就变得简单了。

我们登入到[网关的控制台](https://apigateway.console.aliyun.com/)：

1.  选择插件管理；
1.  点击经典网络实例插件-流量控制；
1.  并创建策略；

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dd2555695cf448608a04c2086071d741~tplv-k3u1fbpfcp-zoom-1.image)

然后设置 1 分钟最多可访问 5 次：

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/42d06ba19cbf404492a60bf179bcffc5~tplv-k3u1fbpfcp-zoom-1.image)

创建好策略之后就是绑定 api，具体操作如下图所示：

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/65726e82908c45d59d2f5e2826d97b0a~tplv-k3u1fbpfcp-zoom-1.image)

设定好策略后、绑定好访问首页的 api 后，我们进行一下测试。访问域名，然后刷新 5 次，第 6 次的时候会发现网站无法访问：

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/700dc5a16034412897f0a57377332a19~tplv-k3u1fbpfcp-zoom-1.image)

至此说明你的网站已经成功限流了。

关于更多 Serverless 安全的问题比如 auther 认证、vpc 访问、多环境部署等问题，可以在后面跟大家再一起探讨，限于篇幅问题便不在本文中展开讲解了，大家如果感兴趣可以在评论区留言。

#### 6）站点可观测

站点上线后不可避免的会需要一些可观测的能力，比如 pv, uv，api 异常等等。相关的产品有很多，比如百度的统计，Google 的统计等。这里可以给大家推荐使用 [ARMS的前端监控](https://www.aliyun.com/product/arms?spm=serverlessdevs), 除了通用的指标监控，你还可以通过它自定义上报一些关键信息，如统计分享按钮点击数，上传 sourceMap 定位问题等。

## Serverless 应用架构拆解

### 1、整体目录结构说明

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6486daa1da4b4896b970f962352bc4b0~tplv-k3u1fbpfcp-zoom-1.image)

这个 Serverless 架构的工程主要包含 3 个部分：

-   s.yaml 配置文件
-   js runtime 的 api 服务
-   前端标准 react 项目工程

你可以自由选择后端 api 服务的架构，以及前端开发框架，完全不会影响整体效果。值得一提的是，这里使用的 api 框架是 Serverless Devs 提供的 Serverless first 的开发框架，针对冷启动做了一些优化，你可以采用熟悉框架的开发语法糖，比如这里是采用 koa 式的语法糖，你也可以选择 express 的，具体细节可以访问[官方库](https://github.com/devsapp/dk-example)去查看，非常适合中小型 Web 项目开发。

### 2、网关说明

其实这个 Web 应用架构核心的部分是在网关，通过网关实现了动静态分流。域名及证书绑定，也是通过网关做各种限流和安全验证。为了更好的使用网关我们开发了[apigateway的组件](https://github.com/devsapp/apigateway)，它是基于官方的 sdk 量身定制的 api 发布服务。它是完全开源开放的，你可以根据需要自己去定制更多的网关路由部署流程，比如加入多环境的设置等，这里我对配置做了一些简化，让开发者关注于路由和目标服务，相比自己一个一个去配置 api 要节省很多时间。

不过目前看依然比较复杂，关于这部分计划会通过 Serverless Desktop 可视化配置解决，大家也可以给我们 Devs官方提更多的 issue，一起把网关组件完善起来。

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2514bd563b154f1c868519210a466180~tplv-k3u1fbpfcp-zoom-1.image)

### 3、关于资费的真实说明

其实一开始我们就提到了这种 Serverless 架构的 Web 站点费用其实很低，如果排除使用数据库的情况下，你只需要申请一个域名，可能几块钱就行，后面会完全按流量计费。对个人或者新创企业的站点而言，无疑是个巨大的利好，这里可以给大家分享一下我的个人账单。

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/23e7f2e808164ee8b6cd401839ddbeda~tplv-k3u1fbpfcp-zoom-1.image)

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4bb63809e224486ba8eab278b1a56540~tplv-k3u1fbpfcp-zoom-1.image)

可以看到费用确实低廉，当然这是在你应用比较小的情况下，不代表企业级生产的情况。如果你的项目一旦爆发，流量、资费上来之后，你就更能真实感受到 Serverless 架构的优势了。

### 4、关于数据库

本篇文章的应用模板仅是做服务转发，所以还没有涉及数据库，想必大家也会非常关心数据库的使用，所以在接下来的系列篇章中我会重点先从 [tablestore 表格存储](https://www.aliyun.com/product/ots) 这个 Serverless 的 Nosql 介绍开始，后面也会跟大家逐步介绍 Mysql，mongodb 的使用情况。

虽然使用数据库在 Serverless 架构中依然存在诸多问题，比如数据库连接会增加冷启动时间、数据库前成本依旧高昂，不过大家不必担心，相信随着 Serverless 架构的广泛落地，这些问题一定会迎刃而解的。

## 什么是"现代化应用"

文章标题提到了"现代化应用"的概念，在这里也跟大家解释一下，什么是 "Modern Application"。其实现代化应用这个概念已经被越来越被广泛的认可了。不管是阿里云，华为云，AWS 都在推广现代化应用的理念。这里引用一段 AWS 对 Modern Application 的概念解释：

> 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 that allow teams to offload undifferentiated heavy lifting in order to spend more time on delivering value for their customers. A modern application also takes advantage of operational and security tooling to increase the reliability and consistency of deployments, while making it safe to deploy many times a day. The use of automation of infrastructure, security, and deployments allows the teams that own modern applications to move more quickly than if they were relying on manual processes or more significant operational management.

简单概述就是，现代化应用是现代技术、体系结构、软件交付实践和操作流程的组合，可以引导团队更快、更频繁、更一致、更安全地交付价值，像 Serverless 以及事件驱动的架构这些都输于现代化应用的范畴。

本篇文章也客观展示了这种架构的价值所在，包括超低成本，安全，可扩展等，不过依然是那句话软件工程没有银弹，Modern Application 也依然存在很多问题需要去解决, 需要大家一起去实践验证。总之我相信唯有经过实践检验才能真正得到我们想要的答案。

## 相关链接

1）Serverless Devs：
<https://github.com/Serverless-Devs>

2）云解析 DNS：
<https://wanwang.aliyun.com/domain/dns>

3）API 网关：
<https://www.aliyun.com/product/apigateway>

4）函数计算：

<https://www.aliyun.com/product/fc>

5）对象存储 OSS：
<https://www.aliyun.com/product/oss>

6）万网: 
<https://wanwang.aliyun.com/>

7）密钥获取文档：
<http://www.serverless-devs.com/zh-cn/docs/provider-config/alibabacloud.html>

8）Serverless Hub：
<https://serverlesshub.resume.net.cn/#/hubs/special-view>

9）选购 SSL 证书：
<https://www.aliyun.com/product/cas>

10）应用实时监控服务 ARMS：
<https://www.aliyun.com/product/arms?spm>

11）官方库：
<https://github.com/devsapp/dk-example>

12）apigateway 组件：
<https://github.com/devsapp/apigateway>

13）Tablestore 表格存储：
[https://www.aliyun.com/product/ots](https://www.aliyun.com/product/ots)

***作者介绍：***

*王庆（寒斜）｜阿里云云原生中间件前端负责人*

*2016 年加入阿里中间件从事云产品企业控制台研发工作，负责中间件 20 多款云产品前端研发工作，主要技术栈为大前端通用技术，目前专注在 Serverless 开发者工具链的建设，是云原生 Serverless Devs 研发负责人之一。*

戳[**此处**](https://github.com/Serverless-Devs)，立即跳转 Serverless Devs~

ITPub博客

人人都是 Serverless 架构师 | 现代化 Web 应用开发实战

最新文章