2022年你还不会serverless(看看这篇保姆级教程(下))

本篇主要演示腾讯云serverless部署
Web 函数管理 Web 函数运行原理如下图所示:
2022年你还不会serverless(看看这篇保姆级教程(下))
文章图片

用户发送的 HTTP 请求经过 API 网关后,网关侧将原生请求直接透传的同时,在请求头部添加了网关触发函数时需要的函数名、函数地域等内容,并一起传递到函数环境,触发后端函数执行。
函数环境内,通过内置的 Proxy 实现 Nginx 转发,并去除头部非产品规范的请求信息,将原生 HTTP 请求通过指定端口发送给用户的 Web Server 服务。
用户的 Web Server 配置好指定的监听端口9000和服务启动文件后部署到云端,通过该端口获取 HTTP 请求并进行处理。
Web 函数请求限制
  • Web 函数只能通过 API 网关调用,不支持通过函数 API 接口触发。
  • 在 Response headers 中有以下限制:
    • 所有 key 和 value 的大小不超过4KB。
    • body 的大小不超过6MB。
  • 部署您的 Web 服务时,必须监听指定的 9000 端口,不可以监听内部回环地址 127.0.0.1
  • 目前 HTTP 请求 Header 里的 Connection 字段不支持自定义配置。
启动文件作用
scf_bootstrap 为 Web Server 的启动文件,保证您的 Web 服务正常启动并监听请求。除此之外,您还可以根据需要在 scf_bootstrap 中自定义实现更多个性化操作:
  • 设定运行时依赖库的路径及环境变量等。
  • 加载自定义语言及版本依赖的库文件及扩展程序等,如仍有依赖文件需要实时拉取,可下载至 /tmp 目录。
  • 解析函数文件,并执行函数调用前所需的全局操作或初始化程序(如开发工具包客户端 HTTP CLIENT 等初始化、数据库连接池创建等),便于调用阶段复用。
  • 启动安全、监控等插件。
2022年你还不会serverless(看看这篇保姆级教程(下))
文章图片

使用前提
  • 需具有可执行权限,请确保您的 scf_bootstrap 文件具备777或755权限,否则会因为权限不足而无法执行。
  • 能够在 SCF 系统环境(CentOS 7.6)中运行。
  • 如果启动命令文件是 shell 脚本,第一行需有 #!/bin/bash
  • 启动命令必须为绝对路径 /var/lang/${specific_lang}${version}/bin/${specific_lang},否则无法正常调用,详情请参见 标准语言环境绝对路径。
  • 建议使用监听地址为 0.0.0.0,不可以使用内部回环地址 127.0.0.1
标准语言环境绝对路径
2022年你还不会serverless(看看这篇保姆级教程(下))
文章图片

常见 Web Server 启动命令模版
2022年你还不会serverless(看看这篇保姆级教程(下))
文章图片

serverless fromework及控制台部署
serverless文档 https://www.serverless.com/cn...
1. 控制台部署
部署koa2管理端接口
2022年你还不会serverless(看看这篇保姆级教程(下))
文章图片

2022年你还不会serverless(看看这篇保姆级教程(下))
文章图片

2022年你还不会serverless(看看这篇保姆级教程(下))
文章图片

2022年你还不会serverless(看看这篇保姆级教程(下))
文章图片

官方demo https://github.com/tencentyun...
仓库关联GitHub,提交git代码自动更新
2022年你还不会serverless(看看这篇保姆级教程(下))
文章图片

2. 命令行部署-Serverless Framework方式
云函数和serverless的区别
  • Serverless FrameworkServerless公司推出的一个开源的Serverless 应用开发框架。
  • Serverless Framework是由 Serverless Framework PluginServerless Framework Components 组成。
  • Serverless Framework Plugin 实际上是一个函数的管理工具,使用这个工具,可以很轻松的部署函数、删除函数、触发函数、查看函数信息、查看函数日志、回滚函数、查看函数 数据等。简单的概括就是serverless其实就云函数的集合体,使用serverless后我们创建的云函数不需要手动去创建触发器等操作。
  • 官方地址
    • serverless官网地址
    • serverless中文官网
    • github地址
Serverless Framework应用场景
什么场景下需要使用 serverless,而不是使用云函数,其实在实际开发过程中,我们都是使用 serverless而不去使用云函数,毕竟云函数的使用场景受限,或者说比较基础。打一个简单的比方,在写 js操作 dom的时候,你会选择用原生 js还是会使用 jquery一样的比喻。
  • 基于云函数的命令行开发工具
    • 通过 Serverless Framework,开发者可以在命令行完成函数的开发、部署、调试。还可以结合前端服务、 API 网关、数据库等其它云上资源,实现全栈应用的快速部署。
  • 传统应用框架的快速迁移
    • Serverless Framework 提供了一套通用的框架迁移方案,通过使用 Serverless Framework提供的框架组件(Egg/Koa/Express 等,更多的框架支持可以参考),原有应用仅需几行代码简单改造, 即可快速迁移到函数平台。同时支持命令行与控制台的开发方式。
使用 serverless命令创建第一个应用
全局安装命令
npm install -g serverless serverless -v

创建项目
在电脑的一个空目录下运行命令
serverless

根据提示选择你要创建的模板
控制台输入 serverless
选择对应的模板
2022年你还不会serverless(看看这篇保姆级教程(下))
文章图片

部署上线
serverless deploy

2022年你还不会serverless(看看这篇保姆级教程(下))
文章图片

2022年你还不会serverless(看看这篇保姆级教程(下))
文章图片

2022年你还不会serverless(看看这篇保姆级教程(下))
文章图片

serverless.yml配置详情
https://github.com/serverless...
部署上线后可以在这里查看你的项目
2022年你还不会serverless(看看这篇保姆级教程(下))
文章图片

测试部署的项目
2022年你还不会serverless(看看这篇保姆级教程(下))
文章图片

删除部署的项目
2022年你还不会serverless(看看这篇保姆级教程(下))
文章图片

3. 在vscode中配置插件来开发serverless
vscode上安装插件
2022年你还不会serverless(看看这篇保姆级教程(下))
文章图片

vscode安装后插件登录并且拉取应用
2022年你还不会serverless(看看这篇保姆级教程(下))
文章图片

关于登录账号及密钥查看地址
远程拉取代码
2022年你还不会serverless(看看这篇保姆级教程(下))
文章图片

下载后的代码如果想上传也可以直接上传的
2022年你还不会serverless(看看这篇保姆级教程(下))
文章图片

WebIDE创建云函数实践
2022年你还不会serverless(看看这篇保姆级教程(下))
文章图片

2022年你还不会serverless(看看这篇保姆级教程(下))
文章图片

serverless部署前端项目
建议使用 Serverless Framework CLI,可快速部署本地云函数
  • 使用命令生成vue项目文件
  • 直接将代码推送到云端就可以
  • 也许你会好奇,我们正常的vue项目部署都要先npm run build,然后将打包后的dist目录传到服务器上的nginx静态目录下,这样才能访问
  • 注意前端的项目部署都是存储到oss中的
  • 使用serverless默认生成的项目是vue2版本的,如果你要部署vue3的项目需要手动构建
# serverless.yml文件 component: website name: vue-starter app: vue-demo-70a4c710inputs: src: src: ./src # 配置了这个hook每次发布的时候会先build hook: npm run build dist: ./dist bucketName: my-vue-starter protocol: https

手动构建一个vue3的项目
  • 参考文档
  • 使用脚手架创建一个vue3项目
  • 初始化一个serverless.yml文件
serverless init website-starter --name example

将这个 serverless.yml文件复制到 vue3项目中
简单的修改下
component: website name: websiteDemo app: vue3-demo-6cb9842ainputs: src: src: ./src hook: npm run build dist: ./dist region: ap-guangzhou bucketName: my-website-starter protocol: https

部署上线 serverless deploy
手动部署react项目
手动创建一个 react项目
npx create-react-app react-demo --template typescript

react根目录下创建一个 serverless.yml的文件
component: website # 这里修改下 name: react-starter # 这里修改下 app: reactDemoinputs: src: src: ./src hook: npm run build # 这里要根据你打包后的目录 dist: ./build # 这个定义下 bucketName: my-react-starter protocol: https

推送到云端 serverless deploy
使用静态文件托管来部署前端项目
  • 先本地根据项目命令打包好
  • 在云产品中选择静态文件托管
2022年你还不会serverless(看看这篇保姆级教程(下))
文章图片

  • 直接将上传你打包后的代码
2022年你还不会serverless(看看这篇保姆级教程(下))
文章图片

在serverless中连接mysql
数据库的准备
使用 serverless开发与我们自己使用云服务器服务器 ECS不一样的,因为我们不能在 serverless上安装软件(我们不能安装第三方的 mysqldockerredis)等软件,因此我们在使用 serverless开发的时候,如果我们项目中使用到了比如: mysqlredisrabbitMQRocketMQ类的我们就需要自行解决。下面介绍几种方式
  1. 自己有一台备用的云服务器ECS,我们在上面安装了需要的软件,对外提供了IP或者域名,在安全组中开放了端口号以供我们在serverless中使用。其实如果你自己有云服务器ECS可能就不会考虑使用serverless来开发了
  2. 单独使用第三方付费或者按量收费的数据库,比如:
    • 阿里云的云数据库RDS MySQL
    • 腾讯云的数据库云数据库
  3. 使用腾讯云官方自带的有免费额度的NoSQL数据库参考文档,本训练营会介绍如何使用,但是在项目中不会使用。
  4. 我在自己的服务器上使用docker搭建了一个mysql8版本的数据库,以供大家学习使用,自己根据自己的名字来在上面创建自己的数据库。大家自行保存地址,如果自己有服务器的,可以自己服务器上搭建,就不需要用我这个
# ip地址 8.129.234.99 # 用户名 root # 密码 123456

serverless中连接mysql
本案例只是测试官方案例连接数据库,不涉及什么知识点,根据自身条件选择是否跳过
在函数服务中选择 mysql数据库模板来创建数据库云函数应用。注意选择的语音和区域
2022年你还不会serverless(看看这篇保姆级教程(下))
文章图片

在自己的数据库中创建数据库及数据表
-- 创建数据表sql CREATE TABLE `account` ( `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键id', `username` varchar(50) NOT NULL COMMENT '用户名', `password` varchar(100) NOT NULL COMMENT '密码', `created_at` timestamp(6) NOT NULL DEFAULT CURRENT_TIMESTAMP(6) COMMENT '创建时间', `updated_at` timestamp(6) NOT NULL DEFAULT CURRENT_TIMESTAMP(6) ON UPDATE CURRENT_TIMESTAMP(6) COMMENT '更新时间', `deleted_at` timestamp(6) NULL DEFAULT NULL COMMENT '软删除时间', PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; -- 插入几条数据sql insert into account(username, password) values('admin', '123456'); insert into account(username, password) values('张三', '123456');

打开云函数的代码管理修改数据库的连接配置
2022年你还不会serverless(看看这篇保姆级教程(下))
文章图片

进入代码编辑界面的函数代码编辑代码
function wrapPromise(connection, sql) { return new Promise((res, rej) => { connection.query(sql, function(error, results, fields) { if (error) { rej(error) } res(results) }) }) } exports.main_handler = async (event, context, callback) => { const mysql = require('mysql'); const connection = mysql.createConnection({ host: '8.129.234.99', //云数据库实例ip地址 user: 'root', // 云数据库用户名,如root password: '123456', // 云数据库密码 database: 'serverless_nest' //数据库名称 }); connection.connect(); // 你需要查询的sql文件 const querySql = `SELECT * from account` // 查询结果 let queryResult = await wrapPromise(connection, querySql)connection.end(); return queryResult }

修改完成后点击部署和测试
2022年你还不会serverless(看看这篇保姆级教程(下))
文章图片

出现下面界面表示你已经在云函数中连接mysql成功了
2022年你还不会serverless(看看这篇保姆级教程(下))
文章图片

如果你想在浏览器上测试访问,可以点击 触发管理
2022年你还不会serverless(看看这篇保姆级教程(下))
文章图片

云开发与serverless的区别
  • Serverless Framework 是无服务器应用框架,提供将云函数SCFAPI 网关、对象存储 COS、云数据库 DB 等资源组合的业务框架,开发者可以直接基于框架编写业务逻辑,而无需关注底层资源的配置和管理。
  • 云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为开发者提供高可用、自动弹性扩缩的后端云服务,包含计算、存储、托管等 serverless 化能力,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用、Flutter 客户端等),帮助开发者统一构建和管理后端服务和云资源,避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
  • 二者最大的区别是:给开发者使用的平台支持不一样,云开发支持web端、QQ、微信小程序级静态网站托管等这些平台服务。
使用云开发创建一个nest项目
在产品中选择云开发产品
2022年你还不会serverless(看看这篇保姆级教程(下))
文章图片

创建一个项目,注意点:这里要选择好区域,下次创建了项目,区域不一样,可能项目就看不到
2022年你还不会serverless(看看这篇保姆级教程(下))
文章图片

使用模板创建
2022年你还不会serverless(看看这篇保姆级教程(下))
文章图片

查看自己创建应用并且访问
2022年你还不会serverless(看看这篇保姆级教程(下))
文章图片

使用脚手架的方式创建
全局安装脚手架包官方地址
npm i -g @cloudbase/cli

测试安装是否成功
cloudbase -v

登录
cloudbase login

本地创建项目
tcb new[template] # 比如 tcb new nest-cloundbase nest-starter

选择自己已经创建的环境,如果没有就 创建新环境,这时候会打开浏览器
2022年你还不会serverless(看看这篇保姆级教程(下))
文章图片

本地打开项目并且安装依赖包
npm run dev

部署到线上
npm run deploy

2022年你还不会serverless(看看这篇保姆级教程(下))
文章图片

在云开发中使用NoSQL
在面板上创建一个NoSQL的数据库,参考地址
2022年你还不会serverless(看看这篇保姆级教程(下))
文章图片

在项目中安装连接数据库的SDK参考文档
npm install @cloudbase/node-sdk

初始化数据库连接参考地址
import cloudbase from '@cloudbase/node-sdk'; // 注意以下几个参数是必填的,文档上说的是非必填 const app = cloudbase.init({ secretId: 'xx', secretKey: 'yy', env: 'xx', // 根据你创建的区域来写,目前只有上海(ap-shanghai)、广州(ap-guangzhou) region: 'ap-shanghai' })// 1. 获取数据库引用 const db = app.database();

关于获取secretIdsecretKeyenv的地址
  • env的获取地址
2022年你还不会serverless(看看这篇保姆级教程(下))
文章图片

  • secretIdsecretKey获取
2022年你还不会serverless(看看这篇保姆级教程(下))
文章图片

  • 点击test用户进入
2022年你还不会serverless(看看这篇保姆级教程(下))
文章图片

根据文档,我们将插入一条数据(同样先忽视类型检测)
async createAccount(data: any): Promise { const res = await db.collection('account') .add({ ...data, }); return res; }

环境变量的配置
本地开发环境变量的配置
  • 安装依赖包
npm install dotenv npm install @types/dotenv -D

在项目根目录下创建一个 .env的文件用来存储一些敏感信息
PORT=7000SECRET_ID = AKIDMfCxx2stVYNUx SECRET_KEY = d3C7pxxxv1VqiMrBHS ENV = serverlxxim00f1a872 REGION = ap-guangzhou

【2022年你还不会serverless(看看这篇保姆级教程(下))】在应用中使用使用环境变量的值
const app = cloudbase.init({ secretId: process.env.SECRET_ID, secretKey: process.env.SECRET_KEY, env: process.env.ENV, // 根据你创建的区域来写,目前只有上海(ap-shanghai)、广州(ap-guangzhou) region: process.env.REGION })

我是程序员小月,更多干货在公号「前端进阶之旅」分享

    推荐阅读