Serverless初探

前言

serverless，如果百度一下，你会发现一堆的针对于serverless讲概念，讲原理的文章，什么无运维，FaaS(函数既服务)，BaaS(后端既服务)等等，我觉得这些文章写的都挺好，但是看完这些文章后。我只想说道理我都懂了，那我要怎么做呢？这里我就从微信小程序作为切入点，来让我们实实在在的来一把serverless开发

我认为的serverless

微信小程序出现后，我们发现原来我们开发前端应用还可以寄放在别人那里。我们小程序开发完后，只要去开发者平台点下上传就完成了前端部署，我们要做的只是部署后端服务。

但是后端服务运维是一件很麻烦的事情，我们能不能懒一点，把这个后端服务也部署到别人那里，当然有，那就是阿里云，腾讯云。我们要做的只是把我们本地调试好的后台服务部署上去

但是我们能不能更懒一点，就别去部署了，直接就在别人那里开发前端和后端的应用，我们要做的就是按照别人定的规则来开发前后端应用就好，开发完后直接把两个都上传上去就行了。基于这种想法云开发serverless云端一体化就应运而生了。

其实这种想法大大的降低了前端开发人员进入后端开发的门槛，和前端开发人员中所谓的全栈工程师不谋而合。

小程序中的serverless

在微信小程序中我们能非常简单的建立起一个serverless应用，只要在新建项目时候选择小程序云开发即可，如下图

这样新建的项目中除了我们常规的小程序目录以外会多一个cloudfunctions目录，顾名思义就是云函数目录，所谓的云函数可以理解成我们前端开发中调用的接口，也就是后台服务处理函数

有了这个目录后，我们需要去创建一个应用，把这个目录部署上去，很简单，点击微信开发工具左上角第四个图标，云开发

按照引导一直点到开通，给你的应用起个名字，这些做完后右键点击cloudfunctions目录，选择你创建的那个环境，然后点开app.js文件把你的应用ID配置进去。

到这里你们的serverless应用已经建立起来了。可以在云开发控制台工具里看看你的后端服务:日志，数据库，文件存储功能都有

剩下的就是按照微信小程序的规则来进行开发即可，项目本身就自带实例。

函数开发完成后右键点击cloudfunctions下面的对应的函数文件夹比如这里使用实例自带的login函数就是login文件夹，选择上传，这个函数就会变成云函数，可以在云开发控制台的云函数列表里看见，然后就可以在前端代码里通过

wx.cloud.callFunction({
      name: 'login',
      data: {},
      success: res => {
        console.log('[云函数] [login] user openid: ', res.result.openid)
        app.globalData.openid = res.result.openid
        wx.navigateTo({
          url: '../userConsole/userConsole',
        })
      },
      fail: err => {
        console.error('[云函数] [login] 调用失败', err)
        wx.navigateTo({
          url: '../deployFunctions/deployFunctions',
        })
      }
    })

这种方式来调用云函数，具体可以看项目里的官方实例。

调用文件系统，数据库等都有对应的API，可以查看微信官方文档

现在再回过头来看看FaaS和BaaS的概念就会更清晰了，所有的服务都是通过函数来调用，所有的后端都是服务

其他各端的serverless

上面只是说了小程序端的serverless，其他端的呢，比如web端，app端。就我目前来看国内其他各端的云开发serverless云端一体化方案较为成熟的还是Dcloud，它和阿里云和腾讯云都有合作，而且提供了uni-app多端打包方案

可以根据它的官方教程建立serverless云项目，必须要用它提供的开发工具HBuilderX，建立出来的项目目录几乎和微信小程序建立出来的一模一样

然后创建应用，然后右键cloudfunctions选择你的应用

做好上面的步骤，我们来用它开发一个最简单的注册页面

1.建立数据库表

右键点击编辑器里的cloudfunctions文件夹选择"打开uniCloud Web控制台"，在控制台里点击"云数据库"，新建一个表名字就叫userData吧

2.建立云函数

右键点击编辑器里的cloudfunctions文件夹选择"新建云函数"起名字叫login，它会自动生成index.js，修改这个文件代码如下

'use strict';
const db = uniCloud.database() //连接数据库
exports.main = async (event, context) => {
  const collection = db.collection('userData') //获取数据库里的userData表
  const res = await collection.add(event) //接受客户端传来的用户数据,往表里查一条
  if(res){// 状态返回
   return {
    status:'sucess'
   }
  } else {
   return {
    status:'fail'
   }
  }
};

然后右键点击login目录，选择上传部署看编辑器下面控制台提示完成即可

3.做个注册页面

uniapp是基于vue的所以，修改page/index.vue文件代码如下

<template>
 <view class="content">
  <image class="logo" src="/static/logo.png"></image>
  <view class="text-area">
   <view class="title">{{title}}</view>
   <input type="text" v-model="username" placeholder="用户名" />
   <input type="text" v-model="password" placeholder="密码" password />
   <button @click='onButtonClick'>注册</button>
  </view>
 </view>
</template>

<script>
 export default {
  data() {
   return {
    title: '注册页面',
    username:'',
    password:''
   }
  },
  onLoad() {
  },
  methods: {
   async onButtonClick(){
    const { username,password } = this
    const res = await uniCloud.callFunction({
     name:"login",
     data:{
      username,
      password
     }
    })
    console.log(res)
   }
  }
 }
</script>

<style>
 .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
 }
 input{
  display: block;
  border-bottom: 1px solid #f4f4f4;
 }

 .logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
 }

 .text-area {
  display: flex;
  flex-direction: column;
  justify-content: center;
 }

 .title {
  font-size: 36rpx;
  color: #8f8f94;
 }
</style>

其实就是做一个简单的注册页面，重点是onButtonClick方法，通过uniCloud.callFunction调用云函数login，传入用户名和密码

4.调试

点编辑器里的预览会有一个页面

填好信息点注册，然后到uniCloud Web控制台里的云数据库里看一下，表里增加了一条信息

这样一个最简单的注册功能就完成了。

PS：其实像注册/登陆这种常用功能Dcloud已经集成好了，我们直接按照官方文档提供的api来实现就行了

总结

通过云开发serverless云端一体化，我们能像上面那样非常简单的实现业务功能，不再需要考虑这个服务怎么配置，那个服务怎么配置，对于开发人员来说真的很方便了。而且对于前端开发人员转全栈算是提供了一条捷径

不过我暂时还没在dcloud上找到像redis，消息队列等服务调用的文档。不知道以后会不会有