EdgeOne Pages 部署教程¶

说明¶

目的：为参与者提供EdgeOne Pages的详细部署指南
适用场景：不能翻墙或需要国内访问速度的参与者
难度：⭐⭐⭐ 简单
预计时间：30-60分钟

什么是EdgeOne Pages？¶

基本介绍¶

服务商：腾讯云
产品定位：全栈开发平台，支持前后端开发，能够部署完整的网站
核心优势：
✅ 支持全栈开发：支持前后端，可以部署完整网站
✅ 支持多种前端框架：Next.js、Nuxt、Astro等
✅ 无服务器后端功能：Node Functions，无需管理服务器
✅ 支持服务器端渲染（SSR）：支持SSR、ISR等多种渲染模式
✅ 国内可用，访问速度快：国内访问速度快
✅ 快速部署，一键生成链接：快速部署，一键生成链接
✅ 使用EdgeOne Pages KV存储：访问速度快
✅ 全球3200+ CDN节点：包括中国大陆

适用场景¶

静态网站部署：HTML、CSS、JavaScript
动态网站部署：支持Node.js后端
全栈应用部署：前后端完整应用
前端框架项目：Next.js、Nuxt、Astro等
需要国内访问速度的项目：国内访问速度快
不能翻墙的参与者：国内可用

部署前准备¶

1. 账号准备¶

1.1 注册腾讯云账号¶

访问腾讯云官网
网址：https://cloud.tencent.com
点击"免费注册"
填写注册信息
手机号/邮箱
设置密码
验证码验证
完成实名认证
个人实名认证
企业实名认证（如需要）
认证通过后可以使用服务

1.2 开通EdgeOne Pages服务¶

访问EdgeOne Pages控制台
网址：https://console.cloud.tencent.com/edgeone/pages
或通过腾讯云控制台搜索"EdgeOne Pages"
开通服务
点击"立即开通"
阅读服务协议
确认开通
查看免费额度
查看免费额度说明
了解使用限制
确认可以正常使用

2. 项目准备¶

2.1 准备HTML内容¶

静态HTML文件：准备好要部署的HTML文件
资源文件：CSS、JavaScript、图片等资源文件
项目结构：整理好项目文件结构

2.2 项目结构示例¶

my-project/
├── index.html          # 主页面
├── css/
│   └── style.css       # 样式文件
├── js/
│   └── main.js         # JavaScript文件
└── images/
    └── logo.png        # 图片资源

3. MCP协议准备（可选）¶

3.1 什么是MCP协议？¶

MCP：Model Context Protocol（模型上下文协议）
作用：通过MCP协议可以快速部署HTML内容
优势：简单高效，一键部署

3.2 配置MCP（如果需要）¶

安装MCP工具
```
npx edgeone-pages-mcp
```

配置MCP服务器

{
  "mcpServers": {
    "edgeone-pages-mcp-server": {
      "command": "npx",
      "args": ["edgeone-pages-mcp"]
    }
  }
}

验证配置
测试MCP连接
确认可以正常使用

部署步骤（详细）¶

方法1：通过MCP协议部署（推荐）¶

步骤1：准备项目内容¶

选项A：静态HTML项目 1. 创建HTML文件 - 使用文本编辑器创建HTML文件 - 或使用AI工具生成HTML代码 - 确保HTML代码完整

示例HTML代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个项目</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        h1 {
            color: #333;
        }
    </style>
</head>
<body>
    <h1>欢迎来到我的项目！</h1>
    <p>这是我的第一个部署项目。</p>
</body>
</html>

选项B：全栈项目（Next.js、Nuxt等） 1. 准备前端框架项目 - Next.js项目 - Nuxt项目 - Astro项目 - 或其他支持的前端框架

准备后端代码（如需要）
Node.js函数
API路由
服务器端渲染代码

项目结构示例

my-project/
├── pages/              # 页面文件
├── api/                # API路由（后端）
├── components/         # 组件
├── public/             # 静态资源
└── package.json        # 依赖配置

步骤2：使用MCP工具部署¶

打开终端/命令行
Windows：PowerShell 或 CMD
Mac：Terminal
Linux：Terminal
运行部署命令
```
npx edgeone-pages-mcp deploy-html
```
输入HTML内容
粘贴HTML代码
或指定HTML文件路径
确认部署

步骤3：获得部署链接¶

等待部署完成
部署过程通常需要几秒钟
等待部署成功提示
获得公开访问链接
部署成功后会自动生成链接
链接格式：https://your-project.edgeone.site
复制链接保存
验证部署
在浏览器中打开链接
确认内容正确显示
测试所有功能

方法2：通过控制台部署（备选）¶

步骤1：登录控制台¶

访问EdgeOne Pages控制台
网址：https://console.cloud.tencent.com/edgeone/pages
使用腾讯云账号登录
进入Pages管理页面
点击"Pages"菜单
进入Pages管理页面

步骤2：创建新项目¶

点击"新建项目"
点击"新建"按钮
选择"静态网站"
填写项目信息
项目名称：输入项目名称
项目描述：输入项目描述（可选）
确认创建

步骤3：上传文件¶

准备文件
整理好HTML文件和资源文件
确保文件结构正确
上传文件
点击"上传文件"
选择要上传的文件
确认上传
设置首页
指定index.html为首页
确认设置

步骤4：部署项目¶

点击"部署"
点击"部署"按钮
等待部署完成
获得访问链接
部署成功后获得访问链接
链接格式：https://your-project.edgeone.site
复制链接保存

部署后管理¶

1. 更新项目¶

方法1：通过MCP更新¶

npx edgeone-pages-mcp deploy-html

- 重新运行部署命令 - 输入更新后的HTML内容 - 自动更新部署

方法2：通过控制台更新¶

登录控制台
找到项目
上传新文件
重新部署

2. 查看部署日志¶

登录控制台
进入项目详情
查看部署日志
查看访问统计

3. 管理域名¶

自定义域名（如需要）
在控制台配置自定义域名
添加DNS解析
等待生效
SSL证书（如需要）
配置SSL证书
启用HTTPS
确保安全访问

常见问题解决¶

问题1：部署失败¶

可能原因¶

HTML代码有错误
文件格式不正确
网络连接问题

解决方法¶

检查HTML代码
使用HTML验证工具检查代码
修复语法错误
确保代码完整
检查文件格式
确保文件是UTF-8编码
确保文件扩展名正确
确保文件没有损坏
检查网络连接
检查网络是否正常
尝试重新部署
联系技术支持

问题2：链接无法访问¶

可能原因¶

部署未完成
链接错误
服务问题

解决方法¶

检查部署状态
登录控制台查看部署状态
确认部署已完成
等待几分钟后重试
检查链接
确认链接正确
尝试复制链接重新打开
清除浏览器缓存
联系技术支持
如果问题持续，联系技术支持
提供错误信息
等待解决方案

问题3：更新不生效¶

可能原因¶

缓存问题
更新未完成
链接错误

解决方法¶

清除缓存
清除浏览器缓存
使用无痕模式访问
等待缓存更新
检查更新状态
确认更新已完成
等待几分钟后重试
检查部署日志

最佳实践¶

1. 项目结构¶

清晰的目录结构：组织好文件结构
命名规范：使用有意义的文件名
资源管理：合理管理资源文件

2. 代码优化¶

代码压缩：压缩HTML、CSS、JavaScript
图片优化：优化图片大小
性能优化：提高加载速度

3. 版本管理¶

备份代码：定期备份代码
版本控制：使用Git管理代码
文档记录：记录更新内容

与其他平台对比¶

EdgeOne Pages vs Vercel¶

特性	EdgeOne Pages	Vercel
国内可用性	✅ 可用	⚠️ 需翻墙
访问速度	⭐⭐⭐⭐⭐ 快	⭐⭐⭐ 一般
部署难度	⭐⭐⭐ 简单	⭐⭐⭐⭐⭐ 最简单
免费额度	需查看	✅ 有
支持全栈	✅ 支持	✅ 支持
支持前端框架	✅ Next.js、Nuxt、Astro等	✅ Next.js、Nuxt、Astro等
支持后端	✅ Node Functions	✅ Serverless Functions
支持SSR	✅ 支持SSR、ISR	✅ 支持SSR、ISR
适用场景	国内项目，全栈应用	国际项目，全栈应用

EdgeOne Pages 部署教程¶

说明¶

什么是EdgeOne Pages？¶

基本介绍¶

适用场景¶

部署前准备¶

1. 账号准备¶

1.1 注册腾讯云账号¶

1.2 开通EdgeOne Pages服务¶

2. 项目准备¶

2.1 准备HTML内容¶

2.2 项目结构示例¶

3. MCP协议准备（可选）¶

3.1 什么是MCP协议？¶

3.2 配置MCP（如果需要）¶

部署步骤（详细）¶

方法1：通过MCP协议部署（推荐）¶

步骤1：准备项目内容¶

步骤2：使用MCP工具部署¶

步骤3：获得部署链接¶

方法2：通过控制台部署（备选）¶

步骤1：登录控制台¶

步骤2：创建新项目¶

步骤3：上传文件¶

步骤4：部署项目¶

部署后管理¶

1. 更新项目¶

方法1：通过MCP更新¶

方法2：通过控制台更新¶

2. 查看部署日志¶

3. 管理域名¶

常见问题解决¶

问题1：部署失败¶

可能原因¶

解决方法¶

问题2：链接无法访问¶

可能原因¶

解决方法¶

问题3：更新不生效¶

可能原因¶

解决方法¶

最佳实践¶

1. 项目结构¶

2. 代码优化¶

3. 版本管理¶

与其他平台对比¶

EdgeOne Pages vs Vercel¶

选择建议¶

参考资源¶

官方文档¶

相关文档¶

下一步¶

完成部署后¶

学习更多¶