常见部署平台介绍：从静态站点到现代前端云的一站式指南

在现代前端开发中，“构建完 → 一键部署 → 全球访问”已经成为默认流程。随着构建工具生态的繁荣，各类部署平台也不断演进，从早期的 GitHub Pages，到主打极速与边缘网络的 Cloudflare、Vercel，再到专为模块联邦与企业级架构设计的 Zephyr Cloud，都为开发者提供了不同形态的托管支持。

本文将按照平台名称字母顺序，介绍常见的前端部署平台及它们的典型使用方式，帮助你选择最适合的部署方案。

Cloudflare Pages

Cloudflare Pages 是 Cloudflare 提供的静态网站托管平台，部署速度极快，并拥有全球分布式 CDN 的天然优势。

如何部署

直接按照官方 Git 集成流程即可完成自动部署。通常只需配置以下两项：

• Build command：填写构建命令，例：npm run build
• Build output directory：构建产物目录，通常是 dist

保存后即可自动开始构建并分发到边缘节点。

适合场景：
静态站点、文档网站、个人主页、前端单页应用（SPA）。

GitHub Pages

GitHub Pages 是最经典的静态站点托管服务，可以直接托管纯静态资源，部署方式简单，非常适合作为项目文档、博客或 Demo 的托管方案。

配置静态资源路径

在 Rsbuild、Vite、Webpack 等环境中，你需要为 GitHub Pages 设置资源前缀，例如：

// rsbuild.config.ts
import { defineConfig } from '@rsbuild/core';

export default defineConfig({
  output: {
    assetPrefix: '/<REPO_NAME>/', // 替换仓库名
  },
});

// rsbuild.config.ts
import { defineConfig } from '@rsbuild/core';

export default defineConfig({
  output: {
    assetPrefix: '/<REPO_NAME>/', // 替换仓库名
  },
});

使用 GitHub Actions 自动部署

在仓库 Pages 设置中选择 GitHub Actions，然后创建一个工作流，例如：

# 用于构建和部署 Rsbuild 站点到 GitHub Pages 的示例
name: Rsbuild Deployment

on:
  push:
    branches: ['main']
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: 'pages'
  cancel-in-progress: false

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: 22

      - run: npm i
      - run: npm run build

      - uses: actions/configure-pages@v5
      - uses: actions/upload-pages-artifact@v3
        with:
          path: './dist'
      - uses: actions/deploy-pages@v4

# 用于构建和部署 Rsbuild 站点到 GitHub Pages 的示例
name: Rsbuild Deployment

on:
  push:
    branches: ['main']
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: 'pages'
  cancel-in-progress: false

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: 22

      - run: npm i
      - run: npm run build

      - uses: actions/configure-pages@v5
      - uses: actions/upload-pages-artifact@v3
        with:
          path: './dist'
      - uses: actions/deploy-pages@v4

工作流执行完成后，即可访问：

https://<USERNAME>.github.io/<REPO_NAME>/

Netlify

Netlify 是一个现代前端云平台，提供持续部署、函数、边缘网络等能力，对前端项目非常友好。

新增站点

按官方“Add new site”步骤操作即可。需要填写：

• Build command：npm run build
• Publish directory：例如 dist

配置完成后即可立即构建并部署。

配置自定义域名

在 Netlify 的 “Domain management” 页面即可绑定自有域名，支持自动 SSL 与 DNS 服务。

适合场景：
静态站点、Jamstack 项目、组合式内容系统。

Vercel

Vercel 是为开发者打造的高性能部署平台，尤其适合 Next.js 等框架，同时也可无缝运行静态网站。

新增站点

在 dashboard 中创建项目后，只需设置：

• Output directory：构建产物目录（默认 dist）

然后点击 Deploy 即可。

配置域名

可在 “Domains” 页面绑定域名，并可启用边缘网络加速。

适合场景：
Next.js、前后端同构、SSR 应用、静态站点。

Zephyr Cloud

Zephyr Cloud 是近年来兴起的零配置部署平台，主打模块联邦（Module Federation）生态，为微前端与多团队协作场景提供完整的自动化部署与全局分发能力。

如何部署

按照 zephyr-rsbuild-plugin 文档进行设置即可。

在构建阶段，Zephyr Cloud 会自动完成：

• 构建产物的托管
• 全球 CDN 分发
• 自动生成访问 URL
• 模块联邦的注册与配置
• 自动回滚机制

非常适合企业级应用、微前端架构、多仓库协作体系。

总结

无论你是构建个人博客、全栈应用，还是大规模模块联邦架构，总能找到合适的平台。希望本文能为你的部署选型提供清晰的参考。