内容来源：Datawhale Easy-Vibe，许可协议：CC BY-NC-SA 4.0。

在本教程中，我们将介绍如何将你的 Web 应用部署到互联网上，让其他人可以访问。我们会介绍三个常用的部署平台：腾讯云 CloudBase、Vercel 和 Zeabur，帮助你快速完成从"写好代码"到"让别人可以在互联网上访问你的网站"的完整流程。

什么是"部署"？

在开始之前，我们先弄清楚"部署（Deployment）"到底是什么意思。任何一个网站想要被外部用户访问，都必须有一个可以公开访问的网络地址（这个地址可以是 IP 地址，比如 123.45.67.89，也可以是域名，比如 google.com 等）。但只有地址是不够的——你写好的网页代码（例如 HTML、CSS、JavaScript 文件，或者使用 React、Vue 等框架写的项目），以及相关的图片 / 视频资源，都必须"放"在一台 24 小时在线的服务器上，由它来响应网络请求，这样任何人的浏览器才能访问并下载这些资源。

图片来源：https://www.hostinger.com/tutorials/what-is-cloud-hosting

把资源上传、配置好环境并让服务"跑起来"的整个过程，就被称为 部署（Deployment）。

简单来说：你在自己电脑上写好的网页，只要在本机启动程序，就只能通过本地地址在自己的浏览器里访问，因为这些代码只存在于你的硬盘上。"部署"就是把你的代码和资源转移到一台连接着公网的专业服务器上，并做好配置，让这台服务器知道"别人访问时我要怎么响应"——比如：当有人在浏览器中输入你的域名时，服务器会立刻找到对应的网页文件，把内容传回给对方的设备，从而让用户看到你的页面。

如果手动部署，一个项目往往需要好几个步骤，每一步都可能踩坑。常见关键步骤包括：

1. 服务器准备：你需要先购买云服务器（比如阿里云、腾讯云、或 AWS EC2），选择服务器所在地区（如上海、新加坡）、配置（CPU、内存、磁盘大小等），还要学会如何远程连接服务器（例如通过 SSH 工具登录）。
2. 环境配置：Web 应用需要在特定"环境"中才能运行——例如运行 Node.js 项目必须先安装 Node.js；运行 Python 项目必须安装 Python 以及对应的第三方库。如果环境版本不匹配，程序就可能报错、无法启动。
3. 上传资源：你需要把本地的代码和资源上传到服务器上，常用的方法包括 FTP 或 Git。如果项目体积比较大（比如包含视频文件），中途一旦断线，有时需要重新上传。

4. 启动服务并测试：上传完成后，你还需要在服务器上执行命令启动应用，并测试"分配的网络地址是否能访问"。如果访问不了，有可能是服务器防火墙没有放行对应端口（比如你的应用监听 3000 端口，但该端口被防火墙拦截），也可能是程序本身有 Bug，这时就需要查看服务器日志进行排查。

   💡 可以把端口理解为区分同一台设备上不同应用的"房间号"，而 IP 则是这台设备的"门牌号"。IP 和端口合在一起（IP:port），就可以精确定位到某一个网络服务。

5. 维护与更新：后续每次你修改代码，都要重新上传并重启服务。如果服务器宕机（例如断电、网络故障），还需要手动重启应用，有时还要额外配置"进程守护工具"，让程序在异常退出后自动拉起。

像 CloudBase、Vercel、Zeabur 这样的"低代码部署平台"，就是为了解决上述复杂问题而诞生的。它们会帮你自动完成"买服务器、配环境、上传代码、启动服务、监控运行"等步骤。你只需要把自己的代码仓库（比如 GitHub 或 GitLab）连接到平台，或者直接上传代码，它就会自动拉取代码、识别应用类型、配置对应的运行时环境，最后给你一个可以被任何人访问的公网地址。它甚至可以一键绑定你自己的域名。

接下来，我们会分别介绍这三个平台的特点和使用方法，帮助你选择最适合自己的部署方案。

部署平台对比

1. 腾讯云 CloudBase

腾讯云 CloudBase（云开发）是腾讯云提供的一站式后端云服务，特别适合国内开发者使用。它的优势在于：

• 国内访问速度快：服务器位于国内，访问延迟低
• 微信生态整合：可以方便地对接微信小程序、公众号
• 一站式解决方案：提供静态网站托管、云函数、数据库、存储等全套服务
• 免费额度充足：个人开发者有充足的免费资源额度

使用 CloudBase 部署 Web 应用

步骤 1：注册并登录

访问 腾讯云 CloudBase 控制台，使用微信或 QQ 登录。

步骤 2：创建环境

点击"新建环境"，选择一个环境名称（如 my-web-app）。

⚠️ 注意：CloudBase 的免费体验版需要兑换码才能开通。你需要关注腾讯云 CloudBase 公众号，在公众号中输入"领取兑换码"获取免费体验版的兑换码，然后在创建环境时填写兑换码即可开通免费环境（免费试用期为 6 个月）。

步骤 3：开通静态网站托管

在环境管理页面，找到"静态网站托管"功能并开通。开通后你会获得一个默认的访问域名。

CloudBase 的静态网站托管提供多种部署方式，与 Zeabur 类似：

• 本地项目上传：直接从本地上传构建好的静态文件（HTML、CSS、JS 等）
• 模板部署：使用预设模板快速创建项目，如 React Web 应用模板、Vue Web 应用模板
• Git 仓库部署：支持从 GitHub 等代码仓库自动拉取代码并部署

步骤 4：部署代码

在静态网站托管页面，CloudBase 提供三种部署方式：

方式一：本地项目部署（本地项目上传）

• 在控制台选择"本地项目部署"
• 直接上传构建好的静态文件（HTML、CSS、JS 等）
• 选择你本地构建好的项目文件夹（如 dist 或 build 目录）
• 等待上传完成即可访问

方式二：模板部署

• 使用预设模板快速创建项目
• 支持 React Web 应用模板、Vue Web 应用模板等
• 基于模板自动构建并部署

方式三：Git 仓库部署

• Git 个人仓库部署：绑定你的 GitHub 等个人代码仓库
• 公开仓库部署：支持从公开的 Git 仓库拉取代码
• 配置自动构建命令（如 npm run build）
• 每次推送代码会自动重新部署

💡 提示：你也可以使用 CLI 工具进行部署：

# 安装 CloudBase CLI
npm install -g @cloudbase/cli
# 登录
tcb login
# 部署
tcb hosting deploy ./dist -e your-env-id

步骤 5：配置自定义域名（可选）

在静态网站托管设置中，可以绑定你自己的域名，并申请免费的 HTTPS 证书。

2. Vercel

Vercel 是全球最流行的前端部署平台之一，特别适合部署 React、Vue、Next.js 等现代前端框架项目。它的特点包括：

• 与 GitHub 深度集成：推送代码即自动部署
• 自动预览：每个 Pull Request 都会生成独立的预览链接
• 全球 CDN：网站自动分发到全球节点，访问速度快
• Serverless 函数：支持在项目中编写后端 API

⚠️ 注意：Vercel 在部分网络环境下访问可能不太稳定，国内用户建议优先考虑 CloudBase。

使用 Vercel 部署 Web 应用

步骤 1：注册账号

访问 Vercel 官网，使用 GitHub 账号登录。

步骤 2：导入项目

1. 点击 "Add New Project"
2. 选择你要部署的 GitHub 仓库
3. 如果没有看到想要的仓库，点击 "Adjust GitHub App Permissions" 授权访问

步骤 3：配置构建设置

Vercel 会自动识别项目类型并配置构建命令：

如果自动识别不正确，可以手动修改：

• Build Command: 构建命令，如 npm run build
• Output Directory: 构建输出目录，如 dist 或 build
• Install Command: 依赖安装命令，通常是 npm install

步骤 4：部署

点击 "Deploy" 按钮，等待构建完成。构建成功后，你会获得一个 xxx.vercel.app 的域名。

步骤 5：自定义域名（可选）

在项目设置中的 "Domains" 页面，可以添加你自己的域名。Vercel 会自动配置 HTTPS。

3. Netlify

Netlify 是另一个非常流行的前端部署平台，与 Vercel 类似，特别适合部署静态网站和单页应用（SPA）。它的特点包括：

• 功能全面：除了静态网站托管，还支持表单处理、身份验证、边缘函数等高级功能
• 与 Git 深度集成：支持 GitHub、GitLab、Bitbucket，推送代码自动部署
• 分支预览：每个分支都会自动生成独立的预览链接
• 全球 CDN：网站自动分发到全球节点，访问速度快
• 表单处理：无需后端代码即可处理网站表单提交
• 身份验证：内置用户身份验证功能，可快速实现登录/注册

⚠️ 注意：Netlify 的国内访问速度可能不如 CloudBase，建议主要面向海外用户的项目使用。

使用 Netlify 部署 Web 应用

步骤 1：注册账号

访问 Netlify 官网，点击 "Sign up" 注册。你可以使用 GitHub、GitLab、Bitbucket 或邮箱注册。

步骤 2：导入项目

1. 登录后点击 "Add new site" → "Import an existing project"
2. 选择你的代码托管平台（如 GitHub）
3. 授权 Netlify 访问你的仓库
4. 从列表中选择你要部署的仓库

步骤 3：配置构建设置

Netlify 会自动识别常见的前端框架并配置构建设置：

如果自动识别不正确，可以手动配置：

• Build command: 构建命令，如 npm run build
• Publish directory: 构建输出目录，如 dist 或 build

步骤 4：部署

点击 "Deploy site" 按钮，等待构建完成。构建成功后，你会获得一个 xxx.netlify.app 的域名，任何人都可以通过这个地址访问你的网站。

步骤 5：配置自定义域名（可选）

1. 进入站点设置，点击 "Domain management"
2. 点击 "Add custom domain"
3. 输入你的域名并按照提示配置 DNS 记录
4. Netlify 会自动申请并配置 HTTPS 证书

特色功能

1. 表单处理

Netlify 提供了一个非常方便的功能：无需后端代码即可处理表单提交。

只需在 HTML 表单中添加 netlify 属性：

<form name="contact" netlify>
  <p>
    <label>姓名: <input type="text" name="name" /></label>
  </p>
  <p>
    <label>邮箱: <input type="email" name="email" /></label>
  </p>
  <p>
    <label>留言: <textarea name="message"></textarea></label>
  </p>
  <p>
    <button type="submit">发送</button>
  </p>
</form>

部署后，表单提交的数据会自动发送到 Netlify 后台，你可以在 "Forms" 页面查看所有提交记录，也可以设置邮件通知或将数据转发到其他服务。

2. Netlify Functions（边缘函数）

Netlify 支持部署无服务器函数（Serverless Functions），让你可以在不搭建完整后端服务器的情况下，实现简单的 API 接口。你可以使用 JavaScript 或 TypeScript 编写函数，部署后会自动获得一个可访问的 URL。

例如，创建一个 hello.js 文件：

exports.handler = async (event, context) => {
  return {
    statusCode: 200,
    body: JSON.stringify({ message: "Hello from Netlify!" })
  };
};

部署后，你可以通过 https://你的域名/.netlify/functions/hello 访问这个函数。

3. 本地开发支持

Netlify 提供了 CLI 工具，方便你在本地开发和测试：

# 安装 Netlify CLI
npm install -g netlify-cli

# 登录账号
netlify login

# 本地启动开发服务器
netlify dev

# 本地测试函数
netlify functions:serve

使用 CLI 工具可以在本地模拟 Netlify 环境，包括表单提交、函数调用等功能，方便在部署前进行测试。

4. Zeabur

Zeabur 是一个新兴的部署平台，特别适合需要部署多种服务的复杂项目。它的优势在于：

• 服务模板丰富：内置 Dify、n8n、数据库等多种服务模板
• 支持多种部署方式：GitHub、模板、Docker 镜像、本地项目等
• 灵活的服务组合：可以在一个项目中部署多个相互关联的服务
• 按量计费：用多少付多少，适合实验性项目

使用 Zeabur 部署 Dify

在之前的课程中，我们已经简单接触过 Dify。现在，我们可以通过 Zeabur 非常轻松地启动自己的 Dify 服务。首先打开 控制台页面，我们先看一下上面的各个区域。

在这个页面上，你首先能看到许多方块，这些就是已经启动的服务。在顶部菜单中，你会看到 Agent、Servers、Docs、Templates 等几个选项，它们分别代表：

1. Agent：可以打开 Zeabur 内置的智能助手（Agent），向它提问如何操作，或者查询当前服务器的状态。
2. Servers：在这里可以添加你自己购买的云服务器，或者直接通过 Zeabur 购买服务器。
3. Docs：查看 Zeabur 的完整文档说明。
4. Templates：这里列出了所有内置的模板镜像。

这里提到的"镜像（Image）"，可以理解为"包含代码和运行环境的压缩包"。当某个服务在一台服务器上成功跑起来之后，我们可以选择把"这套运行环境 + 代码"打包成镜像。之后，在任何新服务器上，只要把这个压缩包解压并运行，就不需要重新配置环境和代码，服务就能直接跑起来。

在页面右上角，你还能看到自己的余额。默认情况下，每个月会有 5 美元左右的免费额度。关于细节计费规则暂时可以不用太在意，只需要知道：只要服务器在运行，就会消耗额度。

点击余额可以查看每日的消耗明细。

现在我们来创建自己的 Dify 服务。首先，在 控制台首页 点击 "New Project"。

接下来是各个创建方式的解释：

1. GitHub 可以连接到你的 GitHub 账号。绑定之后，就可以直接从 GitHub 仓库里选择项目部署（GitHub 是目前全球最大的代码托管平台）。

2. Template（模板） 可以基于模板来部署服务。Zeabur 内置了很多预设项目模板（例如 Dify、n8n 等），你可以基于这些模板快速创建并部署应用。

3. Databases（数据库） 用于部署数据库服务，比如 MySQL、MongoDB 等常见数据库。

4. Functions（函数） 可以部署函数服务，你可以编写 JavaScript 或 Python 代码，让它们以函数的形式被调用。

   

5. Local Project（本地项目） 上传一个本地文件夹，Zeabur 会自动识别其中的启动脚本。这适合将你已经在本地开发好的项目快速部署到 Zeabur 上。

6. Docker Image 部署已经打包好的 Docker 镜像。如果你的项目已经被打成了 Docker 镜像（例如存放在 Docker Hub 或其他镜像仓库中），可以在这里直接部署。

7. Cursor 如果你安装了 Cursor（例如 Cursor IDE），可以通过这个入口将 Cursor 中的项目直接部署到 Zeabur。

如果你想部署自己的 Dify 服务，推荐选择 Template 方式，然后在搜索框中输入 "dify"。可以看到很多由不同作者维护的版本，你可以任选其一（比如 v1.6.0 版本）。

接着，输入任意一个名称，Zeabur 会基于这个名称生成一个临时的自定义域名。之后所有人都可以通过这个网址访问你的服务。

创建完成后，你会看到多个程序（服务）依次启动。需要耐心等待所有服务都进入"已启动"状态。（Dify 服务是由多个程序组成的，每个程序负责不同的功能，它们之间会相互协作。）

一般来说，你只需要点击左侧的 Dify 应用，就可以看到默认的访问入口地址。但在本例中，由于前面还套了一层 nginx，你需要点击 nginx 服务来获取最终访问地址。可以理解为：nginx 就是负责对外统一"收发请求"的主程序，它会把外部访问的地址分发给内部各个服务。点击左侧的 Nginx，在详情页中可以看到当前的服务地址，然后在浏览器里打开这个地址，等待服务完全启动。

稍等片刻后，你就能看到 Dify 的登录界面了。输入邮箱地址和注册密码，就可以开始使用你自己的 Dify 服务了。

如果你有兴趣，还可以顺便启动一个 n8n 服务。n8n 也是海外非常流行的一款 AI 工作流平台。

使用 Zeabur 与 Trae 部署贪吃蛇游戏

在本教程的下一个部分，我们会体验 Zeabur 的一些进阶用法。我们先用 Trae 生成一个贪吃蛇小游戏，再把它部署到 Zeabur 的服务器上，并配置一个可公开访问的链接，让任何人都可以打开你的游戏。

第一步，是在本地使用 Trae 创建一个贪吃蛇项目。

使用 HTML 框架实现

对于 Trae 来说，生成一个基于 HTML 的贪吃蛇网页游戏非常简单。游戏生成完成后，你只需要按照前面介绍的 Zeabur 本地部署方式，把包含所有文件的文件夹上传上去即可。

完成后，你就会进入该服务的详情界面：

点击左侧的 "Network" 选项，在页面中找到 "Public Address" 区域。点击 "Generate Domain"，即可生成一个对外访问地址，你可以输入任意喜欢的名称。

生成完成后，只要在浏览器中打开这个地址，就可以运行你自己的贪吃蛇游戏了。其它 HTML 类型的 Web 应用也可以用完全相同的方式来部署。

使用 React 框架实现

前面我们学习了如何部署基于 HTML 的 Web 应用。接下来，我们再尝试部署一个目前更常用的前端框架：React 应用。相比纯 HTML，React 被认为是一种更加成熟、现代的前端开发框架。它通过组件化的方式组织页面结构，能够显著加快复杂页面的开发，是企业级项目中非常主流的选择。

重构为 React 架构

在 Trae 中，你只需要向 Agent 说明："帮我把这份代码重构成 React 架构"，就可以比较轻松地把原本基于 HTML 的结构重构成 React 项目。

不过，相比简单的 HTML 文件，React 应用依赖更复杂的构建工具和项目结构，因此部署过程也会稍微麻烦一些。一个典型的问题体现在端口设置上：默认情况下，React 应用一般会监听 3000 端口（你也可以在配置文件或启动日志中看到这一点）。

然而，在 Zeabur 上这样部署会失败——因为 Zeabur 只支持监听 8080 端口的应用。也就是说，如果想让 React 应用在 Zeabur 上正常运行，我们必须先把默认监听端口从 3000 改成 8080。

要正确进行这一步配置，我们需要先弄清楚两个概念：什么是"端口（Port）"，以及"监听端口（Listening Port）"是什么意思。

什么是端口？

在计算机网络中，端口可以理解为一个"逻辑通信端点"，用来区分同一台设备上运行的不同网络服务。简单类比的话，如果 IP 地址好比一个"门牌号"（例如 162.128.1.1），那端口号就像这栋楼里不同房间的"房间号"——每个房间对应一个服务（例如 Web 服务器、邮箱服务，或者你的 React 应用）。

端口号用 16 位整型表示，取值范围是 0 到 65535。

如果不想记这些细节，可以简单理解：端口是构成"网络访问地址"的一个必要部分。

我们平时访问网站或 IP 地址时，通常不会手动加端口号，是因为 Web 的默认端口是 80 或 443（HTTPS）。大多数浏览器会自动使用这些标准端口。而对于一些特殊端口，比如 React 默认的 3000、Zeabur 要求的 8080，我们就必须在地址后面加上 :3000 或 :8080 才能访问到对应的内容。

什么是"监听端口号"？

"监听端口号"指的是某个程序在一台设备上主动"打开并监控"的端口。当一个应用设置了监听端口时，其实就是在告诉操作系统："我会一直在这个端口上等待网络请求——只要有请求进来，就请转发给我。"

再形象一点地理解：假设你的电脑是一栋写字楼，IP 地址是这栋楼的地址。楼里开了很多公司或部门，它们分别占用不同的房间，房间号就是端口号。

当默认的 React 开发服务器启动时，它会"打开"某个房间的门，并安排"前台"在门口值班，这个房间号就是它的监听端口——3000。

同时，React 程序还会告诉这栋楼的"物业管理"（操作系统）："我在 3000 号房间，请把所有寄给 3000 的信件（网络请求）都转给我。"

这样，当你访问 React 网站时，请求首先会到达这栋楼；物业看到请求要送到 3000 号房间，就会立刻把请求交给 React 的"前台"，由它来处理并返回结果——这就是访问 React 应用的过程。

当你在本地执行 npm start（本地启动 React 开发服务器的默认命令，也可以在 Vibe Coding 的 Agent 侧边栏中执行）时，React 开发服务器就会自动把监听端口设置为 3000。 而 Zeabur 的平台设计决定了它只会"识别"监听 8080 端口的应用。如果你的 React 应用仍然使用默认的 3000 端口，Zeabur 就无法将请求正确转发给你的应用，最终导致部署失败。

修改默认监听端口

要把 React 默认监听端口（3000）改成 Zeabur 所要求的 8080，有很多做法。最简单的方式，就是直接在 Trae 里对 Agent 下指令："请帮我把这个 React 项目的默认端口改为 8080。"Trae 就会帮你修改项目中对应的配置文件。修改完成后，你只需重新打包并按前面的方式上传到 Zeabur 即可。

在网络设置中指定一个访问 URL，方式和部署 HTML 项目时基本相同，就可以启动 React 版本的服务。

对于其它需要修改端口号的程序，你也可以采用同样的思路：先改默认端口，再上传到 Zeabur 部署。至此，你已经掌握了将常见 Web 应用部署到服务器的基础技能。

你可以尝试让 Trae 帮你构建不同类型的应用，并把它们部署到 Zeabur 的默认服务器上。在后续课程中，我们还会学习如何把应用部署到你自己购买的云服务器上。

⚠️ 如何停止和删除项目（Zeabur）

由于启用服务器相关资源都会产生费用，我们在使用时一定要养成"及时关闭不用服务"的习惯，避免把每个月的免费额度消耗完。

如果要找到项目的管理入口，首先点击项目中的 "Settings" 选项。

进入设置页面后，将页面拉到最下方，你会看到类似下面的界面：

你可以点击 "Suspend All Services" 来暂停所有服务以降低费用；如果服务出现问题，可以点击 "Restart All Services" 对全部服务进行重启。如果你确定不再需要这个项目，可以点击 "Delete Project" 将整个项目彻底删除。

总结

在本教程中，我们介绍了四个常用的 Web 应用部署平台：

1. 腾讯云 CloudBase：适合国内用户，访问速度快，与微信生态整合好
2. Vercel：适合现代前端框架项目，与 GitHub 集成紧密，全球 CDN 加速
3. Netlify：功能全面，支持表单处理和身份验证，适合需要高级功能的静态网站
4. Zeabur：适合复杂项目，服务模板丰富，支持多种部署方式

选择哪个平台取决于你的具体需求：

• 如果主要面向国内用户，推荐 CloudBase
• 如果使用 React/Next.js 等框架，推荐 Vercel 或 Netlify
• 如果需要表单处理、身份验证等高级功能，推荐 Netlify
• 如果需要部署 Dify、n8n 等服务，推荐 Zeabur

无论选择哪个平台，部署的核心流程都是相似的：准备代码 → 选择平台 → 配置构建设置 → 部署上线。掌握这些技能后，你就可以将自己开发的应用分享给全世界了！