跳到主要内容

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:3000 、 127.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 应用。现在可以开始构建更复杂的功能了！