Serverless架构下的前端开发：入门、实战与进阶

内容简介 这是一本全面讲解Serverless架构以及如何将其与前端技术融合的实战类著作，是阿里云团队在Serverless和前端领域的实战经验总结。扎实的理论，丰富的实践，将帮助前端工程师们快速掌握Serverless这一利器，实现能力跃升。 本书内容深入浅出、循序渐进，写作方式和内容规划无一不体现作者的深厚功底和良苦用心，全书包含以下核心内容： （1）介绍了Serverless架构的原理、特性和应用场景，并通过主流的商业Serverless项目和开源Serverless项目带领读者熟悉了Serverless应用的创建、开发、迁移和部署等流程； （2）从前端的视角讲解了Serverless架构的开发流程、应用开发、构建与调试、性能优化等； （3）详细讲解了SSR、WebSocket、RESTful API、GraphQL、前后端一体化、小程序、快应用、WebAssembly等前端热门技术，以及这些技术如何与Serverless架构深度融合； （4）通过5个Serverless架构下的前端生产实战案例，详尽地讲解了Serverless 架构下的前端应用开发流程和方法； （5）通过1个传统内容管理系统的 Serverless化改造案例， 详细展示了将传统框架部署到Serverless架构的流程和思路，以及将传统应用迁移到 Serverless 架构的方法和注意事项等。 （6）通过2个人工智能和小程序相关的案例完整地展示了Serverless项目开发的全过程，包括需求分析、技术选型、项目设计和开发实现等。 （7）通过阿里云的企业级解决方案和真实产品的构建过程，向读者展示了如何将新一代UI测试流程与Serverless 架构结合，以及如何开发轻量级的WebIDE，拥有自己的云上开发平台。

刘宇<br />国防科技大学博士，阿里云 Serverless 产品专家，云原生产业联盟云原生技术标准专家，CNCF Sandbox项目 Serverless Devs负责人，长期从事 Serverless 架构相关工作。<br />在 Serverless 领域有非常深厚的积累，专注于Serverless 架构的标准推进、冷启动优化以及工具链建设。Serverless 领域布道师，Serverless Framework等项目贡献者，WebIDE 项目 Anycodes 的负责人。<br />除此之外，还在大数据和人工智能领域、前端领域有非常丰富的经验，对 WebIDE、大语言模型等有较为深入的研究和丰富的实践。<br />著有《Serverless架构：从原理、设计到项目实战》《Serverless工程实践：从入门到进阶》《Serverless架构与人工智能最佳实践》。<br />王庆<br />阿里云云原生前端技术专家，负责阿里云消息、Serverless、微服务、高可用等前端研发工作，CNCF Sandbox项目 Serverless Devs联合创始人，目前专注于前端和云原生结合的方向。<br />袁坤<br />阿里云云原生前端技术专家，CNCF Sandbox项目 Serverless Devs负责人，开源项目 serverless-cd 项目作者。负责阿里云 Serverless、微服务的前端研发工作，专注于前端架构、可观测技术以及 DevOps 方向。<br />罗松<br />阿里云函数计算专家，曾负责阿里云函数计算产品运行时、事件源集成以及企业级 Serverless 解决方案落地等，目前专注在 Serverless 开发者工具链的建设，CNCF Sandbox项目 Serverless Devs负责人。关注 Serverless 最新技术动态以及在企业级解决方案的落地，致力于推动 Serverless 在开发者群体的流行。<br />徐小春<br />阿里云测试开发工程师，UI 云测项目负责人。

Contents　目　　录<br />序1<br />序2<br />前言<br />第1章　Serverless 架构简介1<br />1.1　Serverless架构入门1<br />1.1.1　发展历程1<br />1.1.2　定义 4<br />1.1.3　工作原理6<br />1.1.4　生态发展11<br />1.2　Serverless架构特性与挑战20<br />1.2.1　价值与优势20<br />1.2.2　风险与挑战26<br />1.3　Serverless架构应用场景33<br />1.3.1　Web/移动应用后端场景33<br />1.3.2　实时文件/数据处理34<br />1.3.3　离线数据处理35<br />1.3.4　人工智能领域35<br />1.3.5　IoT等领域36<br />1.3.6　监控与自动化运维36<br />第2章　零基础上手 Serverless 架构38<br />2.1　工业Serverless产品38<br />2.1.1　阿里云 Serverless 产品38<br />2.1.2　AWS Serverless产品45<br />2.2　开源 Serverless 项目51<br />2.2.1　OpenWhisk 项目51<br />2.2.2　Knative 项目56<br />2.2.3　Kubeless项目62<br />第3章　Serverless架构应用开发和<br />优化探索66<br />3.1　Serverless 架构与前端技术66<br />3.2　Serverless开发流程探索69<br />3.3　应用开发、构建与调试74<br />3.3.1　应用开发74<br />3.3.2　应用构建77<br />3.3.3　应用调试79<br />3.3.4　函数编排86<br />3.4　CI/CD88<br />3.4.1　与 GitHub Action 的集成88<br />3.4.2　与Gitee Go的集成90<br />3.4.3　与Jenkins的集成92<br />3.4.4　与云效的集成94<br />3.5　Serverless与可观测性95<br />3.6　应用优化97<br />3.6.1　冷启动优化98<br />3.6.2　文件上传方案106<br />3.6.3　文件持久化方案107<br />3.6.4　慎用Web框架特性107<br />3.6.5　项目结构策略108<br />第4章　前端技术视角下的 <br />Serverless 架构110<br />4.1　SSR：前端技术突破性能壁垒110<br />4.1.1　背景110<br />4.1.2　SSR简介111<br />4.1.3　Serverless架构下的SSR实战111<br />4.1.4　总结113<br />4.2　WebSocket技术在Serverless架构<br />下的新面貌114<br />4.2.1　背景114<br />4.2.2　API网关中的WebSocket原理<br />解析114<br />4.2.3　Serverless架构下的WebSocket <br />实战117<br />4.2.4　总结127<br />4.3　RESTful API与Serverless架构的<br />融合127<br />4.3.1　背景127<br />4.3.2　RESTful API简介128<br />4.3.3　Serverless架构下的<br />RESTful API130<br />4.3.4　总结135<br />4.4　Serverless架构下的GraphQL<br />实现135<br />4.4.1　背景135<br />4.4.2　GraphQL简介136<br />4.4.3　Serverless 架构下的 GraphQL <br />实战137<br />4.4.4　总结149<br />4.5　前后端一体化：前端技术的<br />风向标149<br />4.5.1　背景149<br />4.5.2　前后端一体化发展历史149<br />4.5.3　Serverless 架构下的前后端一体<br />化实战151<br />4.5.4　总结154<br />4.6　小程序/快应用：前端技术赋能<br />移动端开发154<br />4.6.1　背景154<br />4.6.2　Serverless 架构下的天气查询<br />小程序实战154<br />4.6.3　总结161<br />4.7　WebAssembly：前端技术新篇章162<br />4.7.1　背景162<br />4.7.2　WebAssembly简介162<br />4.7.3　WebAssembly 实战案例：<br />HoloWeb 代码格式化167<br />4.7.4　总结170<br />4.8　传统框架的 Serverless 化与 <br />Serverless 框架170<br />4.8.1　背景170<br />4.8.2　传统框架 Serverless 化171<br />4.8.3　Serverless First 框架：<br />Midway 174<br />第5章　Serverless 架构下的前端<br />生产实战案例177<br />5.1　网页全景录制及 Puppeteer 功能<br />设计与实现177<br />5.1.1　背景177<br />5.1.2　Puppeteer 简介178<br />5.1.3　Serverless架构下的网页截屏<br />功能179<br />5.1.4　二次开发方案182<br />5.1.5　总结183<br />5.2　盲盒抽奖活动系统设计及实现184<br />5.2.1　背景184<br />5.2.2　技术架构184<br />5.2.3　技术实现186<br />5.2.4　效果预览191<br />5.2.5　总结192<br />5.3　基于 Serverless 架构的头像漫画风<br />处理小程序192<br />5.3.1　背景192<br />5.3.2　技术实现193<br />5.3.3　效果预览202<br />5.3.4　总结203<br />5.4　Serverless WebSocket：弹幕应用<br />系统设计及实现204<br />5.4.1　背景204<br />5.4.2　技术架构204<br />5.4.3　技术实现205<br />5.4.4　效果预览210<br />5.4.5　总结212<br />5.5　HTML与快应用实战：简易用户<br />反馈功能实践212<br />5.5.1　背景212<br />5.5.2　技术架构213<br />5.5.3　技术实现213<br />5.5.4　效果预览217<br />5.5.5　总结218<br />第6章　传统内容管理系统Serverless<br />化升级实战219<br />6.1　背景219<br />6.2　需求明确220<br />6.3　技术选型220<br />6.4　项目设计221<br />6.4.1　基础架构设计221<br />6.4.2　Jamstack 与性能提升设计223<br />6.5　开发实现225<br />6.5.1　模块 Serverless 化升级225<br />6.5.2　API 网关配置与优化227<br />6.5.3　可观测能力完善231<br />6.6　项目预览235<br />6.7　总结236<br />第7章　基于 Serverless 架构的人工<br />智能相册系统238<br />7.1　背景238<br />7.2　需求明确239<br />7.3　技术选型240<br />7.4　项目设计241<br />7.4.1　基础架构设计241<br />7.4.2　小程序 UI 设计242<br />7.4.3　数据库设计243<br />7.5　开发实现247<br />7.5.1　数据库相关247<br />7.5.2　后端代码249<br />7.5.3　小程序相关257<br />7.6　项目预览262<br />7.7　总结264<br />第8章　基于Serverless架构的企业<br />宣传小程序265<br />8.1　背景265<br />8.2　需求明确265<br />8.2.1　小程序功能266<br />8.2.2　管理平台功能266<br />8.2.3　其他需求点266<br />8.3　技术选型266<br />8.4　项目设计267<br />8.4.1　基础架构设计267<br />8.4.2　小程序 UI 设计268<br />8.4.3　数据库设计269<br />8.5　开发实现271<br />8.5.1　数据库相关271<br />8.5.2　后端代码272<br />8.5.3　小程序相关277<br />8.5.4　管理页面283<br />8.6　项目预览286<br />8.6.1　小程序端286<br />8.6.2　管理端287<br />8.7　总结290<br />第9章　新一代 UI 云端录制回放<br />解决方案291<br />9.1　背景291<br />9.2　需求明确292<br />9.3　技术选型293<br />9.4　项目设计294<br />9.5　开发实现296<br />9.5.1　接口测试支持296<br />9.5.2　本地调试296<br />9.5.3　Cypress 测试用例实现示例297<br />9.5.4　函数计算实现方案298<br />9.6　技术特点299<br />9.7　项目优势301<br />9.8　核心功能体验303<br />9.8.1　图片一致性对比303<br />9.8.2　一键切换浏览器执行用例304<br />9.9　总结306<br />第10章　基于 Serverless 架构的轻量<br />WebIDE 服务307<br />10.1　背景307<br />10.2　需求明确307<br />10.3　技术选型308<br />10.4　项目设计310<br />10.4.1　基础架构设计310<br />10.4.2　API 设计311<br />10.4.3　数据库设计316<br />10.5　开发实现317<br />10.5.1　Reverse Proxy 模块317<br />10.5.2　服务安全加固319<br />10.6　项目预览320<br />10.7　总结323