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

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

    • 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部署前后端项目实践
首页
2022-06-18 10:10:24
Front-End
部署serverless

# 一、serverless架构介绍及安装serverless

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

通俗的讲:Serverless 是构建和运行软件时不需要关心服务器的一种架构思想

虚拟主机已经是快被淘汰掉的上一代产物了。云计算涌现出很多改变传统 IT 架构和运维方 式的新技术,比如虚拟机、容器、微服务,无论这些技术应用在哪些场景,降低成本、提升 效率是云服务永恒的主题。Serverless 的出现真正的解决了降低成本、提升效率的问题。它真正做到了弹性伸缩、高并发、按需收费、备份容灾、日志监控等。

# 1.1 传统的开发模式与serverless开发模式对比

传统的开发模式

新型的serverless开发模式

Serverless 正在改变未来软件开发的模式和流程

# 1.2 Serverless 和 ServerFul 架构的区别

# 传统的 ServerFul 架构模式

ServerFul 架构就是 n 台 Server 通过 网络通信 的 方式 协作在一起,也可以说 ServerFul 架构是基于 Server 和 网络通信(分布式计算) 的 软件实现架构 , Server 可 以是 虚拟机 物理机 ,以及基于硬件实现的云的云服务器

# Serverless 架构模式

Serverless 的核心特点就是实现自动弹性伸缩和按量付费

# 1.3 使用serverless的优势

  • 资源分配: 在 Serverless 架构中,你不用关心应用运行的资源(比如服务配置、磁盘大小)只提供一份代码就行。
  • 计费方式: 在 Serverless 架构中,计费方式按实际使用量计费(比如函数调用次数、运 行时长),不按传统的执行代码所需的资源计费(比如固定 CPU)。计费粒度也精确到了毫 秒级,而不是传统的小时级别。个别云厂商推出了每个月的免费额度,比如腾讯云提供了每 个月 40 万 GBs 的资源使用额度和 100 万次调用次数的免费额度。中小企业的网站访问量不 是特别大的话完全可以免费使用。

  • 弹性伸缩: Serverless 架构的弹性伸缩更自动化、更精确,可以快速根据业务并发扩容更 多的实例,甚至允许缩容到零实例状态来实现零费用,对用户来说是完全无感知的。而传统 架构对服务器(虚拟机)进行扩容,虚拟机的启动速度也比较慢,需要几分钟甚至更久。

# 1.4 Serverless 组成

  • 广义的 Serverless 更多是指一种技术理念:Serverless 是构建和运行软件时不需要关心服务 器的一种架构思想。刚开始学 Serverless 你可以把它理解为虚拟主机的升级版本
  • 狭义的 Serverless 是指现阶段主流的技术实现:狭义的 Serverless 是 FaaS和 BaaS 组成

# 1.5 Serverless 开发流程

# 1.6 为什么要学 Serverless

先看看招聘信息

看看最近 2 年 Github 的 start 数量和周下载量

目前已经使用了 serverless 的大公司

# 1.7 Serverless 的能力

# 计算能力

  • 资源按需分配,无需申请资原
  • Mwm:租户级别强镜离 Docker:进程级别隔离
  • Mwm+Docker 轻量级资源毫秒级启动
  • 实时扩容,阶梯缩容
  • 按需收费

# 系统运维能力

  • 性能保障:整个链路耗时毫秒级内,并支持 VPC 内网访问
  • 安全保障
    • 资源对用户不可见,安全由腾讯云提供专业的保障
    • 提供进程级和用户级安全隔离
    • 访问控制管理
  • <
fe
Preview
  • 一、serverless架构介绍及安装serverless
    • 1.1 传统的开发模式与serverless开发模式对比
    • 1.2 Serverless 和 ServerFul 架构的区别
      • 传统的 ServerFul 架构模式
      • Serverless 架构模式
    • 1.3 使用serverless的优势
    • 1.4 Serverless 组成
    • 1.5 Serverless 开发流程
    • 1.6 为什么要学 Serverless
    • 1.7 Serverless 的能力
      • 计算能力
      • 系统运维能力
      • 业务运维能力
    • 1.8 serverless厂家
    • 1.9 云函数和serverless的区别
    • 1.20 创建serverless的方式
  • 二、serverless 脚手架安装、WebIDE中创建、vscode中配置
    • 2.1 脚手架安装-三分钟部署一个项目
    • 2.2 在vscode中配置插件来开发serverless
    • 2.3 WebIDE创建云函数实践
  • 三、Serverless Framework部署项目实战
    • 3.1 Serverless Framework简介及应用场景
      • Serverless Framework 应用场景
      • Serverless Framework 支持的平台
    • 3.2 Serverless Components 支持组件列表
      • 基础组件
      • 高阶组件
    • 3.3 sls部署egg项目
      • 控制台创建部署-模板部署
      • 控制台创建部署-自定义部署(推荐)
      • HTTP 组件方式部署(推荐)
      • 使用Layer 来减小项目文件大小
      • 使用serverless fromwork的高阶egg组件方式部署(不推荐)
    • 3.4 sls部署nestjs项目
      • 模板部署 – 部署 Nest.js 示例代码
      • 自定义模板部署nest(推荐)
      • 使用http组件(推荐)
      • 使用Layer 来减小项目文件大小
      • 使用serverless framework的高阶nestjs组件部署(不推荐)
    • 3.5 sls部署koa项目
      • 控制台部署
      • 自定义模板部署
      • 使用HTTP组件部署
  • 四、部署静态网站
    • 4.1 sls部署vue项目
    • 4.2 sls部署react项目
    • 4.3 sls部署vuepress项目
  • 五、综合实战
    • 5.1 Serverless中使用Node操作Mysql、Mongodb数据库、以及配置VPC私有网络
      • 云函数接入数据库
      • Nodejs Serverless 中操作 Mysql
      • Nodejs Serverless 中操作 Mongodb
    • 5.2 Serverless BaaS 对象云存储Cos介绍、Node操作Cos、实现图片上传到Cos中
      • 对象云存储 Cos 介绍
      • Nodejs 操作 Cos
      • Express 在 Serverless 中实现图片上传到 Cos 中
    • 5.3 Serverless、Cos中配置域名访问以及Serverless中配置https访问
      • Serverless 中配置域名访问
      • Serverless 中配置 https 访问
      • Cos 中配置域名
  • 六、QA
    • scf_bootstrap启动文件与sls.js启动文件区别
    • 关于serverless.yml写法问题,是更推荐HTTP组件方式吗
    • 关于配额问题如何处理
  • 七、官方文档

← 微信云托管入门与实践docker-compose/微信云托管/serverless之部署Nestjs项目 →