前端serverless

简介

写一个服务端的程序，只要写业务函数就好，然后把你的业务函数上传到云函数调用，云服务就可以帮你启动你的服务端程序，并且运行业务函数，在整个开发过程里面，都感知不到服务器的存在，只需要写一个函数并且上传到云平台。就是屏蔽服务器细节。就是把多个业务复用的东西下沉，屏蔽细节

只管写服务，不需要服务器和运维，在云端写函数，我可以调用它

特点：不需要操心运维、架构的事情（缩短开发周期、减少出错概率、上手难度低）；渐进式

在前端的应用：微信小程序云函数、腾讯云、谷歌云、阿里云

入门体验

1、新建函数，选择模板函数

2、高级配置

3、建立触发器，触发函数执行

4、测试和于发布都发布

Serverless Framework

Serverless Framework 是业界非常受欢迎的无服务器应用框架，开发者无需关心底层资源即可部署完整可用的 Serverless 应用架构
官方配置过程

// 安装Serverless Framework
npm install -g serverless
npm update -g serverless
serverless -v  或者 sls -v

Serverless Components

支持多个云资源编排和组织的场景化解决方案，主要基于客户的具体场景，如 Express 框架支持、网站部署等
面扫码登录
API密钥管理

// .env
TENCENT_APP_ID=
TENCENT_SECRET_ID=
TENCENT_SECRET_KEY=

部署

// sls --debug
serverless deploy 进行云函数的部署部署
sls deploy --debug 命令查看部署过程中的实时日志信息

自动创建函数服务和api网关

配置koa项目

安装koa

npm init -y
npm i --save koa koa-router
mkdir  serverless.yml
mkdir  sjs.js

// serverless.yml  直接复制过来
# serverless.yml
org: orgDemo # (optional) serverless dashboard org. default is the first org you created during signup.
app: appDemo # (optional) serverless dashboard app. default is the same as the name property.
stage: dev # (optional) serverless dashboard stage. default is dev.
component: koa # (required) name of the component. In that case, it's koa.
name: koaDemo # (required) name of your koa component instance.

inputs:
  src:
    src: ./ # (optional) path to the source folder. default is a hello world app.
    exclude:
      - .env
  region: ap-guangzhou
  runtime: Nodejs10.15
  apigatewayConf:
    protocols:
      - http
      - https
    environment: release

// sjs.js
const Koa = require('koa')
const KoaRouter = require('koa-router')
const path = require('path')

const app = new Koa()
const router = new KoaRouter()

router.get('/', async (ctx) => {
    ctx.response.type = 'text/html';
    ctx.body = 'hi koa'
})

app.use(router.allowedMethods()).use(router.routes())

// don't forget to export!
module.exports = app

// 部署
sls --debug

官网部署 Koa 框架
配置文档

删掉node_modules

删掉node_modules减少体积，然后配置层

改变文件夹配置

./src/sls.js

// serverless.yml
inputs:
	src:
		src: ./src       // 可以这样配置

vue + koa2 + jwt 实现登录

npm init -y
vue create vuepro

流程：
1）根据用户名和密码发送请求登录页面
2）服务端验证成功并返回token
3）客户端拿到token存储起来，下次请求的时候在头部带上token
4）服务端再验证token是否过期失效，失效就重新登录，否则返回数据

源码地址