12.6 部署上线

让世界看到你的作品

项目做出来了，在本地运行得好好的。下一步——把它放到网上，让其他人也能访问。

部署可能是第一次开发的人最陌生的环节。涉及到域名、DNS、服务器、HTTPS——每个概念听起来都像是"另外一门学问"。好消息是，Claude Code 可以帮你处理大部分步骤。

部署的本质是什么？

在你的电脑上，项目通过 file:// 协议或本地服务器（localhost）访问。要让其他人也能访问，你需要把文件放到一台 24 小时开机的服务器上，通过 https:// 协议提供服务。

部署工具就是帮你完成"把文件传到服务器 → 配置 HTTPS → 绑定域名"这一过程的自动化工具。

方式一：GitHub Pages（最简单）

适合纯前端项目（HTML + CSS + JS，没有后端服务器）。免费、稳定、零维护。

你的指令：

"帮我部署到 GitHub Pages。我已经在 GitHub 上创建了仓库。"

或者说得更详细一些：

"这是一个纯前端项目（HTML + CSS + JS），没有后端。帮我推送到 GitHub 并启用 GitHub Pages。"

AI 会指导你完成以下步骤：

1. 如果你的项目还不是 Git 仓库，初始化 git init
2. 添加远程仓库地址 git remote add origin 你的仓库地址
3. 推送到 GitHub git push -u origin main
4. 在 GitHub 仓库设置中启用 GitHub Pages（选择 main 分支的根目录或 /docs 目录）

如果你还没有 GitHub 仓库，AI 会引导你创建——但最省力的方式是：

你自己先在浏览器中创建一个空的 GitHub 仓库，然后把仓库地址给 AI。

因为 GitHub 创建仓库需要在网页上操作，AI 做不了这件事。但剩下的步骤 AI 都可以代劳。

GitHub Pages 的特点：

• 免费，没有流量限制
• 自动处理 HTTPS 证书
• 支持绑定自定义域名
• 部署后地址格式：https://你的用户名.github.io/仓库名/
• 纯静态文件，不支持后端

验证你的项目是否适合 GitHub Pages：如果你在本地打开项目，双击 index.html 就能在浏览器中正常使用——那就是纯前端项目。

方式二：Vercel（更现代）

如果你的项目后期需要添加后端 API 或 Serverless Functions，Vercel 是更好的选择。它也支持纯前端项目，但比 GitHub Pages 多了一些高级功能：

• 自动 HTTPS
• 支持 Serverless 函数
• 预览部署（每个分支自动生成预览 URL）
• 框架自动检测（自动识别 Next.js、Vue、React 等项目类型）

你的指令：

"帮我部署到 Vercel。项目目录是当前目录，框架是纯静态 HTML。"

AI 会：

1. 安装 Vercel CLI（npm i -g vercel）
2. 运行 vercel 命令并引导你登录
3. 配置输出设置

Vercel 会自动检测你的项目类型，生成合适的配置。你只需要在浏览器中完成 OAuth 登录。

方式三：Netlify（备选）

Netlify 和 Vercel 功能类似，也是一个优秀的部署平台。和 Vercel 的区别：

• Netlify 的免费方案更慷慨（300 分钟构建时间/月）
• Netlify 的 CI 集成（从 Git 仓库自动部署）
• Netlify 支持表单处理（纯前端项目也可以有表单功能）

"帮我部署到 Netlify。使用 Netlify CLI 或者直接连接我的 GitHub 仓库。"

AI 会引导你使用 netlify deploy 命令或通过 Netlify 网页控制台连接仓库。

三个平台的对比

维度	GitHub Pages	Vercel	Netlify
定价	免费	免费（有限额）	免费（有限额）
支持后端	不支持	Serverless Functions	Serverless Functions
HTTPS	自动	自动	自动
自定义域名	支持	支持	支持
自动部署	需要配置 Actions	连接 Git 仓库后自动	连接 Git 仓库后自动
适合场景	纯静态页面	前端 + 轻量后端	前端 + 表单/后端
部署方式	Git push	Git push / CLI	Git push / CLI

对于你的第一个项目（纯前端音频可视化），三个平台都可以。选择 GitHub Pages 是因为最简单，不需要额外配置。

部署时 AI 会做什么

AI 的"部署工作量"远不止运行几个命令。它还会：

创建自动化部署配置

如果你用 GitHub Pages，AI 可以创建 GitHub Actions 工作流文件：

# .github/workflows/deploy.yml
name: Deploy to GitHub Pages
on:
  push:
    branches: [main]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/configure-pages@v4
      - uses: actions/upload-pages-artifact@v3
        with:
          path: '.'
      - id: deploy
        uses: actions/deploy-pages@v4

你甚至不需要理解 YAML 语法——AI 生成的配置开箱即用。

处理部署路径问题

纯前端项目部署到子路径（https://你的用户名.github.io/项目名/）时，资源引用路径可能出错。AI 会自动处理这个问题：使用相对路径或动态基路径。

常见的路径问题： 在子路径下会指向 https://你的用户名.github.io/style.css，而不是 /仓库名/style.css。AI 会改成相对路径 href="style.css" 或动态路径。

添加 404 页面和元数据

部署完成后，AI 可能还会建议你添加：

• 一个简单的 404 页面（当用户访问不存在的页面时显示）
• HTML 的 中添加 meta 标签，让社交媒体分享时显示预览图

域名和 DNS 基础

"自定义域名"让用户通过自己的网址（如 music.myapp.com）访问你的应用，而不是 你的用户名.github.io/仓库名/。

你需要知道的几个关键概念：

• 域名：你在域名注册商（如 GoDaddy、Namecheap、阿里云）购买的地址。
• DNS：把域名指向服务器的"电话本"。你告诉 DNS "当用户访问 music.myapp.com 时，去 GitHub Pages 的服务器找内容"。
• CNAME 记录：DNS 中一种记录类型，把一个域名指向另一个域名。这是绑定自定义域名到 GitHub Pages 或 Vercel 时最常用的方式。

你不需要掌握 DNS 的完整知识。 AI 会告诉你具体怎么做：

"请在域名管理后台添加一条 CNAME 记录，记录名称为 music，记录值为 your-username.github.io。然后在项目根目录创建一个 CNAME 文件，内容为 music.myapp.com。"

绑定自定义域名（可选）

如果你有自己的域名，想让应用看起来更专业：

"帮我绑定自定义域名 music.myapp.com 到 GitHub Pages。我已经在域名管理后台添加了 CNAME 记录。"

AI 会：

1. 在你的项目中创建一个 CNAME 文件（GitHub Pages 需要）
2. 指导你在 DNS 管理后台配置 CNAME 记录
3. 验证域名解析是否生效

"CNAME 记录可能需要几分钟到几小时才能生效。你可以用 dig music.myapp.com 检查是否指向了你的 GitHub Pages 地址。"

部署完成后的检查清单

AI 部署完成后，你（或让 AI）检查以下几点：

• [ ] 网页能正常访问（HTTP 200，不是 404 或 500）
• [ ] 音频文件能加载和播放
• [ ] 可视化效果正常渲染
• [ ] 录制功能正常
• [ ] 所有外部资源（字体、图片）能加载
• [ ] 移动端访问时布局没有严重错乱

让 AI 帮你检查其中一些项目：

"帮我检查部署后的页面是否正常。看一下控制台有没有报错，资源路径是否正确。"

AI 无法直接访问你的部署 URL（它无法浏览网页），但它会告诉你需要检查什么步骤。

持续部署

一旦配置好 GitHub Actions 或 Vercel 的 Git 集成，你的代码就实现了"持续部署"——每次你推送代码到 main 分支，平台自动重新构建和部署。

这意味着你的部署流程简化为：

1. 修改代码
2. git add . && git commit -m "xxx" && git push
3. 等待几分钟，新版本自动上线

不需要重复运行部署命令。你只需要推送代码，剩下的自动化完成。

第一次部署的小建议

第一次部署时可能会遇到一些问题。保持简单的原则：

1. 先部署到默认域名，先确保项目能正常运行，再考虑绑定自定义域名。
2. 选择一个平台就行，不需要同时用 GitHub Pages 和 Vercel。先成功上线一个再考虑其他。
3. 第一次部署的预期时间：如果一切顺利，15 分钟。如果遇到问题，可能需要 30-60 分钟。