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 Framework 是Serverless公司推出的一个开源的Serverless 应用开发框架。
• Serverless Framework是由 Serverless Framework Plugin 和 Serverless 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

选择对应的模板

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上安装软件(我们不能安装第三方的mysql、docker、redis)等软件，因此我们在使用serverless开发的时候，如果我们项目中使用到了比如:mysql、redis、rabbitMQ、RocketMQ类的我们就需要自行解决。下面介绍几种方式

1. 自己有一台备用的云服务器ECS，我们在上面安装了需要的软件，对外提供了IP或者域名，在安全组中开放了端口号以供我们在serverless中使用。其实如果你自己有云服务器ECS可能就不会考虑使用serverless来开发了
2. 单独使用第三方付费或者按量收费的数据库，比如:
   • 阿里云的云数据库RDS MySQL
   • 腾讯云的数据库云数据库
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 是无服务器应用框架，提供将云函数SCF、API 网关、对象存储 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  [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();

关于获取secretId、secretKey、env的地址

• env的获取地址

img

• secretId 和secretKey获取

img

• 点击test用户进入

img

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

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

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