前端serverless

文章目录

    • 简介
    • 入门体验
      • Serverless Framework
      • Serverless Components
    • 配置koa项目
      • 安装koa
      • 删掉node_modules
      • 改变文件夹配置
    • vue + koa2 + jwt 实现登录

简介

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

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

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

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

入门体验

1、新建函数,选择模板函数
前端serverless_第1张图片

2、高级配置
前端serverless_第2张图片
3、建立触发器,触发函数执行
前端serverless_第3张图片
4、测试和于发布都发布
前端serverless_第4张图片
前端serverless_第5张图片

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网关
前端serverless_第6张图片
前端serverless_第7张图片

配置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 框架
配置文档
前端serverless_第8张图片
前端serverless_第9张图片

删掉node_modules

删掉node_modules减少体积,然后配置层
前端serverless_第10张图片
前端serverless_第11张图片
前端serverless_第12张图片
前端serverless_第13张图片

改变文件夹配置

./src/sls.js

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

vue + koa2 + jwt 实现登录

npm init -y
vue create vuepro

前端serverless_第14张图片
在这里插入图片描述

流程:
1)根据用户名和密码发送请求登录页面
2)服务端验证成功并返回token
3)客户端拿到token存储起来,下次请求的时候在头部带上token
4)服务端再验证token是否过期失效,失效就重新登录,否则返回数据
在这里插入图片描述
前端serverless_第15张图片

源码地址

你可能感兴趣的:(js)