第五节 DApp 前端部署

1. 简介

在前面的课程中，我们已经实现了 DApp 的基本功能：连接钱包、调用合约、监听事件等。但如果我们希望把自己的 DApp 发布给用户使用，就需要 部署到服务器，让用户可以通过浏览器访问。

本节我们将介绍：

• Next.js 构建和本地部署
• 如何基于 Vercel 一键部署 DApp
• 如何绑定自定义域名，让你的 DApp 更加专业

2. Next.js 简介

Next.js 是一个基于 React 的前端框架，支持：

• 服务器端渲染（SSR）和静态导出（SSG）
• 内置路由、API 路径、构建优化
• 与 Vercel 云平台深度集成，部署非常方便

由于我们的 DApp 是基于 React + wagmi 开发的，Next.js 非常适合用来构建和发布。

3. 本地构建与部署

3.1 构建

在项目目录下执行：

npm run build

等价于运行：

next build

执行后，Next.js 会将你的应用编译为：

• 运行在浏览器中的 JavaScript、CSS 文件
• 运行在 Node.js 环境中的服务端代码

这样浏览器就能直接运行 React 应用。

执行成功后，你会看到类似下面的输出结果：

3.2 本地部署

构建完成后执行：

npm run start

或者直接运行：

next start

此时你的应用会在本地启动，通常可以通过 http://localhost:3000 访问。

如果你要部署到自己的服务器：

1. 在服务器安装 Node.js 和依赖包：

   npm install
   npm run build
   npm run start

2. 确保服务器的防火墙和端口开放，用户就能访问到。

3.3 静态部署（可选）

如果你的应用完全是静态资源（仅前端交互，不需要服务端逻辑），也可以通过：

next export

将应用导出为纯静态文件，然后用 Nginx / Express / Github Pages 等方式托管。

4. 基于 Vercel 部署

Vercel 是一个云平台，Next.js 官方支持的部署方式。只需几步，就能把代码部署上线。

4.1 上传代码到 Github

首先，你需要将代码推送到自己的 Github 仓库，或者直接 Fork 课程的示例仓库：\ 👉 WTF-Dapp Github

我们在 demo 文件夹中提供了完整的示例代码。

4.2 在 Vercel 控制台创建项目

1. 登录 Vercel
2. 点击 New Project\
3. 选择并导入 Github 项目（可能需要授权 Vercel 访问 Github 仓库）：\
4. 选择 Next.js 项目的根目录（Root Directory）：\
5. 点击 Deploy，等待构建完成：\

4.3 查看部署结果

几分钟后，你的 DApp 就上线了，Vercel 会自动分配一个默认域名，例如：

👉 <https://wtf-dapp.vercel.app/web3>

5. 绑定自定义域名

为了让你的 DApp 更加专业，可以在 Vercel 项目中绑定自己的域名。

1. 在 Vercel 项目控制台选择 Domains\
2. 添加你的域名（例如 mydapp.com）
3. 在域名服务商的 DNS 配置中，添加一条 CNAME 记录，指向 Vercel 的服务器地址。
4. 等待生效后，你的 DApp 就能通过自定义域名访问了。

原理：

• Vercel 部署时会自动检测你的项目类型（比如 Next.js）。
• 它会读取你的 package.json 里的 scripts（比如 build 脚本），然后在云端自动执行 npm install && npm run build。
• 构建产物（.next/）会直接托管在 Vercel 的 CDN 上。
• 部署完成后，你会拿到一个访问地址。

6. 总结

• Next.js 本地部署：通过 npm run build 和 npm run start，在本地或服务器启动应用。
• Vercel 部署：将项目推送到 Github，一键导入 Vercel 自动构建，几分钟上线。
• 自定义域名：通过 DNS 配置 CNAME，将域名绑定到 Vercel，让 DApp 更加专业。

通过这一节，你就掌握了 DApp 前端的部署流程，能把自己开发的应用真正发布到互联网上。

✅ 接下来，我们可以继续学习 如何在测试网络中部署合约，再结合前端应用，让整个 DApp 完整跑通。