跳至主要内容

示例：front-era（Node.js）

翻譯正在進行中本指南目前僅提供簡體中文版本，其他語言版本將在後續補充。

本例演示 Monorepo 中的前端模块通过 Spark Managed NPM Build 生成静态文件，再包装为 Nginx 容器镜像并部署到 K8S。

1. 目标结果​

os-front repository
  → apps/hiforce-ide/package.json
  → Yarn install + build
  → apps/hiforce-ide/build
  → generated Nginx runtime image
  → K8S namespace prod

这与 Static Artifact 不同。本例选择 Container Image，因此可以继续使用 Deploy to K8S。

2. 平台准备​

  1. K8S Cluster 的 Harbor Config 已设置 Node.js Builder 和 Kaniko Image。
  2. NPM Config 提供构建需要的 .npmrc 与缓存路径；私有 scope 的 Token 必须打码并受控保存。
  3. 创建 Node.js 兼容的 Deployment Template。
  4. 确认 builder 支持仓库 lockfile 对应的 Yarn 版本。
front-era 的 Node.js 集群准备展示 Node.js Builder、NPM .npmrc/cache 和 Node.js Deployment Template。images/spark-pipeline-example-node-platform-01.webp
截图待补充

3. App 与 Repository​

App Name: 纪元Dev前端
App Code: front-era
Capabilities: Repository, Pipeline

Language: Node.js
Repository URL: https://e.coding.net/hiforce-inc/hiforce-front/os-front.git
Baseline Branch: master
Git Secret: <选择可读取该仓库的 Git Secret>

4. Production 环境​

Environment Code: prod
Environment Name: Production
Environment Type: PROD
Cluster Type: K8S
Namespace: prod

关键 Deployment Configuration：

配置示例值
Container Namefront-era
Release ModeCONTAINER_IMAGE
Build ModeNPM
Package ManagerYARN
Frontend Build Pathapps/hiforce-ide
Frontend Output Pathbuild
Env Config File Path./envs/.env.eu.production
Image Repositoryhiforce/front-era
Container / Service Port80 / 80
Replicas1
CPU Request / Limit100m / 1000m
Memory Request / Limit256Mi / 1024Mi
front-era Node.js 构建配置展示 Container Image、NPM、Yarn、Monorepo Build Path、Output Path、环境文件和 Nginx Config。images/spark-pipeline-example-node-deployment-02.webp
截图待补充

Frontend Build Path 指向 package.json 所在目录；Frontend Output Path 相对于该目录，不是仓库根目录。环境文件路径也必须是仓库中的相对路径。

5. Nginx 与健康检查​

Managed NPM Build 的 Container Image 模式需要 Nginx Config。至少应包含：

  • 静态产物根目录
  • SPA 的 try_files ... /index.html
  • 必需的 API/WebSocket 反向代理
  • 与应用策略一致的缓存和安全 Header

健康检查必须与 Nginx 实际配置一致。如果配置没有提供 /health/startup、/health/liveness、/health/readiness，应增加这些 location，或把 Probe Path 改为一个真实返回成功的轻量路径，例如 /。不要复制一个不存在的后端健康端点。

6. Pipeline​

Build Settings：

Build Context Path: .
Build Command: 由 Spark Node.js Managed NPM Build 执行

阶段：

1. Build Image
2. Test Gate
3. Deploy to K8S

Build Logs 应展示 package manager、registry、模块路径、环境文件、构建输出和镜像推送结果。

7. Gate 验证​

  • 安装阶段使用预期的 Registry 和 lockfile。
  • apps/hiforce-ide/build 已生成且包含入口文件。
  • .env.eu.production 确实对应目标环境，且不包含不应打入浏览器包的 Secret。
  • Nginx 能加载 SPA 路由、静态资源、API 和 WebSocket。
  • 浏览器没有因错误 base path、缓存或跨域配置出现白屏。
front-era 构建日志与运行验证展示 Yarn 构建、输出目录、镜像推送，以及部署后 SPA 首页和 Network 验证。images/spark-pipeline-example-node-gate-03.webp
截图待补充

8. 何时使用其他模式​

  • 仓库已有完整多阶段 Dockerfile时，可把 Build Mode 改为 Dockerfile。
  • 只希望发布到 CDN/对象存储时，可选择 Static Artifact；当前不要再添加 Deploy to K8S。
  • Monorepo 中不同前端使用不同 App 和 Frontend Build Path，可共享同一个 Repository，但各自维护环境、制品和发布历史。
最後於 更新