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

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

Web 函数管理

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

2022年你还不会serverless?看看这篇保姆级教程(下)_第1张图片

用户发送的 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?看看这篇保姆级教程(下)_第2张图片

使用前提

  • 需具有可执行权限,请确保您的 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?看看这篇保姆级教程(下)_第3张图片

常见 Web Server 启动命令模版

2022年你还不会serverless?看看这篇保姆级教程(下)_第4张图片

serverless fromework及控制台部署

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

1. 控制台部署

部署koa2管理端接口

2022年你还不会serverless?看看这篇保姆级教程(下)_第5张图片
2022年你还不会serverless?看看这篇保姆级教程(下)_第6张图片
2022年你还不会serverless?看看这篇保姆级教程(下)_第7张图片
2022年你还不会serverless?看看这篇保姆级教程(下)_第8张图片

官方demo https://github.com/tencentyun...

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

2022年你还不会serverless?看看这篇保姆级教程(下)_第9张图片

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

选择对应的模板

2022年你还不会serverless?看看这篇保姆级教程(下)_第10张图片

部署上线

serverless deploy

2022年你还不会serverless?看看这篇保姆级教程(下)_第11张图片
2022年你还不会serverless?看看这篇保姆级教程(下)_第12张图片
2022年你还不会serverless?看看这篇保姆级教程(下)_第13张图片

serverless.yml配置详情

https://github.com/serverless...

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

2022年你还不会serverless?看看这篇保姆级教程(下)_第14张图片

测试部署的项目

2022年你还不会serverless?看看这篇保姆级教程(下)_第15张图片

删除部署的项目

2022年你还不会serverless?看看这篇保姆级教程(下)_第16张图片

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

vscode上安装插件

2022年你还不会serverless?看看这篇保姆级教程(下)_第17张图片

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

2022年你还不会serverless?看看这篇保姆级教程(下)_第18张图片

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

远程拉取代码

2022年你还不会serverless?看看这篇保姆级教程(下)_第19张图片

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

2022年你还不会serverless?看看这篇保姆级教程(下)_第20张图片

WebIDE创建云函数实践

2022年你还不会serverless?看看这篇保姆级教程(下)_第21张图片
2022年你还不会serverless?看看这篇保姆级教程(下)_第22张图片

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

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

  • 先本地根据项目命令打包好
  • 在云产品中选择静态文件托管

2022年你还不会serverless?看看这篇保姆级教程(下)_第23张图片

  • 直接将上传你打包后的代码

2022年你还不会serverless?看看这篇保姆级教程(下)_第24张图片

在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数据库模板来创建数据库云函数应用。注意选择的语音和区域

2022年你还不会serverless?看看这篇保姆级教程(下)_第25张图片

在自己的数据库中创建数据库及数据表
-- 创建数据表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?看看这篇保姆级教程(下)_第26张图片

进入代码编辑界面的函数代码编辑代码
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?看看这篇保姆级教程(下)_第27张图片

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

2022年你还不会serverless?看看这篇保姆级教程(下)_第28张图片

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

2022年你还不会serverless?看看这篇保姆级教程(下)_第29张图片

云开发与serverless的区别

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

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

在产品中选择云开发产品

2022年你还不会serverless?看看这篇保姆级教程(下)_第30张图片

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

2022年你还不会serverless?看看这篇保姆级教程(下)_第31张图片

使用模板创建

2022年你还不会serverless?看看这篇保姆级教程(下)_第32张图片

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

2022年你还不会serverless?看看这篇保姆级教程(下)_第33张图片

使用脚手架的方式创建

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

npm i -g @cloudbase/cli

测试安装是否成功

cloudbase -v

登录

cloudbase login

本地创建项目

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

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

2022年你还不会serverless?看看这篇保姆级教程(下)_第34张图片

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

npm run dev

部署到线上

npm run deploy

2022年你还不会serverless?看看这篇保姆级教程(下)_第35张图片

在云开发中使用NoSQL

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

2022年你还不会serverless?看看这篇保姆级教程(下)_第36张图片

在项目中安装连接数据库的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?看看这篇保姆级教程(下)_第37张图片

  • secretIdsecretKey获取

2022年你还不会serverless?看看这篇保姆级教程(下)_第38张图片

  • 点击test用户进入

2022年你还不会serverless?看看这篇保姆级教程(下)_第39张图片

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

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
})
我是程序员小月,更多干货在公号「前端进阶之旅」分享

你可能感兴趣的