云服务器怎么上网

明道云｜产品经理｜卜佳菲

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

本教程带你用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（氛围架构）——通过HAPMCP 让 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 前置准备

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

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

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

⚠️注意：为保证项目正常运行，你必须先完成2.1 前置准备 ，你需要根据你的实际需求，更改下方「 业务需求」部分内容（29 行开始）任务描述你是一名资深全栈工程师 + 低代码架构师，请根据以下所有要求，帮助我完成一个「官网 + 后台管理系统」的项目，包括 HTML 页面设计、数据结构与 API 调用流程，并生成可部署的前端代码任务描述你是一名资深全栈工程师 + 低代码架构师，请根据以下所有要求，帮助我完成一个「官网 + 后台管理系统」的项目，包括 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`-附件字段：读取图片 URL4.将解析后的数据插入页面 DOM ---4. HAP API 特殊字段处理逻辑（完整解析规则）本项目中，HAP 的部分字段类型具有特殊结构，前端在获取数据时必须按照以下通用解析规则进行处理。 涉及字段包括：**SingleSelect、MultipleSelect、Attachment**。 以下规则适用于：-示例数据的生成-前端 API 数据解析-动态渲染展示内容 ---1. 选项字段（SingleSelect / MultipleSelect）HAP API 标准返回格式 [ { "key": "id", "value": "选项名称" } ] 选项解析规则（必须执行） （1）展示给用户时 只展示 value 字段，key 仅用于内部标识，不展示。 （2）MultipleSelect：多个值展示。 （3）字段为空时：返回空字符串，不报错、不展示 undefined2. 附件字段（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）

云服务器 xampp

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

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

极简提示词将这些产品融洽地放到一个适合的室内空间中。左边上传单图 → 右边自动生成融合场景。不需要 PS，不需要建模。

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

https://waytoagi.feishu.cn/wiki/KLW2wGXeRiwwmukVTUDc9JJSnDbhttps://waytoagi.feishu.cn/wiki/OfTywNYCViyy7Nke5DpcbiMfnFb

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

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

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

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

https://waytoagi.feishu.cn/wiki/V3KYwcR6xizdmkkwejscTXz2n9ghttps://waytoagi.feishu.cn/wiki/OfTywNYCViyy7Nke5DpcbiMfnFb

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

更换首页背景图

将生成的图片添加至项目中自然语言对话：请替我更换首页背景图

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

示例prompt在页面右下方，用展示悬浮窗，加上呼吸交互。悬浮窗中展示 形象。点击展示表单标题展示联系我们，需要填入手机号，姓名，需求描述。你需要通过 通过 【HAP-MCP】，创建一个线索表。用于收集用户填写信息.提交线索后，你需要利用前端 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 installnpm 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 updatesudo apt upgrade -yCentOS：sudo yum update -y

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

Ubuntu：sudo apt install nginx -yCentOS：sudo yum install epel-release -ysudo yum install nginx -y安装完后启动：sudo systemctl start nginxsudo 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_frontendsudo 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-enabledsudo 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/tcpsudo ufw allow 443/tcpsudo ufw statusCentOS + firewalld：sudo firewall-cmd –zone=public –add-service=http –permanentsudo firewall-cmd –zone=public –add-service=https –permanentsudo firewall-cmd –reload

3.7 绑定域名（可选）

如果你有域名：

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

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

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

SEO 优化

阿里云服务器是独立ip

SEO = 免费流量入口

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

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

网站收录

百度

https://ziyuan.baidu.com/site/index

Google

https://search.google.com/search-console

Bing

https://www.bing.com/webmasters

最终成果：你将拥有

你会发现：

搭建官网不是难，难的是以前的方式太复杂。

今天，它成为业务人员也能掌握的超级能力。

云播服务器连接失败