本章节介绍如何将 Rsbuild 的构建产物部署为静态站点。
在开始进行部署前,你需要了解一些背景信息:
Rsbuild 提供的构建命令:
rsbuild build
命令构建出对应产物。{
"scripts": {
"build": "rsbuild build",
"preview": "rsbuild preview"
}
}
preview 命令仅用于本地预览,请勿将它用于生产服务器,因为它不是为此而设计的。
Rsbuild 的构建产物通常包含 HTML、JS、CSS 等文件,默认输出到 dist
目录下,dist 目录的名称和结构可以通过一些配置项来修改,请参考 构建产物 章节来了解更多。
dist
├── static
│ ├── image
│ ├── css
│ └── js
└── [name].html
我们可以把构建产物分为两部分:HTML 文件和静态资源。
.html
后缀的文件,它们通常需要被部署到服务器上。static
目录,里面包含了 JavaScript、CSS、图片等资源,它们可以被部署到服务器或者 CDN 上。如果静态资源被部署到了服务器的某个子目录下,你可以将 output.assetPrefix 配置为一个 base 路径:
import { defineConfig } from '@rsbuild/core';
export default defineConfig({
output: {
assetPrefix: '/some-base-folder/',
},
});
你想要将静态资源放到 CDN 上,以保证更好的访问性能,而不是像 HTML 一样直接放到服务器上,那么你就需要将 output.assetPrefix 配置为 CDN 地址,使应用能够正确的引用到这些静态资源:
import { defineConfig } from '@rsbuild/core';
export default defineConfig({
output: {
assetPrefix: 'https://cdn.com/path/',
},
});
这样,在 HTML 中引用静态资源的时候,就会自动加上指定的前缀,例如:
<script src="https://cdn.com/path/static/js/index.some-hash.js"></script>
下面介绍一些常见平台的部署方式。
平台名称按照字母顺序排列。
Cloudflare Pages 是一个由 Cloudflare 提供的静态网站托管平台。
你可以按照 Cloudflare Pages - Git integration guide 操作,通过 Git 集成,将你的站点部署到 Cloudflare Pages。
在进行配置时,你需要填写 "Build settings" 中的以下字段:
npm run build
。dist
。然后点击 Save and Deploy 按钮,就可以开始部署了。
GitHub Pages 是一个静态站点托管服务,可以直接从 GitHub 上的存储库获取 HTML、CSS 和 JavaScript 文件。
下面是部署到 GitHub Pages 的步骤示例。
import { defineConfig } from '@rsbuild/core';
export default defineConfig({
output: {
// 请将 <REPO_NAME> 替换为仓库的名称。
// 比如 "/my-project/"
assetPrefix: '/<REPO_NAME>/',
},
});
github-pages.yml
(你可以根据需要来调整文件的内容和名称)。# 用于构建和部署 Rsbuild 站点到 GitHub Pages 的示例工作流
name: Rsbuild Deployment
on:
# 在推送到默认分支时触发
push:
branches: ['main']
# 允许你从 Actions tabs 手动运行这个工作流
workflow_dispatch:
# 设置 GITHUB_TOKEN 的权限以允许部署到 GitHub Pages
permissions:
contents: read
pages: write
id-token: write
# 同时只允许一个部署执行
concurrency:
group: 'pages'
cancel-in-progress: false
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Use Node.js
uses: actions/setup-node@v4
with:
node-version: 22
# 如果你使用其他的包管理器,如 yarn 或 pnpm,
# 你需要先安装它们
- name: Install dependencies
run: npm i
- name: Build
run: npm run build
- name: Setup Pages
uses: actions/configure-pages@v5
- name: Upload artifact
uses: actions/upload-pages-artifact@v3
with:
path: './dist'
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4
https://<USERNAME>.github.io/<REPO_NAME>/
来查看部署后的页面。Netlify Core 是一个针对开发者的前端云解决方案,使用现代、可组合的工具构建和部署具有未来兼容性的数字解决方案。
Netlify 提供了详细的指南,你可以按照 Netlify - Add new site 操作,配置一些基础信息,就可以开始部署了。
你需要配置以下两个字段:
npm run build
。dist
。然后点击 Deploy site 按钮,就可以开始部署了。
如果你想要使你的站点可以通过你自己的域名访问,那么你可以在 Netlify 的 "Domain management" 栏目中进行配置。
详细指南:Netlify - Custom domains。
Vercel 是一个为开发者提供的平台,它提供了构建和快速部署网络应用所需的工具、工作流程和基础设施,无需额外的配置。
Vercel 提供了详细的指南,你可以按照 Vercel - Projects 操作,在 dashboard 中创建一个项目,配置一些基础信息,就可以开始部署了。
你只需要配置 "Build and Output Settings" 下的字段:
dist
。然后点击 Deploy 按钮,就可以开始部署了。
如果你想要使你的站点可以通过你自己的域名访问,那么你可以在 Vercel 的 "Domains" 栏目中进行配置。
详细指南:Vercel - Domains。
Zephyr Cloud 是一个零配置的部署平台,它可以直接集成到构建流程中,并为模块联邦应用提供全球边缘分发。
请按照 zephyr-rsbuild-plugin 中的步骤进行操作。
在构建过程中,你的应用会被自动部署,并生成一个可访问的部署 URL。Zephyr Cloud 会负责资源优化、全球 CDN 分发、模块联邦配置,并提供自动回滚功能。
参考 zephyr-cloud.io 开始使用。