准备工作
1. 拥有 腾讯云账号。
2. 务必创建云开发环境,获得 环境 ID。
3. 安装 Node.js。
4. 安装 Cloudbase CLI。
npm install -g @cloudbase/cli
说明:
sudo npm install -g @cloudbase/cli
步骤1:创建初始项目
使用命令行创建目录
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
1. 创建
my-cloudbase-app
文件夹。2. 在此文件夹下,创建两个空白文件
index.html
与 cloudbaserc.json
。以下是
index.html
内容,后续我们启动服务器后尝试登录云开发,如果成功,那么产生一个弹窗:<html><head><meta charset="utf-8" /><script src="https://imgcache.qq.com/qcloud/cloudbase-js-sdk/1.5.0/cloudbase.full.js"></script><script>const app = cloudbase.init({env: "您的环境ID", // 此处填入您的环境IDregion: "环境所在地域" // 如非上海环境,请显式指定地域,详见:https://docs.cloudbase.net/api-reference/webv2/initialization#%E5%9C%B0%E5%9F%9F});app.auth().anonymousAuthProvider().signIn().then(() => {alert("登录云开发成功!");});</script></head><body>Hello Cloudbase!</body></html>
以下是
cloudbaserc.json
的内容:{"envId": "此处填入您的环境ID"}
步骤2:添加安全域名
说明:
这里我们把
localhost:3000
加入到安全域名中,让此域名下的页面可以使用 SDK 访问云开发服务。实际端口可能有所不同,以实际端口为准。步骤3:开启匿名登录
步骤4:开启本地开发环境
在项目根目录运行:
npx serve
即可打开一个本地静态服务器,然后访问
http://localhost:3000
。说明:
如果 SDK 成功使用匿名身份登录,那么您应该可以看到一个弹窗。
第 5 步(可选):使用云开发部署静态页面
1. 开通 静态网站服务。
2. 在项目根目录下运行以下命令,上传网站文件:
cloudbase hosting deploy index.html
说明:
在运行
cloudbase hosting deploy
之前,请先登录命令行工具:cloudbase login
3. 使用
_envId_-_instanceId_.tcloudbaseapp.com
访问您的网站,其中 envId
与 instanceId
是您 CloudBase 环境的标识符。详情请参见 静态网站托管。