持续交付
持续交付
文档指南
请输入
- 文档首页
持续交付最佳实践通过流水线部署 React 至对象存储 TOS
复制全文
下载 pdf通过流水线部署 React 至对象存储 TOS
文档反馈
问问助手本文介绍如何通过火山引擎持续交付产品 CP 中的流水线功能，快速将前端应用部署至对象存储 TOS 中。
前提条件
- 已将 React 应用纳管至代码仓库，本示例以 Gitee 为例。
- 已创建制品仓库工作区，操作详情参见 创建工作区。
操作步骤
第一步：创建对象存储
- 登录 对象存储控制台，创建对象存储。
- 桶策略 选择 公共读，其他参数根据业务状态自行填写。配置说明参见 创建存储桶。
-
- 登录已创建的存储桶，在 基础配置 -> 静态网络 模块中创建静态网络规则。操作详情参见 设置静态网站。
配置 | 说明 |
默认主页 | 填写站点地址。本示例为 index.html。 |
默认 404 页面 | 填写站点地址。本示例为 index.html。 |
- 在 域名与传输 -> 自定义域名 为存储桶绑定已备案的域名。操作详情参见 设置自定义域名。
-
- 在 云解析 DNS 控制台 为域名添加解析记录。操作详情参见 添加 CNAME 记录。
第二步：创建流水线
- 登录 持续交付控制台。
- 在已创建的持续交付工作区，创建代码源，纳管 React 应用代码。操作详情参见 创建代码源。
-
- 创建 空白模板 流水线。
-
- 在 代码源&触发器 区域单击 添加 -> 代码源，添加已纳管的代码源。
-
- 选中第二个流水线节点，引用 NodeJS 编译构建 任务模板。
-
- 在 步骤 区域单击 添加 -> 制品 -> TOS 上传。
-
- 配置 TOS 上传 参数。详细配置说明参见 TOS 上传。
-
配置项 | 说明 |
步骤名称 | 默认为 TOS 上传，支持自定义步骤名称。 |
源文件路径 | 上传文件/文件夹路径。起始位置为项目文件夹的相对路径，不支持通配符。本示例为build：上传 build 文件夹。 |
TOS 文件路径 | 上传至 TOS Bucket 的目录。如果目标目录不存在，会新建目录。本示例为 /。
注意 如果上传单个文件，例如a.txt。
|
Bucket 地域 | 选择待上传的 Bucket 所在的地域。 |
Bucket 名称 | 选择待上传的目标 Bucket。 |
上传时包含相对父目录 | 是否将相对父目录一起上传。
|
失败时跳过 | 可选配置。
|
- 修改完成后，单击 保存，完成创建，
第三步：运行流水线
- 在流水线详情页 ，单击 立即执行。
-
-
操作结果
-
后续操作
访问 React 静态页面
部署完成后，您可以通过已注册和备案的自定义域名，访问 React 静态页面。
- 在 TOS 控制台，已创建的存储桶指定目录下，查看已上传的文件。
-
- 在自定义域名列表，获取静态页面的自定义域名。
-
- 在浏览器中输入 自定义域名+站点地址，即可展示 React 页面。例如 https://cp-test-demo-*****/index.html。
最近更新时间：2025.09.04 19:20:17
这个页面对您有帮助吗？
有用
有用
无用
无用