相信很多同学都有过想要拥有自己的web站点的想法，但是发现如果想要搭建动态的站点的话貌似也只能采购云主机，买带宽然后自己搭建环境自己部署运维，整体成本下来会非常高。如果只是搞静态的站点的话方式倒很多也很便宜，但是整体功能性就比较弱收益效果也会差很多。今天我们就使用ServerlessDevs 为大家实操一把如何构建Serverless架构的现代化web动态站点。
架构一览
首先为大家说明一下本次web应用的架构图
我们采用阿里云网关作为主流量入口，然后将动态请求转发给 阿里云函数计算Faas服务，静态文件则交给 阿里云对象存储OSS 来处理。然后在网关上做一系列的安全处理措施，比如限流等。
准备工作
如上图所示我们需要开通阿里云的几款产品
然后准备一个自己喜欢的域名，可以去万网申请一个，最便宜的只有几块钱，像笔者申请的
serverless-developer.com*域名也就48块钱1年，本次部署选择香港region,域名需要实名认证，建议进行备案。
另外说一下DNS的域名解析是要花钱的个人版的话第一个域名1年大概是40.8块，然后每增加一个是加20块钱左右
安装好Serverless devs开发者工具
npm install -g @serverless-devs/s操作步骤
秘钥配置
对于新手而言，使用serverless devs 的第一步就是将相关云厂商的秘钥信息配置好，才能够进行相关的构建部署操作。只需要打开电脑的终端，然后输入 s config add
即可进入引导式操作
点击查看更详细的阿里云秘钥教程
应用初始化
秘钥配置好只好，为了更好的检索相关的应用模板，我们可以登录serverless devs 应用中心, 搜索 "modern-web-application"，然后根据下图所示操作即可
- 1.点击复制指令
- 2.打开命令行终端进行粘贴
- 3.根据引导提示输入提前准备好的域名(如 demo.serverless-developer.com)以及oss bucket 名称(hanxie-serverless-web) 建议oss bucket 提前在控制台创建
构建部署
初始化好之后可以选择对项目进行配置修改，比如更改网关的分组名
以及函数计算的服务名或者函数名
改好之后直接输入 s deploy 即可,此处大约会有一个1分钟不到的部署构建时间
最终返回结果如下
访问查看
当我们部署好之后，我们可以查看一下网关，OSS, 函数计算，以及DNS是否已经部署好我们需要的内容
网关部分
函数计算部分
oss部分
dns 解析部分
此时我们可以尝试访问一下 demo.serverless-developer.com 发现访问不通
这是因为可能存在两种可能
- 1. gateway 的域名没有绑定成功，我们可以查看 apigateway 分组管理-> myserverlessdemo 查看域名绑定，发现这部分是ok的
- 2. oss 的域名未绑定成功，可以通过 oss控制台查看 对象存储-> Bucket列表->->传输管理。 发现上述域名未进行绑定
这里我们点击域名绑定，将上述域名输入绑定即可，绑定好后再次访问域名，可以看到
serverless devs 的应用中心已经部署效果
站点安全
我们部署的站点还不是https的，给人感觉很不安全。所以需要把它给变成https的站点
我们可以在阿里云ssl上申请免费的证书，然后绑定到域名上就可以,具体操作如下
访问阿里云官网->搜索ssl证书 ，进入购买 ，然后选择免费的域名
之后进入SSL控制台SSL证书->免费证书，点击创建证书
会生成一列待申请证书的数据
点击右侧的“证书申请”将你的信息和域名填写上去即可，然后进行验证，通过后“提交审核”
接下来回到apigateway控制台，域名绑定部分选择证书，可以看到已经创建好的域名
同步后稍等片刻，访问 https://demo.serverless-developer.com 即可以看到效果
至此你已经拥有了一个加密的web站点。
加密之后还需要考虑一个问题，比如这次我把站点做成demo，可能会面临很多人的访问，甚至被攻击，我如何进行限制防止流量过多产生高昂的费用，有了网关后限流的问题就变得简单了。
我们登入到网关的控制台，插件管理-> 经典网络实例插件-流量控制->创建策略
然后我们设置1分钟最多访问5次
创建好策略之后就是绑定api，具体操作如下动图
设定好策略，然后绑定好访问首页的api 后，我们测试一下，访问域名然后刷新5次，第6次的时候会发现网站无法访问
至此说明你的网站已经成功限流了。
关于更多的做serverless安全的问题比如auther认证，vpc访问，多环境部署等问题可以在后面跟大家再一起探讨，限于篇幅问题就不在这里展开。
站点可观测
站点上线后不可避免的会需要一些可观测的能力，比如pv,uv，api异常等等，相关的产品有很多，比如百度的统计，google的统计等。这里可以给大家推荐使用 ARMS的前端监控,除了通用的指标监控，你还可以通过他自定义上报一些关键信息，比如统计分享按钮点击数，上传sourceMap定位问题等。
Serverless应用架构拆解
整体目录结构说明
参见上图所说试，这个serverless架构的工程主要包含3个部分
- s.yaml配置文件
- js runtime 的api服务
- 前端标准react项目工程
你可以*选择 后端api服务的架构，以及前端开发框架，完全不影响整体效果，
值得一提的是，这里使用的api框架是我们自研的serverless first的开发框架，针对领启动做了一些优化，并且你可以采用 熟悉的开发语法糖，比如这里是采用koa式的语法糖，你也可以选择express的，具体细节可以访问官方库去查看，非常适合中小型web项目开发
网关说明
其实这个web应用架构核心的部分是在网关，通过网关实现了动静态分流，域名及证书绑定，也是通过网关做各种限流和安全验证。为了更好的使用网关我们开发了apigateway的组件，实际上是基于官方的sdk量身定制的api发布服务。它是完全开源开放的，你可以根据需要自己去定制更多的网关路由部署流程，比如加入多环境的设置等，这里我对配置做了一些简化，让开发者关注于路由和目标服务，相比自己一个一个去配置api要节省很多时间。不过目前看依然比较复杂，关于这部分计划会通过ServerlessDesktop 可视化配置解决，大家也可以给我们devs官方提更多的issue一起把网关组件完善起来。
关于资费的真实说明
其实一开始我们就提到了这种serverless架构的web站点费用真的很低，如果排除使用数据库的情况下，你只需要申请一个域名可能几块钱就行，后面完全按流量计费。对个人或者新创企业的站点而言无疑是个巨大的利好，可以给大家分享一下我的个人账单
可以看到确实非常微不足道的费用，当然这是你应用比较小的情况，不代表企业级生产的情况。当然一旦你的项目真正流量爆发，资费上来之后你也就更能感受到Serverless架构的便利和美好了。
关于数据库
本篇文章的应用模板仅是做服务转发，所以还没有涉及数据库，想必大家也会非常关心数据库的使用，接下来的篇章中我会重点先从 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 也依然存在很多问题需要去解决, 需要大家一起去实践验证。
总之我相信唯有经过实践检验才能真正得到我们想要的答案。