前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合

    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础

    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习

    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他

    • Handbook
    • 职场话题
    • CSS可视化
  • 框架文档

    • React
    • Vue3
    • Vite
    • Svelte
    • Angular
    • NodeJS
    • Egg
    • Nest
    • Koa
    • Express
    • Electron
    • Ionic
    • Taro
    • Uniapp
    • React Native
    • Webpack
    • Rollup
    • Jquery API
    • Bootstrap
    • Axios
    • Lodash
    • RXJS
    • Sequelize
    • TypeORM
    • Mongoose
    • GraphQL
    • Puppeteer
    • Sass
    • Less
    • Umi4
    • Miniprogram
  • 文档教程

    • Cheatsheets
    • Devdocs有可能是全球最全的文档库
    • Overapi
    • JavaScript 标准参考教程
    • ES6 入门教程
    • MDN在线文档
    • Typscript中文文档
    • JavaScript Promise迷你书(中文版)
    • Canvas API中文
    • Git中文手册
    • 云开发Cloudbase
    • Serverless中文文档
  • UI组件

    • Ant Design React
    • Ant Design Vue
    • Ant Design Pro
    • ProComponents
    • 腾讯Tdesign
    • NutUI京东风格的轻量级移动端 Vue 组件库
    • Semantic UI Vue
    • Cube UI Vue滴滴
    • Iview UI
    • 有赞Vant Vue3
    • 有赞Vant 小程序
    • Element UI Vue3
  • 可视化

    • Antv
    • Bizcharts
    • Threejs
    • D3js
    • Highcharts
    • Echarts
  • 配置相关

    • ESLint
    • Babel
    • Nginx中文文档
    • Github Action中文
    • Docker官方文档
    • Jenkins官方文档
  • 后端相关

    • Spring官方文档中文版
    • Spring Boot官方文档
    • Spring Cloud官方文档
    • Java8官方文档
    • maven官方文档
    • Tomcat 8官方文档
    • Kafka中文文档
    • MyBatis中文文档
    • RabbitMQ中文文档
    • Dubbo中文文档
    • Netty官方文档
    • Elasticsearch官方文档
    • K8S官方文档
  • 实用工具

    • 在线正则表达式调试工具
    • 在线正则表达式可视化
    • 常用正则表达式大全
    • 可以在线看代码流程的网站:loupe
    • 在线MD5编码工具
    • 在线JWT解码工具
    • 在线JSON解析
    • 在线文本比对
    • 在线JS代码格式化
    • 在线SQL压缩格式化
    • 在线XML压缩格式化
    • 在线时间戳转化工具
    • 在线RGB颜色转化工具
    • 在线HTTP在线接口测试工具
    • 在线IP地址查询
    • 在线菜鸟综合导航工具
  • 在线编程

    • MipCode快速的在线代码创作工具
    • Codepen
    • Jsbin
    • CodeSandBox在线快速学习React/Vue
    • Vue SFC Playground
    • Vue3 模板在线解析查看编译结果
    • Svelte Playground
    • 在线尝试Babel编译
    • Typescript在线编译
    • AST可视化编辑
    • 在线尝试Rollup打包
    • Prettier Playground
    • Stackblitz基于VSCODE的WEBIDE
    • NPM Runkit在浏览器中快速学习及尝试Node.js模块
    • Play with Docker在线体验
  • CSS相关

    • 用来帮助大家查找CSS的相关属性的语法,以及使用方法
    • 提供了CSS相关属性的浏览器兼容表,同时提供了对应属性资源
    • Flex在线动态练习
    • 贝塞尔曲线生成工具
    • SCSS在线转CSS
    • Clip-path在线生成器
    • Animate.css动画效果
    • 按需定制CSS动画效果
    • 一份清单,按字母表顺序列出了每个CSS属性
    • CSS按钮生成器
    • Css3按钮动画
    • CSS3渐变样式生成器,类似Photoshop中的渐变界面
    • CSS3 Maker可在线演示渐变阴影旋转动画并生成代码
    • CSS3 Tool非常方便的生成背景渐变、阴影、旋转和边框圆角效果
    • SVG背景生成
    • 多张图片合成雪碧图
    • 汇集了实现各种加载效果的CSS代码片段
    • SVG滤镜
    • HTML5 元素标签含义大全(元素周期表)
    • HTML语义化
    • KakaCss快速生成Css样式,在任意网站复制内容,再到本页面Ctrl+V
    • CSS参考手册
    • 各种各样的loading效果
    • CSS shadow generator
    • 通过拖拽的形式生成需要的border radius
    • 花式半径生成器-通过拖拽的形式生成需要的border radius
    • cssgrid-generator
  • 综合

    • 可视化学习算法网站
    • 在线Nginx配置
    • React生命周期查看网站
    • CodeFun设计稿智能生成源代码
    • Imgcook由设计稿一键智能生成代码的大厨
  • 创作必备

    • 在线画图processon
    • Draw.io免费的流行的流程图工具
    • 在线思维导图mindline
    • 在线字数统计
    • 在线mardown排版
    • 在线免费图床
    • 在线代码截图carbon
    • 在线短链生成
    • 在线文本替换
    • 在线文件压缩
    • 在线多媒体转换器
    • 在线PDF转化工具SmallPdf
    • 在线任意文件的格式转换Convertio
    • 在线PS工具
    • 在线抠图工具
    • LOGO在线制作
    • 在线制作海报设计工具
    • Open source icons
    • 表情包在线网站
    • 图片智能放大工具
    • ICO图标在线生成
    • 视频转GIF工具
    • 音频在线处理
    • 多图合成GIF工具
    • 在线图片压缩工具
    • Pixabay图片素材库
    • Unsplash图片素材库
    • Pexels图片素材库
小程序题库
公众号动态
博客动态
前端导航
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合

    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础

    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习

    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他

    • Handbook
    • 职场话题
    • CSS可视化
  • 框架文档

    • React
    • Vue3
    • Vite
    • Svelte
    • Angular
    • NodeJS
    • Egg
    • Nest
    • Koa
    • Express
    • Electron
    • Ionic
    • Taro
    • Uniapp
    • React Native
    • Webpack
    • Rollup
    • Jquery API
    • Bootstrap
    • Axios
    • Lodash
    • RXJS
    • Sequelize
    • TypeORM
    • Mongoose
    • GraphQL
    • Puppeteer
    • Sass
    • Less
    • Umi4
    • Miniprogram
  • 文档教程

    • Cheatsheets
    • Devdocs有可能是全球最全的文档库
    • Overapi
    • JavaScript 标准参考教程
    • ES6 入门教程
    • MDN在线文档
    • Typscript中文文档
    • JavaScript Promise迷你书(中文版)
    • Canvas API中文
    • Git中文手册
    • 云开发Cloudbase
    • Serverless中文文档
  • UI组件

    • Ant Design React
    • Ant Design Vue
    • Ant Design Pro
    • ProComponents
    • 腾讯Tdesign
    • NutUI京东风格的轻量级移动端 Vue 组件库
    • Semantic UI Vue
    • Cube UI Vue滴滴
    • Iview UI
    • 有赞Vant Vue3
    • 有赞Vant 小程序
    • Element UI Vue3
  • 可视化

    • Antv
    • Bizcharts
    • Threejs
    • D3js
    • Highcharts
    • Echarts
  • 配置相关

    • ESLint
    • Babel
    • Nginx中文文档
    • Github Action中文
    • Docker官方文档
    • Jenkins官方文档
  • 后端相关

    • Spring官方文档中文版
    • Spring Boot官方文档
    • Spring Cloud官方文档
    • Java8官方文档
    • maven官方文档
    • Tomcat 8官方文档
    • Kafka中文文档
    • MyBatis中文文档
    • RabbitMQ中文文档
    • Dubbo中文文档
    • Netty官方文档
    • Elasticsearch官方文档
    • K8S官方文档
  • 实用工具

    • 在线正则表达式调试工具
    • 在线正则表达式可视化
    • 常用正则表达式大全
    • 可以在线看代码流程的网站:loupe
    • 在线MD5编码工具
    • 在线JWT解码工具
    • 在线JSON解析
    • 在线文本比对
    • 在线JS代码格式化
    • 在线SQL压缩格式化
    • 在线XML压缩格式化
    • 在线时间戳转化工具
    • 在线RGB颜色转化工具
    • 在线HTTP在线接口测试工具
    • 在线IP地址查询
    • 在线菜鸟综合导航工具
  • 在线编程

    • MipCode快速的在线代码创作工具
    • Codepen
    • Jsbin
    • CodeSandBox在线快速学习React/Vue
    • Vue SFC Playground
    • Vue3 模板在线解析查看编译结果
    • Svelte Playground
    • 在线尝试Babel编译
    • Typescript在线编译
    • AST可视化编辑
    • 在线尝试Rollup打包
    • Prettier Playground
    • Stackblitz基于VSCODE的WEBIDE
    • NPM Runkit在浏览器中快速学习及尝试Node.js模块
    • Play with Docker在线体验
  • CSS相关

    • 用来帮助大家查找CSS的相关属性的语法,以及使用方法
    • 提供了CSS相关属性的浏览器兼容表,同时提供了对应属性资源
    • Flex在线动态练习
    • 贝塞尔曲线生成工具
    • SCSS在线转CSS
    • Clip-path在线生成器
    • Animate.css动画效果
    • 按需定制CSS动画效果
    • 一份清单,按字母表顺序列出了每个CSS属性
    • CSS按钮生成器
    • Css3按钮动画
    • CSS3渐变样式生成器,类似Photoshop中的渐变界面
    • CSS3 Maker可在线演示渐变阴影旋转动画并生成代码
    • CSS3 Tool非常方便的生成背景渐变、阴影、旋转和边框圆角效果
    • SVG背景生成
    • 多张图片合成雪碧图
    • 汇集了实现各种加载效果的CSS代码片段
    • SVG滤镜
    • HTML5 元素标签含义大全(元素周期表)
    • HTML语义化
    • KakaCss快速生成Css样式,在任意网站复制内容,再到本页面Ctrl+V
    • CSS参考手册
    • 各种各样的loading效果
    • CSS shadow generator
    • 通过拖拽的形式生成需要的border radius
    • 花式半径生成器-通过拖拽的形式生成需要的border radius
    • cssgrid-generator
  • 综合

    • 可视化学习算法网站
    • 在线Nginx配置
    • React生命周期查看网站
    • CodeFun设计稿智能生成源代码
    • Imgcook由设计稿一键智能生成代码的大厨
  • 创作必备

    • 在线画图processon
    • Draw.io免费的流行的流程图工具
    • 在线思维导图mindline
    • 在线字数统计
    • 在线mardown排版
    • 在线免费图床
    • 在线代码截图carbon
    • 在线短链生成
    • 在线文本替换
    • 在线文件压缩
    • 在线多媒体转换器
    • 在线PDF转化工具SmallPdf
    • 在线任意文件的格式转换Convertio
    • 在线PS工具
    • 在线抠图工具
    • LOGO在线制作
    • 在线制作海报设计工具
    • Open source icons
    • 表情包在线网站
    • 图片智能放大工具
    • ICO图标在线生成
    • 视频转GIF工具
    • 音频在线处理
    • 多图合成GIF工具
    • 在线图片压缩工具
    • Pixabay图片素材库
    • Unsplash图片素材库
    • Pexels图片素材库
小程序题库
公众号动态
博客动态
前端导航
serverless及小程序云开发实践总结
首页
2021-09-12 18:24:08
Front-End
serverless

# 一、Serverless 架构详解

# 1.1 什么是serverless

我们使用函数的时候不用关心后端IP、域名,只需要调用函数,后端的服务是一个函数。serverless并不是没有服务器,只是服务器部署在云上面的,比我们去自己维护更方便多

  • Serverless又名无服务器,所谓无服务器并非是说不需要依赖和依靠服务器等资源,而是开发者再也不用过多考虑服务器的问题,可以更专注在产品代码上。
  • Serverless是一种软件系统架构的思想和方法,它不是软件框架、类库或者工具。它与传统架构的不同之处在于,完全由第三方管理,由事件触发,存在于无状态(Stateless)、 暂存(可能只存在于一次调用的过程中)计算容器内。构建无服务器应用程序意味着开发者可以专注在产品代码上,而无须管理和操作云端或本地的服务器或运行时(运行时通俗的讲 就是运行环境,比如 nodejs 环境,java 环境,php 环境)。Serverless 真正做到了部署应用 无需涉及基础设施的建设,自动构建、部署和启动服务。
  • 第一种:狭义 Serverless(最常见)= Serverless computing 架构 = FaaS 架构 = Trigger(事件驱动)+ FaaS(函数即服务)+ BaaS(后端即服务,持久化或第三方服务)= FaaS + BaaS
  • 第二种:广义 Serverless = 服务端免运维 = 具备 Serverless 特性的云服务

  • FAAS:函数及服务,通俗来说就是我们可以写一个函数,在该函数内执行业务逻辑,函数由fas平台运行
  • BAAS:后端及服务,通常指云服务,该云服务常指中间件服务,

FAAS+BAAS 构成了Serverless架构

整体架构十分简单明了, 用 FC 替代了 Web 服务器,但是换来的是免运维,弹性扩容,按需付费等一系列优点

目前,Serverless 的应用场景广泛,大部分传统业务均可以在 Serverless 云函数上完美支持

# 1.2 Serverless要解决什么?

问题:前端和后端分离后,彼此独立,这样就导致前端需要关注一些后端关注的问题,如下。

  • 完整的后端应用上线流程
  • 机器管理运维:扩缩容
  • 降级、熔断、限流
  • 域名、性能、监控

是不是触及了很多同学的知识盲区。作为一个前端,确实大多数人对于服务端的环境,部署基础设施等等东西并不了解。但是现在前端是独立的部署,前端必然面临这些东西。这就是serverless要解决的问题。

# 1.3 Serverless做什么事?

问题:是不是可以弄一个工具,我们只需要关心前端代码,服务器的东西工具自动帮我们做好。

这就是serverless做的事情。如下图,我们只需要关心业务代码,不需要关心服务器的基础设施。

# 1.4 Serverless和函数计算的区别

# 1.5 Serverless 的技术特点

事件驱动

  • 云函数的运行,是由事件驱动起来的,在有事件到来时,云函数会启动运行
  • Serverless 应用不会类似于原有的「监听 - 处理」类型的应用一直在线,而是按需启动
  • 事件的定义可以很丰富,一次 http 请求,一个文件上传,一次数据库条目修改,一条消息发送,都可以定义为事件

单事件处理

  • 云函数由事件触发,而触发启动的一个云函数实例,一次仅处理一个事件
  • 无需在代码内考虑高并发高可靠性,代码可以专注于业务,开发更简单
  • 通过云函数实例的高并发能力,实现业务高并发

自动弹性伸缩

  • 由于云函数事件驱动及单事件处理的特性,云函数通过自动的伸缩来支持业务的高并发
  • 针对业务的实际事件或请求数,云函数自动弹性合适的处理实例来承载实际业务量
  • 在没有事件或请求时,无实例运行,不占用资源

无状态开发

  • 云函数运行时根据业务弹性,可能伸缩到 0,无法在运行环境中保存状态数据
  • 分布式应用开发中,均需要保持应用的无状态,以便于水平伸缩
  • 可以利用外部服务、产品,例如数据库或缓存,实现状态数据的保存

# 1.6 传统服务器架构 VS Serverless架构

  1. 传统的开发模式

  1. 新型的serverless开发模式

fe

Preview
  • 一、Serverless 架构详解
    • 1.1 什么是serverless
    • 1.2 Serverless要解决什么?
    • 1.3 Serverless做什么事?
    • 1.4 Serverless和函数计算的区别
    • 1.5 Serverless 的技术特点
    • 1.6 传统服务器架构 VS Serverless架构
    • 1.7 使用serverless优缺点
    • 1.8 如何理解理解Serverless技术—FaaS和BaaS
    • 1.9 Serverless计算如何工作?
    • 2.0 FAAS 冷启动
    • 2.1 FAAS 分层
    • 2.2 后端应用 BaaS 化
    • 2.3 Serverless使用场景
    • 2.4 serverless的厂家
  • 二、微信小程序云开发
    • 2.1 小程序传统开发模式
    • 2.2 云开发正在改变小程序的开发模式
    • 2.3 小程序云函数计费
    • 2.4 小程序云开发项目的创建与配置
      • 云开发项目初始化
      • 小程序云开发资源的管理
      • 其他工具与方式
      • 部署并上传云函数
    • 2.5 小程序云函数场景
      • 小程序云开发对比不同方式获取用户信息的应用场景
      • 小程序码
      • 图片上传
      • 云函数路由优化tcb-router
      • 云函数超时时间
      • 订阅消息
      • 定时触发器
    • 2.6 云数据库
    • 2.7 小程序云函数调试
      • 控制台调试
      • vscode本地调试
    • 2.8 小程序云开发部署管理后台演示-触发云函数的运用
      • 接口调用凭证access_token的缓存与更新
      • HTTP API 触发云函数
  • 三、不同厂商的serverless部署演示
    • 3.1 腾讯serverless
      • 1、Web 函数管理
      • 2、serverless fromework及控制台部署
      • 3、serverless部署前端项目
      • 4、在serverless中连接mysql
      • 5、云开发与serverless的区别
    • 3.2 阿里云函数部署
    • 3.3 vercel部署

← Jenkins部署微前端方案实践总结微前端实战总结篇 →