You need to enable JavaScript to run this app.
导航
持续交付
  • 文档首页
    • /持续交付/最佳实践/通过NodeJS流水线白屏化构建镜像并发布Vite+React前端项目（v2）
通过NodeJS流水线白屏化构建镜像并发布Vite+React前端项目（v2）
最近更新时间：2024.11.06 19:20:42首次发布时间：2024.06.17 11:22:36
我的收藏

本文以部署一个基于 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 编译构建&托管应用镜像构建

  1. 创建流水线

    1. 登录 持续交付控制台。
    2. 在左侧导航栏选择 工作区，在工作区页面单击目标工作区名称，进入当前工作区。
    3. 单击 创建流水线，弹出 选择流水线模板 对话框。
    4. 选择 NodeJS - 编译构建 & 托管应用镜像构建 - 应用部署，单击 确定，进入当前流水线的流程编排页面。
      alt

  2. 流程编排

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

    alt

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

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

        alt

      2. 配置 NodeJS 编译构建 步骤。

        alt

        配置项说明
        步骤名称默认为NodeJS编译构建，本示例保持默认。
        版本选择 NodeJS 编译构建使用的版本。本示例使用 20.11.0。

        编译命令

        根据实际业务，编写编译命令。本示例如下：

        npm install
npm run build
        失败时跳过开启后当前步骤运行失败直接跳过。本示例不开启。

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

        alt

        配置项说明
        步骤名称默认为托管应用镜像构建，本示例保持默认。

        镜像地址

        输入镜像构建成功后要推送的仓库地址，支持 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。

        失败时跳过开启后当前步骤运行失败直接跳过。本示例不开启。

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

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

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

  3. 运行流水线

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

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

      alt

    3. 单击 确定，流水线开始运行，系统跳转至当前流水线的详情页面。
      流水线运行成功后，可获取到构建的镜像地址。复制该镜像地址备用。
      alt

步骤二：NodeJS 应用托管

  1. 创建并部署 NodeJS 托管应用

    1. 在当前工作区，选择左侧导航栏的 应用交付 > 应用管理。
    2. 在应用管理页面，单击 创建应用。
    3. 在创建应用页面，选择 应用托管，并按要求填写应用的相关配置信息。

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

        配置项说明
        应用标识根据界面提示填写应用标识。应用标识是应用的唯一标识，创建后不可更改。
        应用显示名自定义应用的显示名称。
        应用技术栈本场景选择 其他。
        描述填写当前应用的备注信息，可以为空。

        成员管理

        快捷配置当前应用的成员，并为每个成员配置不同的权限，满足多角色协作进行应用交付的需求。
        系统会默认添加火山引擎账号（主账号）及应用创建者为管理员。本示例不再添加其他成员。

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

        alt

        配置项说明
        部署方式本场景选择 镜像部署。

        应用镜像

        输入应用使用的镜像地址，镜像地址格式为host/namespace/repo:tag。
        本示例输入步骤一获得的镜像地址。

        镜像拉取鉴权

        如果使用的镜像为私有镜像，需要打开镜像拉取鉴权开关，并输入正确的镜像仓库用户名和密码。
        本示例储存的镜像仓库为公有，无需开启。

        版本号自定义应用的版本号。 可单击右侧的 版本号使用时间戳，自动生成版本号。
        弹性容器实例是否以弹性容器实例方式部署应用。本示例不开启。
        服务规格根据业务需求定义应用的服务规格，包括：实例数、每个实例的 CPU 和内存规格。本示例保持默认。

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

        alt

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

      4. 高级配置 保持默认。

        alt

      5. 单击 确定，应用将开始部署。可在环境页签查看应用的部署进度。
        部署状态变更为 已完成， 实例运行状态为 running 表示部署成功。
        alt

  2. 添加 负载均衡 （公网）

    1. 切换至应用编排页签，在访问方式设置栏，选择 负载均衡（公网）> 添加负载均衡（公网）。

    2. 在添加负载均衡（公网）对话框，设置负载均衡参数。
      容器端口需与 nginx 配置中监听的端口保持一致。本示例为 80。

      alt

    3. 单击 确定，负载均衡（公网）开始创建。
      创建完成后，可在表格中查看负载均衡（公网）的端口映射：<负载均衡 IP>:<端口号>。
      alt

结果验证

使用具有公网访问权限的机器，在浏览器地址栏中输入<负载均衡 IP>:<端口号>，例如101.xx.xx.xx:80，可成功访问到 Vite + React 项目首页。
alt

后续操作

本文部署 NodeJS 托管应用是通过手动部署的方式。然而敏捷迭代过程中，团队更希望通过流水线代码变更事件自动触发镜像构建和应用部署。达到上述目的，只需对当前流水线进行两处修改：

  1. 在当前流水线 流程编排 页面，单击代码源处，打开配置输入源对话框，开启 事件触发， 并勾选 触发事件。 更多介绍请参见 代码源触发。

    alt

  2. 在当前流水线 流程编排 页面，在 NodeJS 编译构建&托管应用镜像构建 后添加 应用部署 任务，使用上游产物对 NodeJS 托管应用进行镜像升级。更多介绍请参见 应用部署。

    alt