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

本篇主要演示腾讯云serverless部署

Web 函数管理

Web 函数运行原理如下图所示:

img

用户发送的 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 等初始化、数据库连接池创建等),便于调用阶段复用。
  • 启动安全、监控等插件。
img

使用前提

  • 需具有可执行权限,请确保您的 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

标准语言环境绝对路径

img

常见 Web Server 启动命令模版

img

serverless fromework及控制台部署

serverless文档 https://www.serverless.com/cn/framework/docs/

1. 控制台部署

部署koa2管理端接口

img

img

img

img

官方demo https://github.com/tencentyun/serverless-demo/blob/master/WebFunc-KoaDemo/src/app.js

仓库关联GitHub,提交git代码自动更新

img

2. 命令行部署-Serverless Framework方式

云函数和serverless的区别

  • Serverless FrameworkServerless公司推出的一个开源的Serverless 应用开发框架。
  • Serverless Framework是由 Serverless Framework PluginServerless Framework Components 组成。
  • Serverless Framework Plugin 实际上是一个函数的管理工具,使用这个工具,可以很轻松的部署函数、删除函数、触发函数、查看函数信息、查看函数日志、回滚函数、查看函数 数据等。简单的概括就是serverless其实就云函数的集合体,使用serverless后我们创建的云函数不需要手动去创建触发器等操作。
  • 官方地址

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

选择对应的模板

img

部署上线

serverless deploy
img

serverless.yml配置详情

https://github.com/serverless-components/tencent-http/blob/master/docs/configure.md

部署上线后可以在这里查看你的项目

img

测试部署的项目

img

删除部署的项目

img

3. 在vscode中配置插件来开发serverless

vscode上安装插件

img

vscode安装后插件登录并且拉取应用

img

关于登录账号及密钥查看地址

远程拉取代码

img

下载后的代码如果想上传也可以直接上传的

img

WebIDE创建云函数实践

img

img

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-70a4c710

inputs:
  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-6cb9842a

inputs:
  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: reactDemo

inputs:
  src:
    src: ./src
    hook: npm run build
    # 这里要根据你打包后的目录
    dist: ./build
  # 这个定义下
  bucketName: my-react-starter
  protocol: https

推送到云端 serverless deploy

使用静态文件托管来部署前端项目

  • 先本地根据项目命令打包好
  • 在云产品中选择静态文件托管
img
  • 直接将上传你打包后的代码
img

在serverless中连接mysql

数据库的准备

使用serverless开发与我们自己使用云服务器服务器ECS不一样的,因为我们不能在serverless上安装软件(我们不能安装第三方的mysqldockerredis)等软件,因此我们在使用serverless开发的时候,如果我们项目中使用到了比如:mysqlredisrabbitMQRocketMQ类的我们就需要自行解决。下面介绍几种方式

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

serverless中连接mysql

本案例只是测试官方案例连接数据库,不涉及什么知识点,根据自身条件选择是否跳过

在函数服务中选择mysql数据库模板来创建数据库云函数应用。注意选择的语音和区域

img

在自己的数据库中创建数据库及数据表

-- 创建数据表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');

打开云函数的代码管理修改数据库的连接配置

img

进入代码编辑界面的函数代码编辑代码

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
}

修改完成后点击部署和测试

img

出现下面界面表示你已经在云函数中连接mysql成功了

img

如果你想在浏览器上测试访问,可以点击触发管理

img

云开发与serverless的区别

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

使用云开发创建一个nest项目

在产品中选择云开发产品

img

创建一个项目,注意点:这里要选择好区域,下次创建了项目,区域不一样,可能项目就看不到

img

使用模板创建

img

查看自己创建应用并且访问

img

使用脚手架的方式创建

全局安装脚手架包官方地址

npm i -g @cloudbase/cli

测试安装是否成功

cloudbase -v

登录

cloudbase login

本地创建项目

tcb new <appName> [template] 
# 比如
tcb new nest-cloundbase nest-starter

选择自己已经创建的环境,如果没有就 创建新环境,这时候会打开浏览器

img

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

npm run dev

部署到线上

npm run deploy
img

在云开发中使用NoSQL

在面板上创建一个NoSQL的数据库,参考地址

img

在项目中安装连接数据库的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的获取地址
img
  • secretIdsecretKey获取
img
  • 点击test用户进入
img

根据文档,我们将插入一条数据(同样先忽视类型检测)

async createAccount(data: any): Promise<any> {
  const res = await db.collection('account')
    .add({
      ...data,
    });
  return res;
}

环境变量的配置

本地开发环境变量的配置

  • 安装依赖包
npm install dotenv
npm install @types/dotenv -D

在项目根目录下创建一个.env的文件用来存储一些敏感信息

PORT=7000

SECRET_ID = AKIDMfCxx2stVYNUx
SECRET_KEY = d3C7pxxxv1VqiMrBHS
ENV = serverlxxim00f1a872
REGION = ap-guangzhou

在应用中使用使用环境变量的值

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
})

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 142,061评论 1 300
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 60,947评论 1 255
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 93,744评论 0 211
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 40,878评论 0 175
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 48,601评论 1 255
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 38,696评论 1 175
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 30,324评论 2 267
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,120评论 0 165
  • 想象着我的养父在大火中拼命挣扎,窒息,最后皮肤化为焦炭。我心中就已经是抑制不住地欢快,这就叫做以其人之道,还治其人...
    爱写小说的胖达阅读 28,921评论 6 229
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 32,459评论 0 213
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,234评论 2 214
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 30,558评论 1 226
  • 白月光回国,霸总把我这个替身辞退。还一脸阴沉的警告我。[不要出现在思思面前, 不然我有一百种方法让你生不如死。]我...
    爱写小说的胖达阅读 24,203评论 0 31
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,088评论 2 213
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 31,460评论 3 204
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,604评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 25,975评论 0 166
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 33,460评论 2 230
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 33,536评论 2 229

推荐阅读更多精彩内容