# 云接入和云函数
云接入是云开发平台提供的资源访问服务,开发者通过云接入服务可轻松使用标准的 HTTP 协议访问环境内全部资源;开发者无需使用 SDK 接入即可访问后端云资源。
使用 CloudBase 的云函数,您可以以函数的形式运行后端代码,响应 SDK 的调用或者 HTTP 请求。您的代码会储存在云端,并且在托管环境中运行,无需管理或运维自己的服务器。
云接入功能:
- 独有域名,云开发会为每个环境生成单独唯一的域名
- 标准的 HTTP 协议访问
- 集成请求/响应
- 自定义绑定/解绑域名,可通过自定义域名访问环境服务
云接入优势:通过云接入,开发者可轻松使用 HTTP 服务触发云函数调用,访问后端文件,其他云资源等。
# 课程学习
训练营所给的学习指导:
# 阶段要求
创建一个云函数,使用HTTP触发,集成响应返回html页面。云函数用环境变量设置ip白名单(配置IP:175.24.119.147
到白名单中。),只有白名单内ip才可以正常返回网页,否则返回404。
页面中包含一个文字输入框input再加一个保存的按钮、一个列表增删组,按钮的逻辑无需实现!,分别用于设置任务一中的名字和积极向上的话。原型图如下:
为云函数添加环境变量,环境变量设置:
云函数中读取环境变量代码示例:
See More
exports.main = async (event, context) => {
//云函数入参包含环境变量
let ip = JSON.parse(context.environment).ip;
}
2
3
4
# 本地云开发
WEB云开发项目目录设计:
在静态网站中使用云环境:
See More
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>腾讯云开发</title>
</head>
<script src="//imgcache.qq.com/qcloud/tcbjs/1.10.7/tcb.js"></script>
<body>
<h1>进行本地云开发</h1>
<script>
const app = tcb.init({
env:'所应用云开发环境的环境Id'
});
const auth = app.auth();
console.log(auth.getLoginState());
console.log(app);
</script>
</body>
</html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
注意云函数只会响应安全域名中已有域名所发送的请求,由于上一个阶段已经配置了安全域名,有什么疑问请查看静态网站托管中插件使用
一节。
# 云接入应用:HTTP
相较于SDK访问更加灵活,另外不需要鉴权就可以使用。
# 本地新建云函数
然后我们需要修改cloudbaserc.json
文件,为新增的云函数添加函数名:
See More
{
"envId": "所应用云开发环境的环境Id",
"functionRoot": "./cloudfunctions",
"functions": [
{
"name":"net"
}
]
}
2
3
4
5
6
7
8
9
部署云函数:
部署完成后,我们可以在控制台:云函数中看到此函数。
# 使用云接入
在控制台:云函数中点击函数名称,查看云函数详情。在基本信息
页,点击编辑
,然后在下方云接入路径
中配置云接入。
配置云接入触发路径,可以使用不同于函数名的触发路径。另外也可以选择开启鉴权开关。
我们可以通过https://{你的环境名称}.service.tcloudbase.com/net
,即可测试此云函数HTTP触发效果。
# 作业思路
- 初始化项目,具体操作可看静态网站托管中的
作业思路
这节。 - 参考上文,创建一个新的本地云函数
ip
。实现原型图的功能,代码如下:See More
exports.main = async (event,context) => { // 获取云环境中环境变量IP所对应的值 const ip = JSON.parse(context.environment).ip; // 访问者IP,具体信息可通过返回event查看 const fromIp = event.multiValueHeaders["x-real-ip"][0]; // 如果访问者IP和环境变量中IP相同,则进行集成响应,否则404 if(ip === fromIp){ return { statusCode: 200, headers: { "content-type": "text/html" }, body: ` <body> <div style="text-align: center;margin-top: 5%;"> <input placeholder="名称name" style="margin-right: 5%;"> <button>更新名称</button> <div style="border:3px solid #a9afaf;margin: 5% 10%;"> <p><span style="margin-right: 5%;">欢迎来到lime2019的网站</span><button>删除</button></p> <p><span style="margin-right: 5%;">You can create art and beauty on a computer.</span><button>删除</button></p> <p><input placeholder="名称name" style="margin-right: 5%;"><button>添加</button></p> </div> </div> </body> ` }; }else{ return "404 NOT FOUND"; } }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30 - 参考上文,将本地云函数部署到云端。
- 参考上文
阶段要求
中环境变量配置,将IP配置到环境变量中。 - 开启云接入,允许HTTP触发。(注意将云接入的默认域名添加到安全配置的域名白名单中)
# 补充:集成响应
使用云接入访问云函数,返回集成响应可以参考这篇文档