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

本文涉及的产品
任务调度 XXL-JOB 版免费试用,400 元额度,开发版规格
应用实时监控服务-可观测链路OpenTelemetry版,每月50GB免费额度
注册配置 MSE Nacos/ZooKeeper,182元/月
简介: 本篇实战将介绍如何以超低成本构建动态的 Web 站点,并且实现灵活扩展,限流等效果,最后再跟大家聊一聊“现代应用”的相关概念。

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


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


构建现代化 Web 动态站点


1、架构一览


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



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


2、准备工作


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



然后准备一个自己喜欢的域名,可以去万网申请一个,最便宜的只有几块钱,笔者申请的

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


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




安装好 Serverless devs 开发者工具:

  • npm install -g @serverless-devs/s


3、操作步骤


1)秘钥配置


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


(打开链接查看更详细的阿里云秘钥教程 )


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 ,发现访问不通:



原因有一下两种可能性:


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


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



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


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



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


serverless devs 应用中心的部署效果

5)站点安全


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

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


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



之后进入 SSL控制台 选择 “SSL证书-免费证书”,点击创建证书。



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



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



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



同步后稍等片刻,访问 https://demo.serverless-developer.com 即可看到效果:



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


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


我们登入到网关的控制台


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



然后设置 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 公众号订阅该系列 查看更多内容

相关实践学习
【AI破次元壁合照】少年白马醉春风,函数计算一键部署AI绘画平台
本次实验基于阿里云函数计算产品能力开发AI绘画平台,可让您实现“破次元壁”与角色合照,为角色换背景效果,用AI绘图技术绘出属于自己的少年江湖。
从 0 入门函数计算
在函数计算的架构中,开发者只需要编写业务代码,并监控业务运行情况就可以了。这将开发者从繁重的运维工作中解放出来,将精力投入到更有意义的开发任务上。
相关文章
|
1月前
|
消息中间件 SQL 前端开发
如何开发人事及OA管理系统的考勤管理板块?(附架构图+流程图+代码参考)
考勤系统是企业HR管理的核心模块,涉及打卡、请假、加班、补卡等多项功能,支持多场景打卡方式,并与薪酬、绩效紧密关联。系统需具备数据自动统计、异常提醒、审批流程集成等功能,有效减少人工错误,提升管理效率。
|
1月前
|
存储 缓存 数据库
如何开发人事及OA管理系统的全局基础设置板块?(附架构图+流程图+代码参考)
在企业数字化转型中,人事管理系统(HRM)与办公自动化系统(OA)已成为核心工具。本文详解全局基础设置的三大核心模块:部门岗位基础表、工作日历和工作地点基础表,涵盖功能设计、业务流程、开发技巧与代码示例,助力企业优化系统架构,提升管理效率与扩展性。
|
1月前
|
存储 Java 数据库
如何开发人事及OA管理系统的会议管理板块?(附架构图+流程图+代码参考)
人事及OA系统是现代企业管理的重要工具,整合人力资源与办公流程,提升效率。其会议管理板块可优化会议室预约、冲突检测、审批流程及数据统计,助力企业高效协作。本文详解功能设计、开发技巧与实现方案。
|
1月前
|
JavaScript 安全 前端开发
如何开发人事及OA管理系统的薪酬管理板块?(附架构图+流程图+代码参考)
本文介绍了如何构建一个高效、合规的企业薪酬管理系统,涵盖薪酬模块的重要性、核心功能、系统架构设计、数据模型、开发实现及安全合规要点。内容包括薪酬配置、数据导入、自动化计算、审批发放、工资条生成与安全分发、报表看板、权限审计等关键环节,并提供详细的业务流程、架构图、核心代码示例及落地开发技巧。适用于HR、财务及技术人员快速搭建薪酬管理系统,提升发薪效率,降低人工错误与合规风险。
|
1月前
|
前端开发 BI API
如何开发人事及OA管理系统的入转调离板块?(附架构图+流程图+代码参考)
企业人事及OA系统核心模块“入转调离”(入职、转正、调动、离职)涵盖员工全生命周期管理,涉及审批流、合同管理、岗位变更、社保薪资联动等关键流程。通过系统化设计,实现数据统一、流程可审计、信息可追溯,提升HR效率并增强企业合规性。本文详解模块架构、设计原则、五大子模块实现方案及常见集成点,助力企业搭建高效、可靠的人事管理系统。
|
23天前
|
数据采集 缓存 前端开发
如何开发门店业绩上报管理系统中的商品数据板块?(附架构图+流程图+代码参考)
本文深入讲解门店业绩上报系统中商品数据板块的设计与实现,涵盖商品类别、信息、档案等内容,详细阐述技术架构、业务流程、数据库设计及开发技巧,并提供完整代码示例,助力企业构建稳定、可扩展的商品数据系统。
|
26天前
|
JSON 前端开发 JavaScript
如何开发一套EHS健康安全环境管理系统中的健康管理板块?(附架构图+流程图+代码参考)
本文深入探讨了企业EHS(环境、健康与安全)系统中的核心模块——健康管理。文章指出,企业健康管理不仅是合规要求,更是提升生产效率、降低事故率和用工成本的关键。通过构建系统化、数据化的健康管理模块,企业可以实现体检、档案、劳保用品管理、异常预警和统计看板的闭环管理。特别适用于中大型企业,文章提供了从系统架构设计、数据库建模、后端与前端实现到部署运维的完整解决方案,并附有可落地的代码示例和技术选型建议。此外,还涵盖了开发技巧、权限控制、数据隐私、接口设计等工程化实践,以及系统扩展和第三方集成的思路,为企业打造高效、合规、可持续优化的EHS健康管理体系提供了全面指导。
|
28天前
|
存储 消息中间件 数据库
如何开发人事及OA管理系统的其他SSC板块?(附架构图+流程图+代码参考)
本文介绍了人事及OA管理系统中“其他SSC板块”的开发与实现,涵盖公告发文、公司资质文件管理、名片印制申请、用印申请、开具证明申请等功能模块。内容包括各模块的功能需求、业务流程、开发技巧及代码参考,帮助企业提升行政管理效率,优化信息流通,增强信息安全。适合企业管理人员及系统开发人员阅读参考。
|
27天前
|
存储 安全 前端开发
如何开发一套EHS 健康安全环境管理系统?(附架构图+流程图+代码参考)
本文介绍如何开发一套完整的EHS(健康、安全和环境)管理系统,涵盖系统核心模块、技术架构、数据库设计、前后端开发示例及上线建议,帮助企业提升安全管理效率与合规性。

相关产品

  • 函数计算