不会写代码也能做到：用 AI 带你 3 小时完成官网上线（含后台+品牌 IP+运营）

它帮助企业以零代码方式构建核心业务系统，并将 AI 融入数据、流程与应用，让自动化真正进入智能时代。我们一步一步来，把「本地前端项目 → 部署到腾讯云服务器」整个流程串起来。下面默认你已经用 Cursor 把前端代码写好了，并且有一个腾讯云账号。Cursor打开一个空文件夹，右侧填入prompt后回车，就开始自动编排执行了。(6) 在Cursor 中配置 MCP（重要！(5) prompt 业务

mingdaoyun

1032人浏览 · 2025-12-10 17:35:16

mingdaoyun · 2025-12-10 17:35:16 发布

没写过代码？不会设计？没做过系统？——完全没关系。

本教程带你用 Cursor + HAP + Nano Banana Pro，
以 Vibe Coding（氛围编程） + Vibe Designing（氛围设计） 的方式，像施加魔法一样，把官网做出来。

Vibe = 不靠技术，靠“感觉 + prompt + AI 输出”。

本教程只做一件事：
👉 让你相信：今天搭建官网，比写 PPT 还容易。

为什么现在做官网已经完全不一样了？

以前做一个官网，就像在组织一个“小型 IT 项目”：

要前端工程师做页面
要后端工程师做接口
要设计师做视觉图
要运维帮你部署
要排需求、写文档、对齐细节
改一点点都要重新走流程

动辄几周起步，改一次要来回沟通好多轮。对于大多数业务人员来说，做官网一直是又贵、又慢、又麻烦的代表。

✨ 但现在，这件事彻底变了。

今天的官网不再是“技术活”，而是：

👉 你描述你想要什么，AI 和 HAP 自动帮你做出来。

我们把过去几个角色（前端、后端、设计、运维）拆分成了三个 AI 能力最强的领域：

① Vibe Coding（氛围编程）——让 AI 帮你写前端

你不需要写代码，只需要说：

“我想做一个产品列表页面，要现代一点，有搜索功能。”

AI 编程软件（Cursor/Claude等）就能自动生成：

页面结构
组件布局
样式风格
动态读取后台数据的代码

你只需要用语言“给 vibe（氛围）”，AI 负责把 vibe 变成真正的前端页面。

② Vibe Designing（氛围设计）——让 AI 帮你做视觉图

以前：

找设计师
反复对稿
做 Banner、背景图、产品场景图

现在你只说一句：

“给我一张现代极简、带一点科技感的首页 Banner。”

Nano Banana Pro 会自动生成：

高清大图
完整场景
多产品融合
光影、构图、氛围感满分

你提供感觉，AI 提供设计。

③ Vibe Architecting（氛围架构）——通过 HAP MCP 让 AI 帮你搭后台、建数据、跑自动化流程，官网真正能“动起来”的业务闭环

HAP 是整个体系里最重要的部分，它不是“数据库”或“后台系统”那么简单，而是：

👉 一个能让 AI 直接为你构建后台、数据结构与业务流程的应用底座。

借助 HAP MCP，AI 不再只是“生成代码”，而是可以 真实操作、真实创建、真实落地业务系统：

自动创建数据结构（产品、Banner、内容……）
自动生成后台管理页面
自动编排流程（线索 → 提醒 → 跟进 → 归档）
自动拉取 API 文档、自动配置 API、自动连前端
你一句话，AI 就能让一个后台应用“凭空长出来”

这一切都在 零代码、即时生效 的状态下完成。

⭐ 于是你的官网变成一个主动运转的系统：

后台改内容 → 前端立即同步
用户提交表单 → 数据实时写入 HAP
自动化流程接力处理后续动作
产品、活动、文章随时维护

而这些——都可以交给 AI + HAP MCP 自动协作完成。

这就是 Self-Contained Loop（业务闭环）：

前端展示 → 用户互动 → 数据回到 HAP → 自动化处理 → 再反馈回官网→ 周期循环、持续更新
整个循环不需要工程师，你就能自己掌控。

🌈 所以，这篇教程能帮你做到什么？

非常简单：

👉 3 小时内，从零开始做出一个可上线、可管理、可自动化的企业官网。

包括：

可访问的前端页面
可随时调整的后台系统
自动读取后台数据的动态官网
自动生成的视觉图、Logo、IP 形象
线索收集与流程自动化
一键部署上线

以前需要一个团队才能完成的事，现在：

💡 你 + AI + HAP 就够了。

🌟 接下来，我们真正动手开始构建

看到这里，你应该已经能感受到：

做官网这件事，已经不再是技术门槛，而是表达能力的门槛。

你需要掌握的事情只有三件：

描述你想要什么页面（Vibe Coding）
描述你想要什么风格（Vibe Designing）
在 HAP 里像填表一样管理数据（业务闭环）

接下来我们正式进入实操，从第一步开始：

用 AI 自动生成一个能跑的官网项目。

二、构建官网项目（30～60min）

包括前端页面+后台管理+动态读取数据

2.1 前置准备

步骤	说明
(1) 进入 HAP	官网：https://www.mingdao.com/ HAP 是一款 AI 强化的企业级超级应用平台。它帮助企业以零代码方式构建核心业务系统，并将 AI 融入数据、流程与应用，让自动化真正进入智能时代。
(2) 创建空应用
(3) 查看 API 开发文档
(4) 获取应用密钥和 MCP 配置
(5) prompt 业务中描述中，填入你的需求和应用密钥
(6) 在Cursor 中配置 MCP（重要！必须完成配置）	进入 Cursor Setting-Tools&MCP填入下方 JSON 【HAP-MCP】：用于直接调用工具搭建HAP应用（注意：需要替换为第 3 步复制的 url）【HAP-应用 API 文档】：获取 HAP 应用 API 文档，用于代码中编排 API请求（可直接使用示例内容） `{ "mcpServers": { "HAP3.0-API": { "url": "需替换为第 3 步复制的 url" }, "HAP-应用API文档": { "command": "npx -y apifox-mcp-server@latest --site-id=5442569", "args": [], "env": {} } } }` 配置成功 → 两条绿色状态灯。

2.2 一键生成项目 Prompt（真正的 Vibe Coding）

这是给业务人员设计的“一键生成 Prompt”，丢给 Cursor或者其他 AI 编程工具就能跑出来：

你只需要复制→粘贴→回车，业务需求部分替换成你自己的内容

⚠️注意：为保证项目正常运行，你必须先完成2.1 前置准备，你需要根据你的实际需求，更改下方「 🧭 业务需求」部分内容（29 行开始）

# 🎯 任务描述  
你是一名资深全栈工程师 + 低代码架构师，请根据以下所有要求，帮助我完成一个「官网 + 后台管理系统」的项目，包括 HTML 页面设计、数据结构与 API 调用流程，并生成可部署的前端代码示例。  

**最终目标是：完成一个可直接部署上线的 HTML 官网项目。**  
你需要提供从页面结构、数据结构、API 调用到部署建议的完整方案与代码，使该项目具备真实可直接部署上线能力。

---

## 🔄 前端项目与 HAP 的关系

在本项目中，前端与 HAP 的职责分工明确，通过 API 建立数据交互链路：

- **前端项目（官网）**：负责页面呈现与用户交互，通过 API 实时读取与渲染数据。
- **HAP（明道云后台管理系统）**：负责所有官网动态内容的存储、维护、更新，是官网的数据源。
- **API（HAP APIV3）**：作为前端与 HAP 的通信桥梁，承担数据的读取、写入、更新等能力。

---

# 🚀 第一步：根据需求构建前端项目

你需要生成：

- ✔ 完整 HTML + CSS + JS 代码  
- ✔ 可直接放入服务器运行  
- ✔ 结构清晰、可扩展、利于后续动态对接 API  

---

## 🧭 业务需求（用于构建页面结构）

- **目的**：本项目为定制家具品牌官方网站建设与优化，面向年轻家庭及商业空间客户，打造集品牌展示、设计案例呈现、工厂实力背书及客户转化于一体的品牌官网，提升整体品牌形象与市场竞争力。
- **用户画像**：年轻家庭（25–40岁），注重品质、设计感及性价比，重视颜值、效率、智能体验及品牌调性
- **语言**：简体中文  
- **设计风格**：采用极简主义风格设计，流畅的交互
- **用户体验**：
    - 操作流畅、逻辑清晰
    - 页面加载快，兼容多端（PC / 手机 / 小程序）
- **品牌logo url**：https://m1.mingdaoyun.cn/doc/20251205/f4646V5e61dB5z8ifCcE397P4Z4O8wdu260y4X0a6JdL1q2C4o8ubb0X9V7Qcn7z.png?e=1764998407315&token=mN_sp-Y4_5zePppXZC8fTktRmKMNiYlC8jl_yeGZ:dvbwZBe2pUz6V13QLCqSYcGF6gU=&imageView2/2/w/200/q/100
- **密钥信息**：
    HAP-AppKey: 5797e XXX152e1
    HAP-Sign: ODQ2XXXXhMA==
   

---

# 🏗 第二步：为官网构建明道云 HAP 后台管理应用（MCP 数据建模）

## 🧩 任务目标

请你从业务角度出发，根据前端页面需要展示的内容，推导出应该在 HAP 中创建哪些工作表，并为每个表创建字段、字段别名和示例数据。

你需要实现：

- 梳理后台需要维护的所有数据类型  
- 使用 **HAP MCP** 架构「官网后台管理应用」  
- 为每类数据创建对应的**工作表**  

并为每个工作表输出：

- **工作表名称（简体中文）**  
- **工作表别名（适用 API 调用）**  
- **字段结构（字段名称、字段类型、字段别名、字段含义）**  
- **必须生成 5 条完整示例数据**  
- **如字段为 Attachment附件字段，可以将以下示例 url写入 value 中！**
https://m1.mingdaoyun.cn/doc/20251205/095p6B8tbW3x9v1A5lc41O8QdYaua101bM8Wb7442Q2ZfKb21m8deM1U0r4UaC9h.png?e=1765001146299&token=mN_sp-Y4_5zePppXZC8fTktRmKMNiYlC8jl_yeGZ:hWtnqd4WOVEsZMg7_whjeDZApSY=&imageView2/2/w/200/q/100
https://m1.mingdaoyun.cn/doc/20251205/1B4Ed46s1a3wfaeI2RaBdM1Ybb4MeB0je21WcH2d7mal8Q667i2w0A2EaW1t02cS.png?e=1765001146849&token=mN_sp-Y4_5zePppXZC8fTktRmKMNiYlC8jl_yeGZ:z8IBXmDU-7ZpgTMaacYb8HyGvK4=&imageView2/2/w/200/q/100
https://m1.mingdaoyun.cn/doc/20251205/0u1r8Rcjb39Uc5fT1edP3w9q8q5y0lc45c657Q8zfG768S3XbF9N148X8Qfc1Rdq.png?e=1765001147280&token=mN_sp-Y4_5zePppXZC8fTktRmKMNiYlC8jl_yeGZ:Qo6D-NaoYemI0mtB0quoIokWrlA=&imageView2/2/w/200/q/100
https://m1.mingdaoyun.cn/doc/20251205/by1w2D5F9sf08UaL0ddre45x7l1q51cKcT3Pca034h1Pe3b69S9U4O2K0x8T1Nda.png?e=1765001148220&token=mN_sp-Y4_5zePppXZC8fTktRmKMNiYlC8jl_yeGZ:Tfbd51zZIWYD18qOi41wFk9RLlk=&imageView2/2/w/200/q/100
https://m1.mingdaoyun.cn/doc/20251205/bx6XfH1Neu977X0u6BaB8Q1Occ7ededVdab31QeXfm5vbJ490sda8DddcXadeM22.png?e=1765001148767&token=mN_sp-Y4_5zePppXZC8fTktRmKMNiYlC8jl_yeGZ:yefst9HfzckYMkdpLSfAqhxbpGY=&imageView2/2/w/200/q/100
https://m1.mingdaoyun.cn/doc/20251205/8Xd940d48B0t7X3b2tfibo05dcbO1U0B1T9Pfbdye83X3f3S82aj9E625j7a127V.png?e=1765001149722&token=mN_sp-Y4_5zePppXZC8fTktRmKMNiYlC8jl_yeGZ:MLZy3NkKj_S-4lYqexz_3jBGBR0=&imageView2/2/w/200/q/100
https://m1.mingdaoyun.cn/doc/20251205/4rc64S601gaHa78qajbPdRde342V8Z5IcO5m2L848Q7wbtaI9Nd98teDbB5o8Kd9.png?e=1765001150250&token=mN_sp-Y4_5zePppXZC8fTktRmKMNiYlC8jl_yeGZ:5oTWYCbsNaNwhJRWf5WaRDKih5I=&imageView2/2/w/200/q/100
https://m1.mingdaoyun.cn/doc/20251205/9o8r6Lau4s3S5Uen4naY3pfTdGdBb7d3953cbu0U3H22e14Xb71D8e3weDcpf90S.png?e=1765001147723&token=mN_sp-Y4_5zePppXZC8fTktRmKMNiYlC8jl_yeGZ:T2R7IatWbAn9Oy1jKk6iqTFM65Y=&imageView2/2/w/200/q/100
### 请确保：
- 设计的结构完整覆盖所有页面展示需求  
- 字段命名语义化，字段别名可直接用于 API 调用  
- 示例数据可真实用于前端测试  
- 结构具备扩展性，方便后续新增模块  

---

# 🔌 第三步：为前端页面 HAP APIV3 实时动态数据展示

- 当前端页面需要展示某个列表或内容时，你**不需要再次调用获取工作表列表或获取表结构的接口**，这些接口只在项目初始化或配置阶段使用，用于生成本地配置文件（包含表别名与字段别名）。
- 在页面上，只需通过CORS调用 **【获取行记录列表】** 接口即可完成数据需求。
- **你必须获取并使用 V3 分组下额接口，这是我们改造的新版 AI 友好化的接口**。


## 📘 数据交互流程

| 步骤 | 说明 | 接口 | 使用场景 |
|------|------|------|--------------|
| **1️⃣ 获取结构（仅初始化）** | 获取工作表别名 + 字段别名 → 写入配置文件 | 获取工作表结构 | 开发阶段/初始化 |
| **2️⃣ 展示数据** | 调用记录列表 → 按字段别名解析 → 渲染 HTML | 获取行记录列表 | 页面渲染 |
| **3️⃣ 写入数据** | 基于字段别名组织数据 → 新增/编辑/删除 | addRow / editRow / deleteRow | 内容管理、表单提交 |

---

## 🛠 1. 使用【应用 API 文档 — MCP】获取 APIV3 结构
你将通过明道云 HAP 的「应用 API 文档 MCP」获取该应用的 **API V3 结构文档**。  
⚠️ **所有实际发起的 API 请求（URL、Method、参数名、Body 结构），都必须严格以该文档为准，不能凭空假设或乱写。**


（1）  **先打开「应用 API 文档 MCP」**  
   - 找到当前应用对应的 APIV3 文档入口  
   - 明确接口基础路径、版本号、鉴权方式等

（2） **逐个确认你要使用的接口**（不能自己编）  
   - 获取行记录列表接口的：  
     - URL 路径  
     - 请求方法（GET / POST /…）  
     - Query 参数（分页、条件等）  
     - Body 参数结构（worksheetId / viewId / filter 等）  
   - 新增 / 更新 / 删除行记录接口的：  
     - URL  
     - Method  
     - 必填字段  
     - 行 ID / 主键字段等

（3）  **根据文档整理一份“接口摘要”再设计封装**  
   在你的输出中，请先以文字的方式总结每个接口的：
   - 接口名称（来自文档）  
   - 请求方法（GET / POST / PUT / DELETE）  
   - 完整路径（例如：`/v3/open/worksheet/getFilterRows` —— 注意这里必须来自文档，而不是自己想的）  
   - 请求必填参数（含作用解释）  
   - 返回结构中你会用到的字段

（4）  **禁止臆造接口 / 字段名 / 参数结构**  
   - 如果文档没有说明的字段，不要随便写  
   - 若你不确定请求体结构，请用「根据实际 API 文档中的字段结构填入」这样的描述占位，而不要假定字段名  
   - 示例请求和字段名必须与文档描述保持一致

---

## 🔑 2. 常用 API V3（必须掌握），示例请求
curl --location 'https://api.mingdao.com/v3/app' \
--header 'HAP-Appkey: {{HAP-Appkey}}' \
--header 'HAP-Sign: {{HAP-Sign}}' \
--data ''

（1） **获取工作表列表**  
   - 用于在项目初始化阶段，获取应用下包含的所有工作表及其 ID / 别名。  
   - 建议只在「配置阶段」或「初始化脚本」中调用一次，然后将需要使用的工作表信息固化到配置文件中。

（2） **获取工作表结构信息**  
   - 用于获取字段详情（字段 ID、字段别名、字段类型等）。  
   - 仅在**建模 / 对接阶段**需要调用，用来确认字段结构。  
   - 获取完成后，请将字段别名等关键信息保存为前端可读的配置（例如 `config/tables.json`），后续页面调用只依赖这些别名即可，无需每次再请求结构接口。

（3） **获取行记录列表**  
   - 用于在页面中展示动态内容
   - 页面运行时只需要根据「指定的工作表别名 + 字段别名」来获取和渲染列表数据，无需每次重新获取表结构。

（4） **新增行记录 / 更新行记录**  
   - 用于后台管理或官网提交数据场景（如在线表单提交、数据维护）。  
   - 同样通过「工作表别名 + 字段别名」来构造请求体即可。



## 🌐 3. 数据读取（页面渲染），前端调用方式必须使用 CORS
在页面上，只需调用 **【获取行记录列表】** 接口即可完成数据需求。

你需要做到：
(1)在页面中明确指定要展示的数据来自哪个工作表（通过工作表别名，如：`tbl_design_cases`）
(2)使用本地配置的字段别名（如：`fld_title`, `fld_cover`）来解析每条记录
(3)根据字段类型正确渲染（特别是 SingleSelect / MultipleSelect 字段，只展示 `value`）
(4)调用接口后，将列表数据渲染到对应 DOM 区域

### 前端调用 HAP APIV3 时：

- 直接发起跨域请求至 HAP  
- 自动携带鉴权 Header  
- 所有 **查询、创建、更新、删除** 操作均通过 CORS 完成

### 📄 读取数据时需遵循以下流程：

当页面需要展示“设计案例列表”时：

(1) 前端发送请求：  
   - API：**获取行记录列表**  
   - 参数：`tableIdOrAlias = 表别名（例如 tbl_design_cases）`

(2) HAP 返回数据：  
   - 每条记录包含字段 ID/别名对应的值  
   - 如字段类型是 SingleSelect / MultipleSelect，返回数组对象

(3)前端解析字段：  
   - 普通文本字段：直接读取字段别名对应的值  
   - 单选/多选字段：循环取 `value`  
   - 附件字段：读取图片 URL

4. 将解析后的数据插入页面 DOM

---

## 4.🛠 HAP API 特殊字段处理逻辑（完整解析规则）
本项目中，HAP 的部分字段类型具有特殊结构，前端在获取数据时必须按照以下通用解析规则进行处理。  
涉及字段包括：**SingleSelect、MultipleSelect、Attachment**。

以下规则适用于：
- 示例数据的生成  
- 前端 API 数据解析  
- 动态渲染展示内容  

---

### 1. 选项字段（SingleSelect / MultipleSelect）

📌  HAP API 标准返回格式
[
  {
    "key": "id",
    "value": "选项名称"
  }
]

🔍  选项解析规则（必须执行）
（1）展示给用户时 只展示 value 字段，key 仅用于内部标识，不展示。
（2）MultipleSelect：多个值展示。
（3）字段为空时：返回空字符串，不报错、不展示 undefined

### 2. 附件字段（Attachment）
📌  HAP API 标准返回格式
{
  "cover_image": [
    {
      "fileName": "图片名称.jpg",
      "downloadUrl": "https://p1.mingdaoyun.cn/..."
    }
  ]
}
```

🔍  附件字段解析规则（必须执行）
（1）判断字段是否为有效附件数组
Array.isArray(field) 且 field.length > 0 → 有附件，其他情况（null / undefined / "" / 空数组） → 无附件

（2）提取展示 URL（优先级处理）：使用 downloadUrl，若仍为空，视为无附件

（3）前端展示规范：展示第一张图片（默认场景），多图片场景可根据业务全部展示，不展示 fileName、size 等 meta 信息（除非业务需要）

2.3 使用 Cursor+HAP-MCP自动构建项目

Cursor 打开空文件夹 → 输入 prompt → 自动开始生成。

开始自动化构建

Cursor打开一个空文件夹，右侧填入prompt后回车，就开始自动编排执行了

首次运行后效果

你会同时得到：

✔ 官网前端页面（页面结构、样式、动态数据、多端适配全部帮你生成）
✔ 后台管理-HAP应用（零代码即可持续改动、无限扩展）

不需要懂技术，也不需要等排期。
完全可以像操作 Excel 一样自己增删字段、扩展表结构、调整业务逻辑。

点几下就能完成，立即生效。
这就是 HAP 的优势： 零代码，业务想法随时都能落地。

✔ 动态读取 HAP 数据的真实可运行系统（后台一改 → 官网实时更新，完全打通）

官网

后台管理

2.4 打造品牌IP & 企业文化设计（15～30min）

使用Nano Banana Pro 生成装修设计图（多产品场景融合）

公司有 5 个不同产品（茶几、椅子、沙发、书柜），想看看它们摆在一个温馨的房间里，放在官网展示企业文化

极简提示词

将这些产品融洽地放到一个适合的室内空间中。

左边上传单图 → 右边自动生成融合场景。不需要 PS，不需要建模。

更多玩法（参考自 AGI 社区的优秀实践）：

用 GPT-4o 生成品牌 Logo + 吉祥物

参考提示词

创建图片 我是做全屋家具定制的业务，我需要品牌 IP，我需要一只仓鼠3D Q版形象/平面 logo
设计要求：衣服或者帽子上融合 DS字母，形象更可爱卡通一些，融合设计，定制元素，如尺子，铅笔。

使用Nano Banana Pro 设计的品牌 logo与吉祥物

更多玩法（参考自 AGI 社区的优秀实践）：

2.5 页面调优（Vibe Coding + Vibe Designing 联动）

更换首页背景图

将生成的图片添加至项目中

自然语言对话：“请替我更换首页背景图”

加一个吉祥物悬浮窗（用于线索收集）

示例prompt

1、在页面右下方，用展示悬浮窗，加上呼吸交互。悬浮窗中展示 形象。点击展示表单标题展示“联系我们”，需要填入手机号，姓名，需求描述。

2、你需要通过 通过 【HAP-MCP】，创建一个线索表。用于收集用户填写信息.

3、提交线索后，你需要利用前端 CORS能力调用【新增行记录】接口，往 HAP 写入一条数据。接口文档可以通过【应用 API 文档-MCP】获取。

根据你实际需求优化调整

完全可以靠自然语言调优迭代

新增表
新增模块
加产品筛选
加搜索功能

2.6调优后效果

三、项目部署上线（30～60min）

在项目部署上线的过程中，难免会遇到一些同学不太熟悉的技术问题，不用害怕，我们完全可以借助 AI 一步一步地帮你完成部署和上线，下面给大家介绍下大致的流程

建议：全程配合 AI 使用
部署过程中，如果你遇到任何报错、卡住的步骤，都可以把：
- 终端里出现的命令和报错截图 / 文本
- 你的 Nginx 配置内容
- 当前执行到的步骤
- 发给 AI，让 AI 帮你逐行检查、解释、修改命令。
你也可以随时问 AI： 「我现在做到第 X 步，下一步该干嘛？」，让 AI 手把手带着你往下做。

我们一步一步来，把「本地前端项目 → 部署到腾讯云服务器」整个流程串起来。下面默认你已经用 Cursor 把前端代码写好了，并且有一个腾讯云账号。

我用的是比较通用、易懂的方式：购买云服务器（CVM）+ Nginx 静态托管。

直接问就好可以了，后面步骤仅供参考

3.1 准备工作

确认你的前端项目能打包

常见框架：
- React（Vite / CRA）
- Vue (Vite / Vue CLI)
- Next.js（静态导出也可以）
在本地项目根目录执行（根据你的项目调整）：

# Vite / Vue / React 常见
npm install
npm run build

一般会在项目根目录生成一个类似：
- dist/
- 或 build/
这个目录就是要部署到服务器上的静态文件（HTML / JS / CSS / 图片等）。

准备一个腾讯云服务器
- 参考教程：https://modelers.csdn.net/6911578c5511483559e4847e.html
- 登录腾讯云控制台 → 云服务器
- 购买一台服务器（推荐 CentOS / Ubuntu 都行）
- 记下来：
  - 公网 IP
  - 登录方式：密码或 SSH 密钥

3.2 连接到腾讯云服务器

使用终端 SSH 登录（推荐）
在你本地电脑（Cursor 终端或系统终端）：

ssh root@你的服务器IP
# 第一次会问是否继续连接，输入 yes，然后输入密码

如果你不是 root 用户，可能是：

ssh ubuntu@你的服务器IP

登录成功后，就进入到远程服务器的命令行了。

3.3 在服务器上安装运行环境

更新软件源

Ubuntu：

sudo apt update
sudo apt upgrade -y

CentOS：

sudo yum update -y

(2) 安装 Nginx（用来部署静态前端）

Ubuntu：

sudo apt install nginx -y

CentOS：

sudo yum install epel-release -y
sudo yum install nginx -y

安装完后启动：

sudo systemctl start nginx
sudo systemctl enable nginx   # 设置为开机自启

在浏览器访问：

http://你的服务器IP

如果看到 nginx 欢迎页面，说明服务器和网络都没问题。

3.4 把前端打包文件用 `scp` 直接上传（到服务器

在本地（不是服务器里）执行：

# 假设你的前端项目已经 build 到 dist 目录
scp -r ./dist/ root@你的服务器IP:/var/www/your_frontend

说明：
- -r 表示递归拷贝整个文件夹
- /var/www/your_frontend 是部署目录，你可以随便取，比如 /usr/share/nginx/html/your_app
如果目录不存在，可以先在服务器上创建：

sudo mkdir -p /var/www/your_frontend
sudo chown -R $USER:$USER /var/www/your_frontend

然后再 scp 上传。

3.5 配置 Nginx 指向你的前端项目

下面以 Ubuntu 为例。

创建一个 Nginx 站点配置

sudo nano /etc/nginx/sites-available/your_frontend

写入（根据你的路径改一下）：

server {
    listen 80;
    server_name your-domain.com;  # 如果没有域名，可以先写你的服务器IP，或者留空注释

    root /var/www/your_frontend/dist;  # 改成你的 dist 路径
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

如果是前端单页应用（SPA：React Router / Vue Router）， try_files ... /index.html 非常重要，不然刷新会 404。

启用这个配置

# 建立软链接到 sites-enabled
sudo ln -s /etc/nginx/sites-available/your_frontend /etc/nginx/sites-enabled/your_frontend

(3)检查 Nginx 配置有没有问题

sudo nginx -t

如果显示 syntax is ok 和 test is successful，就可以重载：

sudo systemctl reload nginx

(4)访问测试

在浏览器进入：

http://你的服务器IP

如果你在配置里用了 server_name 是域名，就用：

http://你的域名

看到你的前端页面就说明部署成功 🎉

3.6 腾讯云安全组 & 服务器防火墙

如果访问不了，很可能是端口没开。

腾讯云安全组

在腾讯云控制台：

打开「云服务器」→ 找到你的实例
看关联的「安全组」
编辑安全组规则，确保入站规则开放了：
- 协议：TCP
- 端口：80（HTTP），需要 HTTPS 再加 443
- 来源：0.0.0.0/0（对全网开放，简单测试没问题，正式环境可以再收紧）

(2).服务器自身防火墙（如果有）

Ubuntu + ufw：

sudo ufw allow 80/tcp
sudo ufw allow 443/tcp
sudo ufw status

CentOS + firewalld：

sudo firewall-cmd --zone=public --add-service=http --permanent
sudo firewall-cmd --zone=public --add-service=https --permanent
sudo firewall-cmd --reload

3.7 绑定域名（可选）

如果你有域名：

在域名服务商那里添加一条 A 记录：
- 主机记录：@ 或 www
- 记录类型：A
- 记录值：你的腾讯云服务器 IP
然后在 Nginx 里 server_name 改成你的域名
推荐再用 Let’s Encrypt（如 certbot）签发免费 HTTPS 证书

四、官网增长与运营（10～30min）

让官网真正成长与被看见（SEO + 收录 + 品牌传播）

SEO 优化

SEO = 免费流量入口
SEO keywords 就是用户在搜索引擎里会输入的关键词，把这些词布局到网站上，可以让客户更容易搜到我们。

关键词选得好，来的是精准客户；本质上，它是让搜索引擎知道“我们是做什么的”，也是免费获取客户的重要手段。
将下方标签插入到你的head中，填入合适的关键词

<meta name="keywords" content="明道云HAP,零代码,APaaS,hpaPaaS,低代码,无代码,0代码">

网站收录

🎉 最终成果：你将拥有

能力	成果
Vibe Coding	一个能上线的动态官网
数据管理能力	灵活的管理后台（HAP）
Vibe Designing	品牌图、Logo、场景图
部署能力	个人即可上线全站
增长能力	SEO + 搜索收录