跳到主要内容

Web 应用快速开始

通过本指南,您将学会如何使用云开发构建和部署 Web 应用,包括静态网站、动态网站、SSR 等多种应用形式。

🌟 云开发 Web 应用的优势

  • 🚀 快速部署:一键部署到全球 CDN
  • 🔒 安全可靠:内置身份认证和权限管理
  • 📊 数据管理:云数据库和云存储
  • ⚡ 高性能:全球加速和智能缓存
  • 💰 成本优化:按需付费,无需维护服务器

📋 准备工作

在开始之前,请确保您已完成:

  1. 开通云开发环境立即开通
  2. 安装 Node.js下载 Node.js(建议 LTS 版本)
  3. 安装 CLI 工具安装 CloudBase CLI

🚀 第 1 步:使用官方模板(推荐)

1. 选择技术栈

我们提供多种主流框架的模板:

2. 克隆模板项目

以 React 模板为例:

# 克隆项目
git clone https://github.com/TencentCloudBase/awesome-cloudbase-examples.git

# 进入项目
cd awesome-cloudbase-examples/web/cloudbase-react-template

# 安装依赖
npm install

3. 配置环境

  1. 配置环境 ID: 将 src/utils/cloudbase.js 中的 ENV_ID 替换为您的环境 ID
// src/utils/cloudbase.js
const ENV_ID = 'your-env-id'; // 替换为您的环境 ID
  1. 配置部署域名: 将 vite.config.js 中的 base 路径替换为您的云开发环境域名
// vite.config.js
export default {
base: '/react-temp/', // 自定义根路径,部署后通过 $ip/react-temp/ 访问
// ... 其他配置
}

🔧 第 2 步:配置安全域名

在使用云开发 Web SDK 之前,需要配置安全域名:

  1. 登录 云开发控制台

  2. 进入「环境」>「安全配置」

  3. 在「Web 安全域名」中添加您的域名:

    • 本地开发: localhost:3000127.0.0.1:3000

    • 生产环境:您的实际域名

安全域名说明

只有在安全域名列表中的域名才能使用云开发 Web SDK,这是为了保护您的数据安全。

🎯 第 3 步:开启身份认证

为了让用户能够登录,需要开启匿名登录:

  1. 在云开发控制台进入「环境」>「登录授权」
  2. 启用「匿名登录」
  3. 保存配置

🚀 第 4 步:本地开发

使用模板项目

# 启动开发服务器
npm run dev

项目将在 http://localhost:5173 启动(端口可能不同)

🚀 第 5 步:部署到云开发

方式一:使用 CLI 部署(推荐)

  1. 构建项目
npm run build
  1. 登录 CLI
cloudbase login
  1. 开通静态托管: 在云开发控制台开通「静态网站托管」服务

  2. 部署应用

# 部署构建产物到静态托管
cloudbase hosting deploy dist -e your-env-id

方式二:控制台手动上传

  1. 构建项目:生成 dist 目录

  2. 上传文件

  1. 访问应用: 使用分配的默认域名访问您的应用

🎯 第 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);
}
}

📚 深入学习

核心功能

高级功能

开发工具

学习文档


🎉 恭喜! 您已经成功创建并部署了第一个云开发 Web 应用。现在可以开始构建更复杂的功能了!