文档中心

持续交付

最佳实践

通过NodeJS流水线白屏化构建镜像并发布Vite+React前端项目

本文以部署一个基于 Vite 的 React 前端应用为例，为您演示如何通过 Node.js 流水线实现白屏化构建前端镜像，并通过托管应用实现应用更新和公网访问。

场景介绍

本文将结合持续交付的流水线和应用交付功能，为您演示如何完成 Vite + React 项目的容器镜像白屏化构建和 Kubernetes 部署。适用于不熟悉 Docerfile 和 K8s 相关知识，但希望完成容器化部署前端应用的开发者。

NodeJS 编译构建&托管应用镜像构建：通过该流水线任务，完成 Vite + React 项目源码的编译构建，并将构建得到的静态资源通过白屏化的方式制作为容器镜像。镜像中使用 Nginx 对静态资源进行反向代理。

NodeJS 应用托管：NodeJS 托管应用使用容器镜像的方式进行部署。本文使用流水线产出的镜像，对 NodeJS 应用进行部署。并通过添加负载均衡（公网）的方式，实现 Vite + React 项目的公网访问。

NodeJS 编译构建&托管应用镜像构建 + 托管应用部署：后续可通过该流水线模板，实现 Vite + React 项目的自动化更新。

前提条件

已准备好前端项目，并上传至您的代码仓库。本文通过以下命令创建了一个最简单的 Vite + React 项目，并上传至 Gitee 代码仓库。更多开发 Vite 前端项目的内容请参见 Vite 官方文档。

npm create vite@latest react-demo -- --template react-ts

持续交付准备工作

已创建工作区，详细操作请参见创建工作区。

已将包含前端项目的代码仓库接入持续交付。详细操作请参见创建代码源。

已接入待部署的 Kubernetes 集群，具体操作请参见接入部署资源。

操作步骤

步骤一：NodeJS 编译构建&托管应用镜像构建

创建流水线

登录持续交付控制台。

在左侧导航栏选择工作区，在工作区页面单击目标工作区名称，进入当前工作区。

单击创建流水线，弹出选择流水线模板对话框。

选择 NodeJS - 编译构建 & 托管应用镜像构建 - 应用部署，单击确定，进入当前流水线的流程编排页面。

流程编排

配置代码源。在代码源&触发器区域，单击添加 > 代码源。本文选择前提条件中创建的 Gitee 代码源。事件触发不启用。

配置 NodeJS 编译构建&托管应用镜像构建任务。

单击 NodeJS 编译构建&托管应用镜像构建任务卡片，弹出编辑任务面板。

配置 NodeJS 编译构建步骤。

配置项	说明
步骤名称	默认为NodeJS编译构建，本示例保持默认。
版本	选择 NodeJS 编译构建使用的版本。本示例使用 20.11.0。
编译命令	根据实际业务，编写编译命令。本示例如下： npm install npm run build
失败时跳过	开启后当前步骤运行失败直接跳过。本示例不开启。

配置托管应用镜像构建步骤。

配置项	说明
步骤名称	默认为托管应用镜像构建，本示例保持默认。
镜像地址	输入镜像构建成功后要推送的仓库地址，支持 HTTP 和 HTTPS 协议。格式为host/namespace/repo:tag。其中，镜像地址支持使用动态参数，例如本示例为：xxx.com/doc-demo/react-demo:$(PIPELINERUN_ID)_$(DATETIME)。
用户名/密码	输入目标镜像仓库登录账号和密码。
忽略证书有效性	可选配置。勾选后，当前步骤中的所有内容不再校验 HTTPS 证书有效性。例如：推送/拉取镜像的仓库地址不再校验 HTTPS 证书有效性。本示例保持关闭。
是否使用镜像缓存	默认开启缓存，用于加速镜像构建，解决基础镜像拉取耗时长的问题。
nginx 配置	反向代理静态资源，用于网页访问。本示例的 nginx 配置如下： server { listen 80; server_name localhost; location /assets { root /usr/www/html; } location / { root /usr/www/html; index index.html index.htm; } }
是否拷贝静态文件	是否将静态文件拷贝至镜像中。本示例需要将 NodeJS 编译构建生成的静态资源拷贝至镜像中，故打开该开关。
源文件目录	填写静态文件资源所在目录。本示例项目通过 vite 构建，生成的产物在 dist 目录下，故本示例源文件目录为dist。
目标文件目录	填写静态文件拷贝到镜像中的目标目录，需要与 nginx 配置中监听的 root 保持一致。本示例目标文件目录为 /usr/www/html。
失败时跳过	开启后当前步骤运行失败直接跳过。本示例不开启。

其他配置项均保持默认。单击确定，完成当前任务卡片配置。

删除应用托管部署阶段。

由于当前还未创建 Nodejs 托管应用，无法通过流水线应用部署任务对应用进行部署，故先删除应用托管部署阶段。

单击保存，保存当前流水线配置。

运行流水线

在流水线列表页，选择刚才创建的目标流水线，单击操作列的运行图标。

在弹出的运行流水线对话框中，确认使用的代码源分支信息，可选填写运行说明。

单击确定，流水线开始运行，系统跳转至当前流水线的详情页面。

流水线运行成功后，可获取到构建的镜像地址。复制该镜像地址备用。

步骤二：NodeJS 应用托管

创建并部署 NodeJS 托管应用

在当前工作区，选择左侧导航栏的应用交付 > 应用管理。

在应用管理页面，单击创建应用。

在创建应用页面，选择应用托管，并按要求填写应用的相关配置信息。

填写应用信息，填写完成后单击下一步：基础配置。

配置项	说明
应用标识	根据界面提示填写应用标识。应用标识是应用的唯一标识，创建后不可更改。
应用显示名	自定义应用的显示名称。
应用技术栈	本场景选择其他。
描述	填写当前应用的备注信息，可以为空。
成员管理	快捷配置当前应用的成员，并为每个成员配置不同的权限，满足多角色协作进行应用交付的需求。系统会默认添加火山引擎账号（主账号）及应用创建者为管理员。本示例不再添加其他成员。

填写基础配置，填写完成后单击下一步：环境配置。

配置项	说明
部署方式	本场景选择镜像部署。
应用镜像	输入应用使用的镜像地址，镜像地址格式为host/namespace/repo:tag。本示例输入步骤一获得的镜像地址。
镜像拉取鉴权	如果使用的镜像为私有镜像，需要打开镜像拉取鉴权开关，并输入正确的镜像仓库用户名和密码。本示例储存的镜像仓库为公有，无需开启。
版本号	自定义应用的版本号。可单击右侧的版本号使用时间戳，自动生成版本号。
弹性容器实例	是否以弹性容器实例方式部署应用。本示例不开启。
服务规格	根据业务需求定义应用的服务规格，包括：实例数、每个实例的 CPU 和内存规格。本示例保持默认。

填写环境配置，填写完成后单击下一步：高级配置。

配置项	说明
部署资源	选择前提条件中已接入的 Kubernetes 集群。
Namespace	选择要部署到的命名空间。
环境标识	根据应用标识自动生成，可以修改。本示例保持默认。