共计 4069 个字符，预计需要花费 11 分钟才能阅读完成。
最近我利用腾讯云云函数（serverless）实现了公众号后盾对接和简略爬虫利用，本着好货色要分享的互联网准则，决定写一篇入门文章，从用云函数搭建集体站点这个案例登程，次要面向苦后端久矣的前端开发人员，简略介绍云函数是什么、能够用来做什么以及如何入手应用它。
更酷的是，如果你和我一起跟着这个案例入手，搭建进去的站点是收费的、保护简略的、全网可拜访的。
鉴于自己编码程度个别，serverless 也是第一次玩，两头有什么讲得不对的中央还请各位大神海涵并指出；如果有些敌人是齐全零根底但对文中提到的货色感兴趣的，也能够留言发问，我会尽可能回答。
那么，让咱们开始吧。
A 云函数是什么呢？
依据腾讯云云函数产品文档（您也能够拜访 https://cloud.tencent.com/doc… 查看文档）的形容：腾讯云云函数（Serverless Cloud Function，SCF）是腾讯云为企业和开发者们提供的无服务器执行环境，帮忙您在无需购买和治理服务器的状况下运行代码，是实时文件解决和数据处理等场景下现实的计算平台。您只需应用 SCF 平台反对的语言编写外围代码并设置代码运行的条件，即可在腾讯云基础设施上弹性、平安地运行代码。
简略说就是如果你以前对服务器常识无所不知，那么当初也不须要晓得了，你能够用你趁手的语言写个函数（比方用 js，懂点 node 就行），函数即是服务（接口），写好间接就能够在任何中央触发调用了，其它的诸如服务器配置什么的都不须要操心。
B 云函数能干什么？
实践上传统后端无能的事儿云函数都无能，但术业有专攻，依据云函数的个性和当下的支流环境，倡议用云函数来搭建小型 web 利用后端、公众号 / 小程序、工具型接口等。
事实上 小程序 推的 云开发 就是基于腾讯云的 serverless 的，包含了云函数、云数据库和云存储。
C 开始应用云函数
要应用腾讯云的云函数首先当然得登录腾讯云。
这里咱们抉择用腾讯云控制台的形式创立、编写和调试云函数，一来面向初学者图形界面更直观，二来集体我的项目没那么简单，控制台足以笼罩常见场景。感兴趣的各位能够自行尝试命令行的形式。
登录后从控制台进入云函数性能页，点击左侧“函数服务”菜单进入函数治理页，点击“新建”新建云函数。
进到新建函数页，看运行环境一栏，作为一个只会 JS 的前端，我毫不犹豫选了 Nodejs；云函数提供了 4 个版本的 Nodejs 供选择，6.10 和 8.9 版本对 async 的反对有瑕疵，12.16 版本绝对太新，稳当起见我选了10.15 版本。
上面有很多有意思的模板能够抉择，明天咱们先选个 Hello World。
而后就能看到生成的代码是这样的：
'use strict';
exports.main_handler = async (event, context, callback) => {console.log("Hello World")
console.log(event)
console.log(event["non-exist"])
console.log(context)
return event
};能够在这编辑代码，但咱不焦急，先点击“实现”实现函数的创立。而后咱们能够看到腾讯云提供了在线编辑、在线调试、查看日志等十分实用且必要的性能。当初咱们进入“函数治理 - 函数代码”从新扫视主动生成的 hello world 代码。
这个函数有三个入参：event、context 和 callback，其中 callback 为可选参数。依据官网的文档：
event：应用此参数传递触发事件数据。
context：应用此参数向您的处理程序传递运行时信息。
callback（可选）：应用此参数用于将您所心愿的信息返回给调用方。在 Node.js 8.9 和 6.10 版本中，均能够应用 callback 来返回。在 Node.js 10.15 及 12.16 中，应用 async 形容的入口函数，须要应用 return 关键字返回，非 async 模式的入口函数，须要应用 callback 入参返回。
理解了这三个入参后就能够开始编写代码了，基本上你在 node 上能干的事这里都无能。不过须要留神的是，云函数是无状态的，不要应用全局变量或者文件写入的形式存储状态，如真有须要，倡议接入腾讯云的另一款产品——对象存储。（语调慢慢有种恰了腾讯云的饭的既视感..）
既然 node 上能干的事根本都无能，那对 npm 包的应用反对天然不在话下。目前云函数运行时曾经事后装好 crypto-browserify、imagemagick、puppeteer、request 等包，require 进来就能够应用。
当然咱们总会须要用到一些没有预装的包，控制台也提供了在线装置依赖的办法。首先在根目录下新建 package.json 文件，而后输出如下配置：
{
"dependencies": {
"koa": "^2.3.0",
"serverless-http": "^2.0.0",
"koa-proxy": "^0.9.0",
"koa-static-server": "^1.5.2"
}
}在“保留”按钮旁抉择上传形式为“在线装置依赖”，而后点击保留，结束后就能看到根目录多了个 node_modules 文件夹。
刚刚咱们 install 的包里，koa 是个 web 框架，搭服务用的，它相当于一个插座，须要什么性能就插什么中间件去实现；koa-static-server 就是一个中间件，顾名思义是负责动态资源服务的；koa-proxy 前面咱们会用它来做接口反代。
serverless-http这个包得特地提一下。失常状况下咱们用 koa 起服务，须要 listen 一个端口，但 云函数是不裸露端口的，serverless-http 这个包提供了在云函数环境应用 koa 的能力。而后咱们敲入以下代码：
'use strict';
const serverless = require("serverless-http");
const Koa = require('koa');
const app = new Koa();
const proxy = require('koa-proxy');
const server = require('koa-static-server');
exports.main_handler = async (event, context, callback) => {console.log('event:' + JSON.stringify(event, null, 4))
app.use(
server({
rootDir: 'dist',
rootPath: '/test_webserver'
})
)
const handler = serverless(app);
return await handler(event, context);
};很简略，先引入依赖包，而后在函数里打印 event 信息（这个不是必须的，但不便调试和查看日志），而后配置动态资源服务，最初用 serverless-http 解决返回。这样要留神 rootDir 是你的动态资源文件夹的名字，rootPath 就填云函数的名称，比方我的云函数叫“test_webserver”，这里 rootPath 就填“/test_webserver”。
当初服务就算写好了，咱们能够用上面的测试工具测试一下，测试事件选“Api gateway”，申请形式“get”，path 临时填“/test_webserver/index.html”，点击“测试”，测试结果显示“测试胜利”，返回后果是“{“statusCode”:404,”headers”:{“content-type”:”text/plain; charset=utf-8″,”content-length”:”9″},”isBase64Encoded”:false,”body”:”Not Found”}”，这是失常的，因为咱们并没有写前端页面嘛。
D 前端工程
前端大家依照本人的爱好用本人趁手的框架写就好，比方用 vue 给女朋友写个电子贺卡什么的←_←。我懒得在本地起我的项目，就用 cdn 引入的形式用 react 简略写了个欢送页，再点“测试”，当初能够看到返回的 html 字符串了。
E 触发器
当然咱们的最终目标是要能公网拜访这个网站，那么如何实现呢？这就要祭出“触发器”了。依据官网文档：云函数不是始终运行的状态，而是在事件产生时由事件触发运行，并且在一次运行的过程中解决这一次事件。so，咱们来试试给刚刚实现的云函数配置触发器。
点击“触发治理 - 创立触发器”，能够看到腾讯云提供和好几种触发形式，这里咱们选“API 网关触发”，留神要勾上“启用集成响应”。对于集成响应，更多的解释能够查阅官网的文档。
创立好后能够就能够看到这个 api 的拜访门路了：
还记得后面配的 rootPath 吧？察看下 api 触发器主动生成的门路，最初一段就是咱们的云函数名。
当初咱们能够拜访到刚刚建好的网站了，只需在拜访门路后加上你的 html 文件名：（您也能够点击文末的 “浏览原文” 查看案例）
https://service-0h6foneu-1254…
其实除了配置触发器之外，云函数还有另外一种调用形式—— Invoke API，这种形式适宜用在函数外部调用的场景，比方有一个生成短链接的云函数，由负责具体业务的接口云函数调用执行它并把生成的短链接返回给前端，这时用 invoke 触发就比用 api 触发器效率更高更优雅。具体就不在这开展讲了，如果大家感兴趣，下次能够独自开一篇文章来说。
F 接口和接口反代
到当初为止，咱们曾经实现了一个动态站点，你能够纵情的在外面加页面、加特效，duang~ 而后链接丢给你们家小 / 老可恶拜访，给她 / 他一个 surprise 了。
然而也有的敌人并不满足于做一个动态站，想通过减少接口给网站接入一些诸如搜寻、图片格式转换、长连贯变短链接等服务，下一篇（如果有人想看的话 -_-）咱们将跟大家一起用云函数一步步实现一个本人的接口并且给明天建好的这个站点配置接口代理，让它可能拜访到咱们的接口，提供一些有意思的服务。
