Serverless 背景下的前端困境与解决方案
以下文章来源于Alibaba F2E ，作者狼叔
阿里巴巴终端官方公众号
回顾 2018 年的前端届，笔者看到的是 PWA、SSR、AMP、Web Component & Polymer、GraphQL 等半生不熟的技术，其中最有创新点的大概就是 Truffle（区块链）和 TFJS（TensorFlow.js）了。
到了 2019 年 ，当数 Serverless 的发展最为迅速。那么，当下去分析 Serverless 背景下的前端困境就显得尤为重要——从自身痛点出发，才能更好地赋能前端。
本文将从 Serverless 背景下的前端困境入手分析，结合具体的技术点，最后给出解决方案相关的建议。
Serverless 背景下的前端困境
国内各个公司在 Serverless 投入很大，腾讯和阿里云都铆足了劲在上面发力，提出了各自的解决方案，腾讯推出了 Serverless 2.0，以及前段时间阿里云推出的预留模式，都是对 Serverless 越来越重视的表现。
阿里近期在做前端研发升级，为拓展前端的边界和职能，尝试做了一次和 Serverless 的结合，希望能将传统应用快速迁移到 Serverless 体系，让大家都能享受到 Serverless 的红利。
Serverless 技术已经来临，Web 应用是 Serverless 技术一个重要的场景。
应该以什么姿态和角色去迎接新的技术变革，是每个端开发需要思考的问题。
我们可能会有如下思考：
Serverless 能给我们带来多大价值？
有没有符合 Serverless 应用的开发框架？
Serverless 下前端传统的渲染，该如何做？
Serverless 应用的开发模式会不会和过去的开发模式存在很大的差异？
为了让 Web 应用在 Serverless 场景下，保持甚至超越传统开发体验，我们做了许多探索。我们尝试将传统 Web 应用框架迁移到 Serverless 平台上，比如 Egg.js 等框架，虽然与传统开发体验相差不大，但是也带来了不少问题，例如不支持跨云平台，还需要针对 Serverless 特性做好适配，相关的工具也没法深度适配 Web 应用框架这种特定场景。
FaaS 架构研发模式如何升级
Node.js Web 的浪潮，把前端变为了全栈开发工程师，体会到了传统前后端一体应用的魅力，也扩充了前端的边界，而 Serverless 则成了工程师们从 DevOps 到 NoOps 的另一次契机，新的革命即将到来。
传统应用开发、调试、部署的整个研发流程，在新的机会下需要模式升级，也需要从工具链、框架、到整个发布和灰度以及回滚流程，整体来重塑原有的体系。
面对基建成本和技术革新，阿里集团利用传统的 Node.js 技术栈的经验积累，演进出全新的 midway-faas 框架，结合完整的工具链从整个研发流程，调试，发布着手，通过平台化，工具化，将整个工程从头迁移到 Serverless 新体系。
为此，阿里开始了「前端研发升级」这个大项目。
整个前端研发模式升级的目的有两个，一为「前端赋能」，二为「提效」。所谓的「前端赋能」，是因为我们希望能够打破现有的技术壁垒，朝着更底层、面向数据的地方去深入探索，在这之中可以从面向 UI 和视图本身变得更加了解业务，从更全面的视角来理解现有的体系。而「前端提效」，则是希望让 Serverless，用更轻量化的方式进行业务研发，降低整个前端参与业务交付的门槛，同时，在开发期间，也能减少人力总成本，让前端减负，业务小步快跑成为可能。
概览如下，用户代码桥接函数和 BaaS 服务，其中 HTTP 网关和函数运行时、容器是三大核心技术。
基于现有生态，如何实现函数运行时，其中也是有很多故事的。
Node.js 基础团队的使命，就是为阿里集团 Node.js 生态提供各种基础能力，包括但不限于框架，中间件包等，而在 Serverless 体系中，我们要负责框架、工具链、运行时、发布系统，同时也需要和周边的网关，监控系统等对接。
渲染层如何做
从 beidou、Next.js、Egg-react-ssr 到 Umi SSR, 可以看出服务端渲染是很重要的端侧渲染组成部分。无论如何，React SSR 都是依赖 Node.js Web 应用的。那么，在 Serverless 时代，基于函数即服务（Functions as a Service，简写为FaaS）做 API 开发相关是非常简单的，因为它 1. 无服务，不需要管运维工作；2. 代码只关心函数粒度，面向 API 编程，降低构建复杂度；3. 可扩展。
那么，在 FaaS 下，如何做好渲染层呢？直出 HTML，做 CSR 很明显是太简单了，其实我们可以做的更多，笔者目前能想到的 Serverless 时代的渲染层具有如下特点：
采用 Next.js/egg-react-ssr 写法，实现客户端渲染和服务端渲染统一
采用 Umi SSR 构建，生成独立 umi.server.js 做法，做到渲染
采用 Umi 做法，内置 Webpack 和 React, 简化开发，只在构建时区分客户端渲染和服务端渲染，做好和 CDN 的搭档，做好优雅降级，保证稳定性
结合 FaaS API，做好渲染集成
为了演示 Serverless 下渲染层实现原理，下面会进行简要说明。在 Serverless 云函数里，一般会有 server.yml 作为配置文件，这里以 lamda 为例子。
通过这个配置，我们可以看出函数 app.server 对应的 HTTP 请求路径是 '/'，这个配置其实描述的就是路由信息。对应的 app.server 函数实现如下图。
通过提供 ctx.ssrRender 方法，读取 dist 目录下的 Page.server.js 完成服务端渲染。
核心要点：
ssrRender 方法比较容易实现
采用类似 Umi SSR 的方式，将源码打包到 Page.server.js 文件中
在发布的时候，将配置，app.server 函数和 Page.server.js 等文件上传到 Serverless 运行环境即可
综上所述，我们大致可以推出架构升级的四大阶段。
在 CSR 中，开发者需要关心 React 和 Webpack
在 SSR 中，开发者需要关心 React、Webpack 和 Egg.js
在 Umi SSR 同构中，开发者需要关心 React 和 Egg.js，由于 Umi 内置了 Webpack, 开发者基本不需要关注 Webpack
未来，基于 FaaS 的渲染层，开发者只需要关心 React, 不需要关心 Webpack 和 Egg.js
在这四个阶段中，依次出现了 CSR 和 SSR, 之后在同构实践中，对开发者要求要更高，甚至是全栈。所有这些经验和最佳实践的积累，沉淀出了更简单的开发方式，在未来 Serverless 环境下，希望前端更加简单、高效。
Serverless 时代，我们还能干点什么
Serverless 是一个颠覆性的演进，与之伴随而来的，是对未知的探索，这既是机遇也是挑战。
1）自动化
目前看，从申请域名，到网关，到集群的链路，离「无运维」还有许多优化空间。
2）面向页面开发，会导致页面管理成本增加
页面和 API 都以函数的形式存在，其维护成本比微服务时还要高
3）多种技术栈的融合
像早年的 Portal，现在的微前端，其实都是在解决「Widget 或组件的复用和配置」问题。
一个大型应用被“碎片化”后，还要保持“一目了然”。它由哪些子应用构成、运行状态、异常监控、代码健康度、甚至一些运营数据的监控，就变得非常必要了。
简化开发，赋能业务，为大中台，小前台贡献应变能力，笔者畅想的未来是这样的：
组件：开发只写组件
页面：配置出来
系统：集成出来
寄语未来前端
通过阿里前端的四大方向：Serverless、搭建、智能化、IDE, 我们可以看到未来对前端要求会越来越高，复合型人才（比如掌握算法），需要跨界（影响力），国际化，生在这样的时代是每一个前端的机遇和荣耀。
希望前端能够有更强的业务 Owner 意识，勇于创新，打破前端自身的局限和壁垒。无论 Serverless 还是智能化，我们都在突破，引领潮流。
本届 D2 Serverless 专场
其实，Serverless 背景下的前端困境对应的解决方案，业界都在探索，这是一条开拓的路，本次 D2 特地设置了 Serverless 专场，邀请国际国内知名一线专家，共同探讨，目前已入驻以下主题，邀你共赏。
1）Serverless 赋能前端应用开发
讲师：Matheus Fernandes & Shu Ding, 海外嘉宾，来自业界践行 Serverless 的先驱、知名 Serverless 解决方案提供商 ZEIT 公司。Matheus Fernandes 是 ZEIT 的技术负责人，知名的产品包括 Next.js 和 ZEIT now, 他帮助团队快速发展和业务的全球扩张。对开源、网络、CDN加速和摄影充满热情。为了追逐梦想，他辍学了，环球旅行和写代码，作为 ZEIT 的技术负责人，他两项爱好都实现了。Shu Ding 是 ZEIT 的产品设计师，他参与深受全球用户的喜爱的 Next.js、zeit.co 管理后台、SWR 等产品的设计。从高中开始编程，花了 4 年在算法比赛上。复旦大学计算机系本科毕业，目前是一名平面设计师和前端开发者，在上海工作。他创建了 inns.studio 以及其他很多项目。
内容摘要：ZEIT 是如何应用 Serverless 思想，借助前端实现 API 目录以及 Serverless target 等功能，在无额外开发成本的情况下，大幅度提升应用的可用性与伸缩性的？在本次分享中，我们将通过分析实际的案例，去了解 Serverless 在开发场景背后的工作方式，一起感受如何利用 Serverless 的思想和能力去编写功能强大的前端应用程序。
2）前端新思路：组件即服务和 Serverless SSR 实践
讲师：狼叔，来自阿里巴巴，花名狼叔，前去哪儿前端架构师，StuQ 明星讲师，Node.js 技术布道者。曾就职于新浪、网秦，曾做过前端、后端、数据分析、移动端负责人、做过首席架构师、技术总监，全栈技术实践者，目前主要关注技术架构和团队梯队建设方向。
内容摘要：今天，做 Node.js 的运维和高并发依然是富有挑战的，为了提效，我们将架构演进为页面即服务，可是粒度还不够，借着云原生和 Serverless 大潮，无运维、轻松扩展，是对前端极大的诱惑。那么，基于 FaaS 之上，前端有哪些可能性呢？2019 年上半年，我在阿里巴巴经济体前端委员会推进的 Serverless 研发体系共建项目中负责 Serverless SSR 的研究，将 CSR、SSR、边缘渲染进行整合和尝试，提出组件即服务的概念（Component as Service），试图结合Faas, 做出更简单的开发方式。本次分享主要围绕 Serverless SSR 和它的演进过程、背后思考为主。
3）Serverless 下函数应用架构升级
讲师：陈仲寅，来自阿里巴巴，花名张挺，长期耕耘于 Node.js 技术栈，为淘宝和阿里其他BU提供框架和中间件解决方案，负责淘宝整体的 Node.js 体系基础建设，解决全栈开发的各种维护和稳定性问题，也同时负责 MidwayJs 系列内部和社区开源产品，包括 Midway、Sandbox、Pandora、Injection 等开源产品的开发、维护等工作。
内容摘要：Node.js Web 的浪潮，让前端变为了全栈开发工程师，体会到了传统前后端一体应用的魅力，也扩充了前端的边界，而 Serverless 则成了工程师们从 DevOps 到 NoOps 的另一次契机，一次革命。
传统的应用开发、调试、部署的整个研发流程，在新的机会下需要模式升级，也需要整体重塑原有的体系，从工具链、框架、到整个发布和灰度以及回滚流程。
面对基建成本和技术革新，阿里集团利用传统的 Node.js 技术栈的经验积累，演进出全新的 midway-faas 框架，结合完整的工具链从整个研发流程，调试，发布着手，通过平台化，工具化，将整个工程从头迁移到 Serverless 新体系。
本次分享主要围绕 Serverless 体系下，使用全新的框架、工具链和研发模式，讲解在新的体系中进行业务快速迭代，研发升级以及多场景，多环境的问题。
4）基于 FaaS 实现 NPM CDN 同步
讲师：张立理，就职于百度，现任资深前端工程师 & 百度 ECOMFE、FE-CMC 主席一职。作为行业享有盛名的大咖，张立理行事低调，对工作热情饱满，多次受邀作为嘉宾出席各类大会，并发表了精彩演讲。
内容摘要：NPM 是 JavaScript 最权威的依赖仓库，通过 CDN 访问 NPM 任意包内的文件有助于快速构建前端应用，UNPKG 和 jsDelivr 是国际上比较知名的 NPM CDN 提供商，本次分享将介绍通过基于云服务（包括函数云、对象存储、CDN、容器引擎）和 Terraform 框架构建一个高弹性、高稳定性、免运维的 NPM 到 CDN 的同步服务