Web 快速开始
准备工作
- 拥有腾讯云账号；
- 务必创建云开发环境，获得 环境 ID；
- 安装 Node.js；
- 安装 Cloudbase CLI。
npm install -g @cloudbase/cli
注意
如果 npm install -g @cloudbase/cli 失败，您可能需要修改 npm 权限，或者以系统管理员身份运行：
sudo npm install -g @cloudbase/cli
第 1 步：创建初始项目
- MacOS 或 Linux
- Windows
使用命令行创建目录 my-cloudbase-app，和其下的两个文件。
mkdir my-cloudbase-app && cd my-cloudbase-app && touch index.html && touch cloudbaserc.json
该目录下存在两个文件：index.html 与 cloudbaserc.json
├── cloudbaserc.json
└── index.html
- 创建
my-cloudbase-app文件夹 - 在此文件夹下，创建两个空白文件
index.html与cloudbaserc.json
以下是 index.html 内容，我们尝试登录云开发，如果成功，那么产生一个弹窗：
<html>
<head>
<meta charset="utf-8" />
<!-- 可前往npm源查看当前最新版本 https://www.npmjs.com/package/@cloudbase/js-sdk -->
<script src="https://static.cloudbase.net/cloudbase-js-sdk/${version}/cloudbase.full.js"></script>
<script>
const app = cloudbase.init({
env: "您的环境ID", // 此处填入您的环境ID
});
app
.auth()
.anonymousAuthProvider()
.signIn()
.then(() => {
alert("登录云开发成功！");
});
</script>
</head>
<body>
Hello Cloudbase!
</body>
</html>
以下是 cloudbaserc.json 的内容：
{
"envId": "此处填入您的环境ID"
}
第 2 步：添加安全域名
登录云开发 CloudBase 控制台，在安全配置页面中，将域名添加到 Web 安全域名中。
提示
这里我们把 localhost:5000 加入到安全域名中，让此域名下的页面可以使用 SDK 访问云开发服务。
第 3 步：开启匿名登录
请参考：开启匿名登录授权
第 4 步：开启本地开发环境
在项目根目录运行：
npx serve
即可打开一个本地静态服务器，然后访问 http://localhost:5000
提示
如果 SDK 成功使用匿名身份登录，那么您应该可以看到一个弹窗。
登录成功后，便可以访问和使用云开发的各类资源，详情请参看 Web SDK 文档
第 5 步（可选）：使用云开发部署静态页面
- 开通 静态网站服务
- 在项目根目录下运行以下命令，上传网站文件：
cloudbase hosting deploy index.html
注意
在运行 cloudbase hosting deploy 之前，请先登录命令行工具：
cloudbase login
- 使用 envId-instanceId.tcloudbaseapp.com 访问您的网站，其中
envId与instanceId是您 CloudBase 环境的标识符。
详情请参考静态网站托管相关文档