第五章：CI/CD 流水线 —— 自动化部署

第五章：CI/CD 流水线 —— 自动化部署

在本地跑通还不够，我们要让全世界都能看到。我们将构建一条 自动化流水线，从搭建个人仓库到部署 Vercel 进行精细的配置流程。

5.1 Git 初始化与提交

我们要把代码封存一个版本，首先我们需要在 GitHub 上新增一个仓库。

image-20251209111732884

1
2
3
4
5
6
7
8
# 1. 初始化仓库
git init

# 2. 将所有文件放入“暂存区” (Staging Area)
git add .

# 3. 提交到“本地仓库” (Local Repo)
git commit -m "feat: my first blog init"

5.2 推送到 GitHub

  1. 登录 GitHub，点击右上角 + -> New repository。
  2. Repository name 填 my-blog，其他默认，点击 Create。
  3. 关键步骤： 在页面下方找到 …or push an existing repository from the command line，复制那三行代码，在你的终端里运行：

image-20251209111905920

5.3 Vercel 托管 (Hosting)

  1. 访问 vercel.com 并使用 GitHub 账号登录。
  2. 点击 Add New… -> Project。
  3. 在列表中找到刚刚上传的 my-blog，点击 Import。
  4. Framework Preset: 确保它自动识别为 Astro。
  5. 点击 Deploy。

🎉 高光时刻： 等待约 1 分钟，烟花绽放。你将获得一个 https://xxx.vercel.app 的域名。虽然可以通过该域名访问，但由于 Vercel 分配的默认域名在国内访问并不稳定且不利于 SEO 优化，我们需要配置一个自定义独立域名，并利用 Vercel 的全球边缘网络（Edge Network）进行加速。

5.3.1 购买并配置自定义域名

我们将以 Spaceship（Namecheap 旗下平台）为例进行演示。

  1. 登录 Spaceship -> All products -> Domain Name Search。
  2. 搜索并确定自己想要的域名，如下图所示：

image-20251209113655341
image-20251209113648728

购买完域名后点击 Launchpad -> 选择域名 -> Advanced DNS（或 Manage DNS），我们需要在此处配置 DNS 解析记录。

img

在此环节，我们需要新增两条关键的解析记录。为了确保配置正确，必须理解 DNS 解析中的 Type（记录类型）、Host（主机记录） 和 Value（记录值） 的技术含义：

  1. 根域名解析 (A Record)
  • Type: A（一般适用于服务器类型部署，我们不会采用）
    • 定义：Address Record，用于将域名直接映射到一个 32 位的 IPv4 地址。
    • 作用：告诉 DNS 服务器，当用户访问根域名（如 yourdomain.com）时，将其指向 Vercel 的服务器 IP 地址。
  • Host: @
    • 定义：@ 符号在 DNS 配置中特指“根域名”本身（APEX Domain），即不带任何前缀的域名（例如 prorise.com 而非 www.prorise.com）。
  • Value: 76.76.21.21
    • 这是 Vercel 提供的官方负载均衡入口 IP。所有指向该 IP 的流量会被 Vercel 的边缘节点接收并路由到你的项目。
  1. 子域名解析 (CNAME Record)
  • Type: CNAME
    • 定义：Canonical Name Record（规范名称记录），用于将一个域名映射到另一个域名（别名）。
    • 作用：CNAME 允许我们将子域名指向 Vercel 的域名服务，而不是某个具体的 IP。这样做的好处是，如果 Vercel 更改了底层的 IP 地址池，CNAME 记录会自动跟随更新，无需用户手动维护，具有更高的灵活性和容灾能力。
  • Host: blog (或者 www)
    • 定义：这是你想要设置的子域前缀。配置后，用户将通过 blog.yourdomain.com 访问你的网站。
  • Value: vercel.cdn.yt-blog.top (或者 cname.vercel-dns.com)
    • 技术细节：这里建议使用 vercel.cdn.yt-blog.top, 这是基于本地 CF 自搭建优选节点国内 CDN 源，在国内的访问速度全绿 + 自动缓存

如下图所示，我们定义好以下的核心配置项

image-20251209114837055

5.3.2 Vercel 域名绑定与 CDN 回源机制

在域名注册商处配置完 DNS 记录后，流量虽然被指向了 Vercel，但 Vercel 的服务器还需要“认领”这个流量。

回到 Vercel 控制台，定位到 Settings -> Domains。

image-20251209114226273

  1. 输入你刚才购买的域名（例如 blog.yourdomain.com 或根域名 yourdomain.com），点击 Add。
  2. Vercel 会自动检测 DNS 配置。如果上一步在 Spaceship 的配置生效（通常需要几分钟到几小时的全球 DNS 传播时间），你会看到状态变为蓝色的勾选标记。

image-20251209120401703

这里发生了什么？（CDN 回源机制解析）

当用户在浏览器访问你的自定义域名时，请求流程如下：

  1. DNS 解析：浏览器通过 DNS 服务器将你的域名解析为 Vercel 的边缘节点 IP。
  2. 边缘节点响应：请求到达 Vercel 的全球 CDN 节点。Vercel 检查该请求的域名是否已在项目中绑定。
  3. **回源 **：
    • 如果边缘节点缓存了你的网站静态资源（HTML/CSS/JS），它会直接返回给用户（Hit），速度极快。
    • 如果缓存过期或未命中（Miss），边缘节点会向 Vercel 的源站（Origin Server，存储你构建好的 Astro 静态文件的地方）发起请求，获取最新资源，然后返回给用户并更新缓存。

我们实际上是构建了一套基于 Vercel 基础设施的全球内容分发网络，确保用户无论身在何处，都能就近获取网站资源