Web 应用快速开始
通过本指南,您将学会如何使用云开发构建和部署 Web 应用,包括静态网站、动态网站、SSR 等多种应用形式。
🌟 云开发 Web 应用的优势
- 🚀 快速部署:一键部署到全球 CDN
- 🔒 安全可靠:内置身份认证和权限管理
- 📊 数据管理:云数据库和云存储
- ⚡ 高性能:全球加速和智能缓存
- 💰 成本优化:按需付费,无需维护服务器
📋 准备工作
在开始之前,请确保您已完成:
- 开通云开发环境:立即开通
- 安装 Node.js:下载 Node.js(建议 LTS 版本)
- 安装 CLI 工具:安装 CloudBase CLI
🚀 第 1 步:使用官方模板(推荐)
1. 选择技术栈
我们提供多种主流框架的模板:
- React + Vite:cloudbase-react-template
- Vue + Vite:cloudbase-vue-template
2. 克隆模板项目
以 React 模板为例:
# 克隆项目
git clone https://github.com/TencentCloudBase/awesome-cloudbase-examples.git
# 进入项目
cd awesome-cloudbase-examples/web/cloudbase-react-template
# 安装依赖
npm install
3. 配置环境
- 配置环境 ID:
将
src/utils/cloudbase.js
中的ENV_ID
替换为您的环境 ID
// src/utils/cloudbase.js
const ENV_ID = 'your-env-id'; // 替换为您的环境 ID
- 配置部署域名:
将
vite.config.js
中的 base 路径替换为您的云开发环境域名
// vite.config.js
export default {
base: '/react-temp/', // 自定义根路径,部署后通过 $ip/react-temp/ 访问
// ... 其他配置
}
🔧 第 2 步:配置安全域名
在使用云开发 Web SDK 之前,需要配置安全域名:
登录 云开发控制台
进入「环境」>「安全配置」
在「Web 安全域名」中添加您的域名:
本地开发:
localhost:3000
、127.0.0.1:3000
生产环境:您的实际域名
安全域名说明
只有在安全域名列表中的域名才能使用云开发 Web SDK,这是为了保护您的数据安全。
🎯 第 3 步:开启身份认证
为了让用户能够登录,需要开启匿名登录:
- 在云开发控制台进入「环境」>「登录授权」
- 启用「匿名登录」
- 保存配置
🚀 第 4 步:本地开发
使用模板项目
# 启动开发服务器
npm run dev
项目将在 http://localhost:5173
启动(端口可能不同)
🚀 第 5 步:部署到云开发
方式一:使用 CLI 部署(推荐)
- 构建项目:
npm run build
- 登录 CLI:
cloudbase login
开通静态托管: 在云开发控制台开通「静态网站托管」服务
部署应用:
# 部署构建产物到静态托管
cloudbase hosting deploy dist -e your-env-id
方式二:控制台手动上传
构建项目:生成
dist
目录上传文件:
- 登录 云开发控制台/静态网站托管
- 上传
dist
目录中的所有文件到vite.config.js
中base
一致的路径
- 访问应用: 使用分配的默认域名访问您的应用
🎯 第 7 步:添加云开发功能
现在您可以为 Web 应用添加强大的后端能力:
云数据库示例
// 获取数据库引用
const db = app.database();
// 添加数据
async function addData() {
try {
const result = await db.collection('todos').add({
title: '学习云开发',
completed: false,
createTime: new Date()
});
console.log('添加成功', result);
} catch (error) {
console.error('添加失败', error);
}
}
// 查询数据
async function getData() {
try {
const result = await db.collection('todos').get();
console.log('查询结果', result.data);
} catch (error) {
console.error('查询失败', error);
}
}
云存储示例
// 上传文件
async function uploadFile(file) {
try {
const result = await app.uploadFile({
cloudPath: `images/${Date.now()}-${file.name}`,
filePath: file
});
console.log('上传成功', result);
return result.fileID;
} catch (error) {
console.error('上传失败', error);
}
}
云函数调用示例
// 调用云函数
async function callFunction() {
try {
const result = await app.callFunction({
name: 'hello',
data: {
name: 'CloudBase'
}
});
console.log('调用成功', result);
} catch (error) {
console.error('调用失败', error);
}
}
📚 深入学习
核心功能
高级功能
- 静态网站托管 - 网站部署和 CDN
开发工具
学习文档
🎉 恭喜! 您已经成功创建并部署了第一个云开发 Web 应用。现在可以开始构建更复杂的功能了!