【技术创作101训练营】慧响源创库 | 玩转Serverless云函数与Webify Web云部署原创

大家好，今天呢，这是讲一下这个关于腾讯云啊，Serveless和WiFi的一些这个小的使用啊，以及这个呃相关的这个个人的一些感受啊，其实这个视频技术本身不重要啊，重要的是它这个呃一些体验，还有一些在根植于云的这种啊呃，应用的一些耳目一新啊，接下来啊，呃，请各位看一下这个serverless和这个web啊结合起来对用的这个体验是什么样的，我们可以看一下啊，这个我们可先新建一个这个S的一个后台啊，我们今天的目标是啊，先先搞一下啊，先把第一步给做了啊，我们先把第一步给做了，腾讯云这已经部署好了啊，我们可以在这新建啊，在函数服务这新建模。

主板创建里头有一个Q2啊，说到这个Q2函数啊，然后就是这个计算，然就是默认的，咱们今天晚上就玩一下而已啊，不需要不需要不需要捣鼓一下别的，就是像这个免健权，就是说如果说你要是跨站请求的话，他肯定是要做这个HTTPHTTP的请求的host这个健全啊，你才能保证你是你自己网站发过来，而不是说是一个异地攻击这种啊服务发过来的啊，创建的这个core啊，已经已经有了这个函，这个sless函数啊，我们可以打开啊，腾讯云这个sless它是用的这个马云的cloud studio啊，其实就是Vs code的网页版啊，我们可以看它这个结构，因为cloud本身就是not JS啊，它一个原生的not JS这种啊后端啊，所以说呃，还是比较有意思的啊这个嗯，它这个。

东西简单就简单在只要在APP里JS啊，写出它的一些所有请求就可以了啊get post方法就行了，好像可以看到它已经有默认的啊，默认的这个hello。路径下的一个请求，它返回了一个字符串啊啊呃，这个时候已经其实它因为是已经启动了嘛，所以说我们可以啊，我们单独再开一个窗口吧，这样的话方便一点啊啊，它是有一个这个。他是已经给我们一个地址了啊。哦啊，因为我这是新号啊，腾讯云送我几个优惠券啊，为了为了今天这直播开了一个开了一个新号啊。哦，对，这个。它有一个访问路径啊，我们访问的时候，可能你去访问现在是一个这个，呃，比较简单的一个这个。

呃。这个这个欢迎页面啊，它代码里头是给了一个hello嘛，是吧，我们可以看到啊，如果说访问hello的时候，它会返返回一个message，呃，我们在postman里头也可以去刷新一下啊，这个时候发过去其实就是一个这个刚才我们可以看到的那个。这三串啊，这个就是非常简单啊，非常简单，我们可以看到啊，这是刚才原来的啊，原来的内容啊，其实就是这个。页面上啊，这个它的欢迎页啊。这个欢迎页其实是可以改的，在这里头嘛，有一个东西啊，我没有刚才因为我啊我我就现在可以看到啊，因为刚才我改过一次了，我回退之后它显示未部署嘛，这个时候我可以部署一下啊，部署完之后我们可以访问一下。啊，这个时候还是原来的页面啊，我们可以改一下啊，改一下内容。我把改成我刚才改的内容，然后抬头也改一下吧，啊浪的话这一次，然后。

你好你好啊，我们保存了一下啊，保存完之后啊，这个时候就这边会显示一个未部署的状态啊，然后我们可以点一下部署啊，这个时候就已经开始启动部署了，嗯。部署还是挺快的啊，这个因为它是一个云函数嘛啊这个啊，所以说这个时候发刷新一下啊，这个就是已经改成了我们自己想要的那个东西啊，这还是比较简单的，这个没什么没什么没什么没什么问题的啊呃。然后。这个地方就POS请求这样也是啊，我们可以改成，嗯，改完之后也是未部署啊，部署一下就行了。

相当快，这个比起传统的建站模式的话是相当快的，你看部署成功了，我们可以这个时候我们再用postman啊，去send一下。那我们可以看到它已经改成了这个，呃，Hollywood啊。诶，这个是当时记录了一下这个关于有一个坑啊，关于这个onfi的这个坑啊，我们待会儿可以复现一下这个这个bug啊，我们现在就可以先写一下这个后端啊，前端的话我可以先稍微等一下啊，下一代的这个外部框架啊。这个这个都是有，这是一个比较简单的这种，好，我们这边就可以自己先写一个啊，我们可以照葫芦画瓢啊啊。这样的话啊，现在是未部署，看下能不能部署成功啊，咱们就是照葫芦画瓢写一个啊，啊部署成功了啊，我们可以看一下这个程序到底现在。

我们写的这玩意儿炮请求是可以的啊，我们可以新建一个。啊，可以的啊，这个照葫芦画瓢是成功的啊，如果说不是，如果我们换成了get会怎么样呢？Masterlolo啊，这个是相当正常的反馈啊，正常我们现在是需要这个呃，Post请求去，呃拿到一个这个呃。数据啊，拿到一个这个呃，请求传过来的东西啊，这个时候我们怎么写呢？其实就是很简单啊，拿了request body，然后去打印一下啊，打印之后我可以我们直接我们直接把message给返回回来，可以直接返回回来，这个其实就是很简单的啊，就是我传了一个POS请求过来之后，我又。打印到日志里头，然后又并且返回给这个，呃，用户啊，这个相当简单一个东西啊，我先部署一下。

我先可以发送一下，现在是发送之后，Status是个什么东西都没有的东西啊，嗯，随便加一点，嗯。因为它是在body里头，所以说我们需要在body里头写东西，我们可以在这里头写个Jason串啊，这样，然后我们send一下诶。我们发现，我们发现他好像还是返回了一个这个status未成年人，我们，哎，我们。发送了日志的，所以说我们可以去调用一下它的日志是什么样啊，一直在这个函数管理里头再写这个东西嘛，是吧，函数代码，函数管理函数代码，其实这有一个日志查询啊，我们可以点进日志查询，我们可以发现刚才我们调用的所有字请求都会在这里头有一个相关的日志啊，无论你说是有有有有没有说是用过这个log啊，它都会打一次日志，相当于只要有用户使用过这个云函数，它都会有一个日志生成啊，这个还是这也是他的这个云函数的一个思想，就是呃，在用不用的时候，它是不在不在那个。

呃。不再启动的啊，它是只只只有只有在这个调用的时候，它才会这个，呃，调一下啊起一下啊，有一个日志的，我们可以看到刚才这里有一个get的方法啊，就是我我可能刷新了几次这个页面吧。然后还有那个用postman get调用了几次，我们可以看到这一个，呃，云函数的这个分配的内存是512，只用了13.7啊，还是挺小的，还是挺小小的，不能再小，诶，Onfi啊，这个其实就是这篇文章所写的啊，DEMO打印的是onDeFi啊，为啥呢？是吧，就是这个玩意儿啊，因为我们就是这个腾讯云，它其实是用了一个这个特别简单的一个框架，就是就是简单到就是只需要只是让你用get方法去测试一下，所以说它并没有啊，就是引用最基本的一些这个你不post请求的解析的一些插件，它没有用这玩意，所以说我们需要自己去引一下啊。

啊，这个地方我们就需要改一下这个我们引的这个工程的一些这个包啊，这个包的话，我们就先按照我写的这篇这个文章，我们可以做一下啊，我这就懒了，自己在琢磨了啊，啊首先把这三个给删除啊，因为我们需要改这个package了嘛，所以说删除是最稳妥的啊，当然不删也行。啊，删掉之后，删了之后我们可以先在APP里引入这个组件啊，这个APP组件啊，我们可以看到啊，其实其实就是跟着他们写就行啊，这个地方就是引入了Co，引入了Co的路由，引入car sent fair啊，我们再可以引入一下car body pressure啊pressure啊这个东西啊，然后保存一下，然后我们可以看下啊，再修改一下PU user在这个东西啊，这个东西其实就是把这个再引进来而已啊，我们可以啊直接复制吧，我就我就懒得完了，懒得再说了啊，就这一行代码啊，其实也没别的啊，然后保存一下。

其实这个就是相当于把这个body part t啊这个东西给拿进来而已啊，也没别的啊。然后最后呢，就是122122艾啊，幺二艾艾进这个package里头啊，我们就待会儿我们可以看一下这个这个文件会有一个变化啊，这个地方我们可以跟Vs code的一样啊，打开终端，然后这个地方记着啊，它所在目录是src目录，所以说它默认的是它这个工程的这个靠DEMO录，所以说我们要CD向src进去啊。就是要在package这个文件下啊来执行。

这个young and Co brother啊。啊，这个时候Yan啊，我们都知道young a的功能就是加了这个包啊，我们可以看到这个地方就加了这个包了，加了这个包的同时呢，还能这个，呃，把这个not model还有yalo啊都给。对对，生成出来啊，这个时候我们可以看到它已经完全的把这个包给加了进来了啊，安装好了啊，对吧，依赖是没什么问题了啊。啊，保存部署完我们再测试一下啊，这样的话我们可以就是说现在是未部署状态啊，我们这都保存了，我们可以现在部署一下啊，又有又有代金券来了，这个新用户还真是还不少啊，给给的代金券还是挺多的啊，还数已经部署成功了，再看一下posman，再发一下这个POS请求啊，现在这个POS请求会是怎么样的？诶我们可以看到诶，他正常返回了我们这个message的结果啊，它是一个杰森串DATA10月27，就是我们这边打的是27这个地方，我们可以看到它现在已经是8.01了。

啊，但是现在还是八点的日志，我们可以再刷新一下，它的这个日志刷新确实啊，你看我们可以看到啊，这个08:01的日志刚刚打出来啊，它这个日志的话还是确实会慢一点啊，当然因慢半分钟到一分钟左右，说是这个怎么说呢，这个东西有利就有弊嘛，这个东西本身就是一个为了这个呃，节省资源，节约效率的这个东西啊，这个东西本身帮帮你节约了资源啊，节约了金钱啊，它必然有一些东西，它会这个慢一点，但是这像我们这种小的这种程西，其实无所谓的啊，其实无所谓的，这样的话我们可以看到啊，整个这个post请求这个写法是相当简单啊，这已经是其实已经把这个post请求完全写完了啊，完全写完了，那这个时候我们就需要写一下前端。

这个意思啊。嗯，这下的功夫基本上就是在下包啊，这个其实也没别的东西啊，下各种包哦，好了可以尝可以，那我们可以看一下这个，现在我是刚才这个命令呢，其实后头加了个点，就相当于在本本。就本目录做这个，呃，Create react APP这个操作啊，然后它会在这个目录下生成这个not model的依赖文件，PU的一些这个一依赖文件，这个S啊S我们可以看到最简最简单的这个就是我们经常看得到的啊，这个act的那个本体啊，React的本体。因为已经记起来了啊，这个这个就是很很很让人令人啊，比较非非常常见的那个那个activity页面啊，嗯，接下来就是1SD，这样我们可以看新建个终端。

啊，这已经加进去了啊，后面其实就是替换原生react的一个操作啊，就是啊有了诶，但是这个东西并没有引入啊。在文件底部引入这个SD的CSS啊，就在这个APP。A啊，我们久违的这个直接复制粘贴了，嗯，咱不管了，Form。Is not different，因为我们没有引入。嗯。不知道是不能正常啊，可以正常发挥，但是。相当难受啊，这个相当难受，这个这个这个简直要命了啊，这个还有一个我看一下咱们咱们至少美化一点吧，啊，至少美化一点。啊，塞没用啊，我们可以塞，可以归一啊，这个时候对了啊，这个时候才对啊。

哎，有点用，这个地方是有点儿用。Layout之间是可以用。哎，就是一个这么简单的东西，哎。啊，你这个。我们选择这个吧。刚才我打了半天没打出来的AX iOS这个这个我们先122的吧，然后工程里头用一般都啥了，我这个。突然突然一下子单页面突然不会写这个post，请求来一个吧。如果没记错，应该是这么写啊，没报错，没报错。

啊，这个地方我们可以看到那个啊，是我们这边写的有问题，我人傻了，这个地方因为我们不是本地的啊，我们需要把这个。全部给拷过来啊。我人傻了啊，是我，是我的，是我的国，是我的国啊。说到了一个。错误。什么错误呢？Access。To htmlil htp request，这个from这个，然后有一个cos啊，Response这个request't access control啊，这个其实就是这个叫做跨站攻击的一个保护啊，这个其实是一个跨站攻击的保护啊，默认是不会开启这个跨站的访问，要这个需求的，如果说你是需要在这个啊里头允许所有跨站的请求的话，那么你需要在这个，嗯。

后台的服务器里头单独设置一些header啊，就是这个错误里头所提到的这个access control啊，这个header要设置成一个，呃，就显性的一个标识说是是否是全域请求都同意，或者说是一个指定的那个host。与请求啊，都同意后，其实是给了一个这个相对来说有个比较简单的方法啊，需要我们在这上头加一个这个啊，我们这里是相当于我们统一了。啊。这个。这就是origin，这就刚才那个提示错误的这个位置，我们设置了一下这个请求啊，它是可以接这个所有请求的，然后接的所有请求的头类型是有这些。啊，这个好像是不需要无所谓的，然后还有就是所有接可以允许接这个请求的，这个方法是哪些啊，啊这时候没有部署，我们现在再部署一下。

啊，好了，部署成功了啊，我们可以先访问一下，访问是成功的啊，然后我们再访问一下本地。这个密码是多少啊，123456678啊啊，我们可以看到其实是有这个200返回了啊，在网络里头我们也可以看到这个是有一个comment返回的啊。是刚才我们这个位置的这个，呃，云函数的位置啊，云函数的位置啊，Partd remember remember等于true user nameme是test啊响应呢，我们也可以看到啊，就是我们设置的好的这个返回的这个呃，模式，它模式就是我们前头加了个status，然后啊，后面包了个message message返回了刚才用户提交的所有信息啊，啊这个其实就是我们刚才这个东西返回的啊。

那我们可以看到本地接收的一个请求啊，这是远程发回来的所有东西，这个日志也有打出啊，42分的时候我们调用了两次啊，React本身有一个预检机制，所以说它有一个预检这个东西是不是，呃，可以跨域访问啊，这个所以说它会先调用一次，然后我们后面才是真正的调用啊，所以说它相当于有两次调用，这个其实就是我们最简单的一个啊，前后端访问的一个应用的这个实例啊，这相当简单，假如说我现在是需要一个就是发布的状态啊，我这个东西编完了，我需要生产去发布了，那这个这个时候我们其实可以可以使用这个腾讯的外部应用托管啊，我们可以看它可以托管东西还是挺多的，包括一些这个外部应用，包括搭建网站，包括货物端服务，都，其实它是一个相当于一个，也是一个轻量化的一个，呃，虚拟主机吧，这种虚拟主机相对于这个普通的这。

个服务器来说的话，部署起来更快捷一些啊，所以说我们现在是用它做一个这个相当于它是一个前端。啊，调用后端啊，这个一个走通的一个逻辑啊，我先绑上我的马云啊，看一下啊，这马云这个仓库还是挺快的，然后我们这个时候他先绑上了，然后还这一接下来呢，我是需要这个马云这边我需要创建一个仓库提交一下。就我们可以看到刚才那个。页面上已经有了啊，这个是这个。创建的仓库的内容，那我们这边新建应用的时候，我们可以在刷新一下啊，我们可以看到第一个就是几秒前更新的导入啊。啊，他检测到这是react JS了啊，应该是啊，所以说这些东西都可以自己为什么是啊，这个无所谓了啊，然后我们可以直接点击部署应用，这个部署时间的话，我因为。

Verify这个东西还是挺新的啊，我也是，呃，前两天啊，部署应用中啊，已经已经构建完成了，开始部署了。不过没办法，这个毕竟是这个云部署，这个不好说它，呃，这种就是根植于云的这种应用会有多慢啊，这个不好说，这个取决于它所分配的资源的硬件情况，这个真不好说啊，我们可以看到它这个部署其实是一个docker啊，这个也可以看到这个基础设施啊，云的基础设施，Docker在这个虚拟化中，这个应用的情况还是比较普遍的。啊，发布成功了，正在下发应用的CDN，在此期间可能会出现404，我们可以看一下它这个WiFi，其实就是相当于他把你自己的这个。

仓库的静态的这个前端啊。就是现代化的前端拉过来之后呢，你根据你所配置的那个环境的这个设置啊，然后做一些这个。就构建运行这个操作啊，配置完之后呢，做这个呃部署啊，部署完之后呢，就可以呃，给你这一个222级域名吧，就是好几级了，反正也是，然后你就可以通过这个域名去访问，就是跟我们本地的这个react这个。这个这个应用是一样的啊，测试应用是一样的，其实这个相当于来说的话，虽然说这个应用非常非常简单，就是一个表单，然后提交到一个cos请求的CO2的服务器上，但是它本身这个应用其实就是完全根据于在云上的啊，完全是一个云上的一个这个应用啊，我完全没有说是，就是在我的开发过程中跟我交互的只有这个，呃，我本地的开发机和这个腾讯云的这个服务，我其他顶多多了一个仓库，这个仓库啊，现在腾讯云的webfi是支持这个，呃，马云就get，还有这个GI lab和GIHUB啊，除此以外呢，其实就不需要我去配置什么服务器啊，搭建什么环境啊啊，这些都不需要管啊，所以说就相当方便，这个其实就是完全是。

生长在云上的应用啊，我们可以看到这个已经发了一个请求啊，但是我们发现好像是有点慢。啊，好像是有点慢的啊。但是这个是已经这个测试成功了，但是我感觉webfi这个比较有意思的地方就是在于，呃，它的这个日志还是记录的特别少的啊，所以说这是也是他的一个缺陷嘛，但是我个人觉得前端这种东西其实没必要记日志嘛，所以说日志这种东西完全扔给后端就可以了，是吧啊。

我们可以看一下扣二后端啊，这个是已部署的状态啊，我们可以看到TEST3啊，今天呢，其实是一个从零起步啊，虽然说这个东西非常简单啊，非常简单就是一个演示的过程，但是啊我们可以感受到啊，这个未来的云上的应用开发，这个其实是一个。非常让开发者啊舒服的一件事，我这个仓库呢，本身是一个这个公开仓库，这个仓库本身我是不会删的。啊，我们可以看到哈，刚才发第一遍的时候是确实是特别慢的，但现在发第二遍了啊，我们可以看到本地接收到这个远程请求啊，这个东西还是接收的特别快啊，云函数这一块的话，还是就是有一些这个忽快忽慢的情况在，但是就是对于它本身是一个新事物，包括一个它的这个反应的这个呃程度。

跟它所承载的这个服务的重要性来说的话，其实这已经是够用的啊，毕竟非常非常重要的服务，你包括金融的系统的服务，它肯定不会放在这种云函数上啊，它还是要放在一些这个硬件服务器上去做配置，那么这个今天就先到这儿啊，咱们这个未来呢，如果说有什么机会呢，我们可以也可以在呃下面啊这个共同交流学习。