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

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

下面我们就使用 Serverless Devs 为大家实操演示一下如何构建 Serverless 架构的现代化 Web 动态站点。

构建现代化 Web 动态站点

1、架构一览

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

2、准备工作

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

云解析DNS
API 网关
函数计算
对象存储OSS

然后准备一个自己喜欢的域名，可以去万网申请一个，最便宜的只有几块钱，笔者申请的 serverless-developer.com 顶级域名仅 48 块/年，本次部署将选择香港 region, 域名需要实名认证，建议提前进行备案。（另外说一下 DNS 的域名解析是要花钱的，个人版的话第一个域名大约 40.8块/年，此外每增加一个需额外另加20块钱左右。）

安装好 Serverless devs 开发者工具 npm install -g @serverless-devs/s

3、操作步骤

1）秘钥配置

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

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

2）应用初始化

秘钥配置好，为了更便捷地检索相关应用模板，我们可以登录serverless devs 应用中心, 搜索 "modern-web-application"，然后根据下图所示操作即可。 1.点击复制指令 2.打开命令行终端进行粘贴 3.根据引导提示输入提前准备好的域名(如 demo.serverless-developer.com)以及oss bucket 名称(hanxie-serverless-web*) *建议oss bucket 提前在控制台创建

3）构建部署

初始化之后可以选择对项目进行配置修改，比如更改网关的分组名：函数计算的服务名或者函数名：改好之后直接输入 *s deploy *即可,此处大约会有一个1分钟不到的部署构建时间最终返回结果如下：

4）访问查看

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

网关部分

函数计算部分

** OSS 部分**

DNS 解析部分

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

原因有一下两种可能性：

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

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

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

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

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

serverless devs 应用中心的部署效果

5）站点安全

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

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

访问阿里云官网
搜索ssl证书，进入购买
然后选择免费的域名

之后进入 SSL控制台选择 “SSL证书-免费证书”，点击创建证书。此时会生成一列待申请证书的数据：点击右侧的“证书申请”将你的信息和域名填写上去，然后进行验证，通过后“提交审核”：接下来回到 apigateway 控制台，域名绑定部分选择“证书”，可以看到已经创建好的域名：同步后稍等片刻，访问 https://demo.serverless-developer.com 即可看到效果：至此你已经拥有了一个加密的 Web 站点。

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

我们登入到网关的控制台：

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

然后设置 1 分钟最多可访问 5 次：创建好策略之后就是绑定 api，具体操作如下图所示：设定好策略后、绑定好访问首页的 api 后，我们进行一下测试。访问域名，然后刷新 5 次，第 6 次的时候会发现网站无法访问：

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

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

6）站点可观测

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

Serverless应用架构拆解

1、整体目录结构说明

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

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

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

2、网关说明

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

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

3、关于资费的真实说明

其实一开始我们就提到了这种 Serverless 架构的 Web 站点费用其实很低，如果排除使用数据库的情况下，你只需要申请一个域名，可能几块钱就行，后面会完全按流量计费。对个人或者新创企业的站点而言，无疑是个巨大的利好，这里可以给大家分享一下我的个人账单。可以看到费用确实低廉，当然这是在你应用比较小的情况下，不代表企业级生产的情况。如果你的项目一旦爆发，流量、资费上来之后，你就更能真实感受到 Serverless 架构的优势了。

4、关于数据库

本篇文章的应用模板仅是做服务转发，所以还没有涉及数据库，想必大家也会非常关心数据库的使用，所以在接下来的系列篇章中我会重点先从 tablestore 表格存储这个 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 也依然存在很多问题需要去解决, 需要大家一起去实践验证。总之我相信唯有经过实践检验才能真正得到我们想要的答案。

文中涉及链接汇总：

Serverless Devs：https://github.com/Serverless-Devs 云解析 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/ 密钥获取文档：http://www.serverless-devs.com/zh-cn/docs/provider-config/alibabacloud.html Serverless Hub：https://serverlesshub.resume.net.cn/#/hubs/special-view 选购 SSL 证书：https://www.aliyun.com/product/cas SSL 控制台： API 网关控制台：应用实时监控服务 ARMS：https://www.aliyun.com/product/arms?spm 官方库：https://github.com/devsapp/dk-example apigateway 组件：https://github.com/devsapp/apigateway 表格存储 Tablestore： https://www.aliyun.com/product/ots

更多内容关注 Serverless 微信公众号（ID：serverlessdevs），汇集 Serverless 技术最全内容，定期举办 Serverless 活动、直播，用户最佳实践。

Serverless 架构开发手册 — “人人都是 Serverless 架构师”先导篇相关推荐

BATZ，一份《Android架构开发手册》就够，已offer
前言今年的面试比往年要难得多,各个互联网企业对于Android岗位的要求越来越多,也越来越高,主要是初级岗位已经趋近饱和,但高级岗位又相对来说缺乏,这类的人才偏少,因此作为Android开发人员,我 ...
人人都是 Serverless 架构师 | “盲盒抽奖”创意营销活动实践
简介:当 Serverless 与低代码这两个不同的技术共同相交于同一个业务时会有怎样的价值展现?本文以 "盲盒抽奖" 这个 Serverless Devs 做过的创意营销活动为例 ...
【GPT开发】人人都能用ChatGPT4.0做Avatar虚拟人直播
0 前言最近朋友圈以及身边很多朋友都在研究GPT开发,做了各种各样的小工具小Demo,AI工具用起来是真的香!在他们的影响下,我也继续捣鼓GPT Demo,希望更多的开发者加入一起多多交流. 上一篇 ...
Intel® 64 位和 IA-32 架构开发手册说明三卷中文版
最好的学习资料莫过于官方文档了! 这个链接主要提供了各个卷的下载,有各个卷分开的版本,也有合在一起的版本下载. 第1卷:介绍支持IA-32和Intel®64体系结构的处理器的体系结构和编程环境. 第2 ...
懒猫试玩app是真的吗,人人都是应用体验师,懒猫最新官方下载最新最全使用教程
懒猫试玩是一款基于微信公众号的应用分发平台. 懒猫是新出的一个基于微信公众平台的应用,通过下载应用完成任务和邀请好友来赚钱.这个平台是和手机微信绑定的,现在只有苹果ios可以用! 很多朋友都会疑虑:懒 ...
【人人都是深度学习师】3行代码实现AI自动根据彩色图生成线稿图-图像分割
基础环境基础环境使用镜像:registry.cn-hangzhou.aliyuncs.com/allen135681/easyml:ubuntu18.04-nvidia_cuda10.0-base- ...
人人都是架构师：架构是一种能力，不是头衔！
架构是一种能力,它不是头衔. 换句话说,我们需要具备架构能力,但不一定要成为架构师.就像邓公,他被称为改革开放的总设计师,但他不是设计师. 既然这样,那我们还需要架构师吗?还需要架构部门吗? 我给出的 ...
GitHub上架即下架！《分布式系统人人都是架构师》全彩笔记开源
小编又来给大家分享好书了:高翔龙老师的 <超大流量分布式系统架构解决方案:人人都是架构师2.0>,我在网上没找见开源的PDF版本所以分享一下!小编会在文末附电子版免费下载方式. 高翔龙是谁 ...
企业架构（六）——TOGAF总论及架构开发方法（ADM）概述
一.TOGAF概述 TOGAF(The Open Group Architecture Framework) 可以说是当前最为流行的企业架构框架理论了,可以说是企业架构理论从政府进入到社会各研究机构的 ...

Serverless 架构开发手册 — “人人都是 Serverless 架构师”先导篇