elpis(配置驱动页面系统)学习总结elpis: 一个通过 JSON 配置快速搭建项目、快速生成页面的全栈框架, 涵盖

elpis是什么

文档知识来源：抖音 “哲玄前端”，《大前端全栈实践课》

elpis可以理解为一个使用json配置快速搭建页面的全栈框架

里程碑一基于nodejs实现服务端内核引擎

项目初始化

一、仓库初始化（基于 coding、git、Sourcetree）

远程仓库创建：在 coding 平台创建项目及代码仓库，获取仓库地址。
克隆到本地：通过git clone命令将远程仓库克隆到本地，克隆时需输入 coding 绑定的邮箱 / 手机号及密码。
本地管理：在 WebStorm 中打开项目文件夹，并将其拖入 Sourcetree 进行版本管理，通过 “Sourcetree 暂存→提交（输入信息）→推送” 完成代码提交流程。

二、项目初始化（基于 Node.js 18.19.0）

配置忽略文件：添加.gitignore文件，指定忽略node_modules和package-lock.json，避免冗余文件提交。
初始化项目：执行npm init命令，配置 git 仓库地址、作者名称等信息，生成package.json文件。
依赖管理：
- 可安装 cnpm（国内源）提高下载速度，通过npm install cnpm -g --registry=https://registry.npmmirror.com安装。
- 用cnpm install --save-dev安装开发依赖，npm config相关命令可查看 / 修改镜像源。

三、使用 koa 创建服务器

通过 koa 框架创建基础服务器，监听0.0.0.0（支持远程访问）和指定端口（默认 8080），通过app.listen启动服务，并处理可能的错误。

四、代码规范（eslint）

配置文件：
- .eslintrc：定义 eslint 校验规则，包括支持的环境（browser、node）、解析器、插件及具体校验规则（如禁用未使用变量报错等）。
- .eslintignore：指定忽略校验的目录（如node_modules/、public/）。
校验命令：在package.json的scripts中添加"lint": "eslint --quiet --ext js,vue ."，用于检查 js 和 vue 文件。

五、提交规范（commit-msg）

提交格式：遵循<type>(<scope>): <subject>规范，其中type包括feat（新功能）、fix（改 bug）、docs（文档）等 7 类。
校验工具：
- 使用validate-commit-msg校验提交信息格式。
- 通过ghooks在提交前触发校验：在package.json中配置config.ghooks，设置commit-msg校验提交信息、pre-commit执行 eslint 检查。

feat: 新功能(feature)
fix: 修改bug
docs: 文档(documentation)
style: 格式(不影响代码运行的变动)
refactor: 重构(既不是新增功能, 也不是修改bug的代码变动)
test: 增加测试
chore: 构建过程或辅助工具的变动

六、gitflow 协同流程

核心分支：
- 线上主分支（固定）：master。
- 研发主分支（固定）：develop。
- 临时分支：hotfix-a（线上紧急修复）、feature-a（功能开发）。
工作流程：
- 从develop创建功能分支（如feature/change-readme），在功能分支开发。
- 功能完成后，推送功能分支到远程，在 coding 平台创建合并请求，将其合并到develop。
- 合并后，本地拉取develop分支更新，保持代码同步。

BFF层引擎内核的实现(elpis-core)`[核心]`

一、核心分支与启动逻辑

分支创建
新建feature/elpis-core分支并推送至远端，作为引擎内核开发的独立分支。
启动逻辑抽离
- 根目录index.js作为入口，引入elpis-core并调用start方法启动项目，支持传入配置（如项目名称）。
- elpis-core/index.js作为内核核心，创建 Koa 实例，配置基础路径（app.baseDir）、业务文件路径（app.businessPath），并启动服务（默认监听0.0.0.0:8080）。

二、环境判断模块

功能：区分本地（local）、测试（beta）、生产（production）环境，基于环境变量_ENV判断。
实现：elpis-core/env.js提供isLocal()、isBeta()、isProduction()等方法，默认环境为local；在elpis-core/index.js中初始化app.env，便于全局访问当前环境。

三、Loader 服务（7 个解析器）

Loader 的核心作用是自动加载项目特定目录下的文件，并挂载到 Koa 实例（app）上，实现模块化管理与便捷访问。

解析器	作用	加载路径	挂载位置	访问方式示例
`middleware.js`	加载中间件，支持多级目录结构，统一驼峰命名	`app/middleware/*/.js`	`app.middlewares`	`app.middlewares.customModel.customMiddleware`
`router-schema.js`	加载 API 参数校验规则（基于 json-schema），合并所有规则	`app/router-schema/*/.js`	`app.routerSchema`	`app.routerSchema['/api/project/list']`
`controller.js`	加载控制器（实例化类），支持多级目录，统一驼峰命名	`app/controller/*/.js`	`app.controller`	`app.controller.customModel.customController`
`service.js`	加载服务层（实例化类），支持多级目录，统一驼峰命名	`app/service/*/.js`	`app.services`	`app.services.customModel.customService`
`config.js`	加载环境配置，默认配置（`config.default.js`）与环境配置（如`config.local.js`）合并，环境配置覆盖默认配置	`config/`	`app.config`	`app.config.name`
`extend.js`	加载扩展工具（如日志），避免与`app`已有属性冲突	`app/extend/*/.js`	`app`直接挂载（如`app.logger`）	`app.logger.info(...)`
`router.js`	加载路由配置，注册所有路由，未匹配路由自动重定向至首页	`app/router/*/.js`	集成到 KoaRouter	通过路由路径访问（如`/view/page1`）

四、全局中间件注册

在elpis-core/index.js中添加逻辑，自动加载app/middleware.js（用户自定义全局中间件），支持注册模板引擎、静态资源处理等全局生效的中间件。

引擎内核的应用(实现前后端的可联调)

引擎内核的应用围绕 “功能实现 - 可维护性 - 可用性 - 安全性” 层层递进，通过环境隔离、模板渲染、API 分层设计、基类复用、中间件校验等手段，构建了一套完整的 BFF 层服务框架，支持动态页面渲染、安全 API 交互及跨环境部署。

一、异常处理与环境配置

基础文件创建
- 在config目录下创建环境区分的配置文件（config.default.js、config.local.js、config.beta.js、config.production.js），通过 “环境配置覆盖默认配置” 的逻辑，实现不同环境的参数隔离。
- 在app目录下创建middleware.js，用于注册全局中间件（如模板渲染、静态资源处理等）。
跨系统启动脚本优化
- 原 Windows 与 Mac 系统环境变量设置不兼容（如set与直接赋值的差异），通过cross-env统一环境变量配置，在package.json中定义跨系统启动命令：
```
   "scripts": {
     "dev": "cross-env _ENV=local nodemon ./index.js",
     "beta": "cross-env _ENV=beta node ./index.js",
     "prod": "cross-env _ENV=production node ./index.js"
   }
```
- 启动时通过process.env._ENV获取当前环境，动态加载对应配置。

二、页面渲染与静态资源

模板渲染引擎配置
- 使用koa-nunjucks-2作为模板引擎，在app/middleware.js中配置模板路径（app/public）和后缀（tpl），支持动态数据渲染（如通过{{name}}注入变量）。
页面与路由实现
- 在app/public/output中创建页面模板（如entry.page1.tpl、entry.page2.tpl），通过控制器（app/controller/view.js）的renderPage方法动态渲染，路由（app/router/view.js）映射/view/:page路径，实现http://localhost:8080/view/page1访问对应页面。
- 支持向模板传递配置参数（如项目名称、环境变量），前端通过隐藏输入框存储并解析这些参数。
静态资源引入
- 在app/public/static存放静态资源（logo.png、normalize.css），通过koa-static中间件配置静态资源访问路径，前端直接通过/static/xxx引用。

三、API 请求实现

接口分层设计
- 路由层（app/router/project.js）：定义/api/project/list路径，映射到控制器方法。
- 控制层（app/controller/project.js）：调用服务层获取数据，统一返回格式（{success: true, data, metadata}）。
- 服务层（app/service/project.js）：封装业务逻辑（如返回项目列表数据）。
前端调用
- 在页面模板中添加按钮，通过axios发送请求调用/api/project/list，成功后在控制台打印返回数据。

四、代码可维护性优化

基类封装
- 控制器基类（app/controller/base.js）：统一响应格式（success/fail方法），复用公共逻辑（如获取配置、应用实例）。
- 服务基类（app/service/base.js）：集成 HTTP 请求工具（superagent），统一数据请求逻辑。
日志工具
- 通过log4js实现日志功能（app/extend/logger.js），开发环境日志打印到控制台，测试 / 生产环境输出到logs/application.log文件（按日期切分），支持app.logger.info/error调用。

五、代码可用性优化

POST 请求数据解析：通过koa-bodyparser中间件解析请求体（ctx.request.body），支持表单、JSON 等数据格式，解决 POST 参数获取问题。

六、代码安全性优化

异常捕获中间件
- 创建app/middleware/error-handler.js作为洋葱模型最外层，捕获所有运行时异常：
  - 页面不存在时重定向到首页；
  - 代码错误时返回统一错误格式（{success: false, message: "网络异常"}），避免敏感信息暴露。
签名校验（对称校验）
- 通过app/middleware/api-sign-verify.js验证 API 请求合法性：
  - 前后端共享signKey，前端通过md5(signKey + 时间戳)生成签名，后端验证签名一致性及请求超时（60 秒内有效）；
  - 非 API 请求跳过校验，确保接口安全。
参数校验（json-schema + ajv）
- 通过app/router-schema/project.js定义 API 参数规则（如/api/project/list需proj_key参数），使用ajv校验请求参数（query/body/params），不合法时返回具体错误信息。

query 与 params 区别

属性	query（查询参数）	params（路径参数）
来源	URL 查询字符串（`?key=value`）	URL 路径动态部分（`/path/:id`）
用途	可选参数（筛选、分页）	必需参数（资源 ID）
Koa 获取方式	`ctx.query`	`ctx.params`
示例	`/list?page=1`	`/user/123`

里程碑二基于webpack5的工程化构建

webpack工程化

一、页面基础构建

页面结构设计
基于 Vue 框架创建页面，每个页面包含入口文件（entry.xx.js）和 Vue 组件（xx.vue）：
- 入口文件（如page1/entry.page1.js）：通过createApp挂载 Vue 组件到 DOM。
- Vue 组件（如page1/page1.vue）：包含模板、脚本（使用script setup语法）和样式（支持 less），实现页面交互逻辑（如输入框双向绑定）。

二、webpack 基础配置

核心配置文件
- 入口文件：app/webpack/build.js，用于启动 webpack 打包流程。
- 基础配置：app/webpack/config/webpack.base.js，定义打包的核心规则。
关键配置项
- 入口（entry） ：指定页面入口文件（如entry1.page1对应page1/entry.page1.js）。
- 模块解析（module.rules） ：通过 loader 处理不同类型文件：
  - vue-loader：解析.vue文件；
  - babel-loader：转译 JS 代码（仅处理业务目录app/pages）；
  - url-loader/file-loader：处理图片、字体等静态资源；
  - css-loader/less-loader：解析 CSS 和 less 样式。
- 输出（output） ：指定打包文件路径（app/public/dist/prod），文件名包含chunkhash用于缓存。
- 插件（plugins） ：
  - VueLoaderPlugin：配合vue-loader解析 Vue 组件；
  - HtmlWebpackPlugin：根据模板（app/view/entry.tpl）生成最终页面模板，注入对应的 JS chunk；
  - DefinePlugin：定义 Vue 全局变量（如禁用生产环境调试工具）。

三、动态化与分包优化

页面入口动态化
通过glob模块自动扫描app/pages下所有entry.*.js文件，动态生成entry配置和HtmlWebpackPlugin实例，避免手动维护入口，支持新增页面自动打包。
分包与缓存策略
通过optimization.splitChunks配置，将代码分为三类：
- vendor：第三方库（如 Vue），极少变动，利用长期缓存；
- common：业务公共代码（如common/utils.js），被多个页面引用时抽离；
- 页面入口代码：各页面独立逻辑，变动频繁。
效果：减少重复加载，提升浏览器缓存利用率。

四、环境区分配置

生产环境（prod）
- 配置文件：app/webpack/config/webpack.prod.js，基于基础配置扩展。
- 优化策略：
  - 多线程打包：通过HappyPack利用多核 CPU 加速打包；
  - 清除旧文件：CleanWebpackPlugin打包前清空输出目录；
  - 样式处理：MiniCssExtractPlugin提取 CSS 为单独文件，CSSMinimizerPlugin压缩样式；
  - JS 压缩：TerserWebpackPlugin压缩 JS 并移除console.log，减少生产环境代码体积。
- 启动命令：npm run build:prod。
开发环境（dev）
- 配置文件：app/webpack/config/webpack.dev.js，支持热更新。
- 核心特性：
  - 热模块替换（HMR）：通过webpack-dev-middleware和hot-middleware，实现代码修改后实时更新（无需手动刷新）；
  - 源码映射（devtool）：使用eval-cheap-module-source-map，方便开发时调试。
- 启动命令：npm run build:dev，启动开发服务器（默认端口 9002）。

五、效果与总结

打包效果
- 生产环境：输出压缩后的 JS、CSS 和页面模板，位于app/public/dist/prod，可直接部署。
- 开发环境：启动热更新服务器，修改代码后实时生效，提升开发效率。
核心价值
- 自动化：动态识别页面入口，减少手动配置；
- 性能优化：分包策略提升加载速度和缓存利用率；
- 环境适配：生产环境注重压缩和效率，开发环境注重便捷性。

前端 - 框架基础建设

一、公共设施引入（Router、Pinia、UI 框架）

核心启动文件（boot.js）
封装 Vue 应用初始化逻辑，统一处理第三方库引入、路由配置和状态管理，简化页面启动流程：
- UI 框架：集成 Element Plus，通过app.use(ElementUI)全局注册，支持组件直接使用（如el-input、el-table）。
- 状态管理：引入 Pinia（$store），通过app.use(pinia)挂载，实现跨组件状态共享。
- 路由配置：基于vue-router，支持传入路由列表动态创建路由实例，采用createWebHashHistory（哈希模式），确保路由就绪后再挂载应用。
目录结构与配置
- app/pages/store/index.js：创建 Pinia 实例，供全局使用。
- app/pages/asserts/custom.css：定义公共样式（如基础布局、输入框自动填充样式覆盖），全局生效。

二、页面改造与集成

页面入口优化
每个页面的入口文件（如page1/entry.page1.js）通过引入boot.js的boot方法启动应用，无需重复编写初始化逻辑，示例：
```
import boot from '$pages/boot.js';
import page1 from './page1.vue';
boot(page1); // 自动集成Element、Pinia等公共设施
```
页面组件实现
页面组件（如page1.vue）使用 Element Plus 组件（el-input、el-table）构建 UI，通过 Vue 3 的script setup语法编写逻辑，支持响应式数据（ref）和生命周期钩子（onMounted）。

三、网络基础建设（Axios 二次封装）

全局依赖配置
在webpack.base.js中通过webpack.ProvidePlugin暴露axios和lodash到全局，无需手动引入即可在代码中使用（如axios.request、_.cloneDeep）。
请求封装（curl.js）
对 Axios 进行二次封装，统一处理签名、错误提示和响应格式：
- 签名机制：生成时间戳（st）和签名（s_sign = md5(signKey + st)），添加到请求头，与后端签名校验对应。
- 错误处理：根据后端返回的code显示不同错误提示（如参数异常、请求不合法），使用 Element Plus 的ElMessage组件展示。
- 响应统一：格式化响应数据，仅返回success、data、metadata等核心字段，简化业务层处理。

使用示例
在页面中通过$curl发送请求，自动处理签名和错误，示例：

import $curl from '$common/curl';
onMounted(async () => {
  const res = await $curl({
    method: 'get',
    url: '/api/project/list',
    query: { proj_key: "111" }
  });
  tableData.value = res.data; // 直接使用数据
});

四、效果总结

通过引入公共设施和封装网络请求，实现了：

开发效率提升：统一的初始化逻辑和全局依赖，减少重复代码。
UI 一致性：基于 Element Plus 构建页面，风格统一且组件丰富。
网络安全性：签名机制确保请求合法性，错误处理提升用户体验。
可维护性：封装的boot.js和curl.js便于统一修改配置，降低维护成本。

里程碑三 vue3领域模型构建

一、模板化 DSL 核心逻辑

核心目标
通过 “模型（model）+ 项目（project）” 的继承关系，实现 “一个模板产出多个类似产品”。模型定义基础配置（如通用菜单、功能模块），项目基于模型进行修改、新增或保留配置，避免重复开发。
解析引擎（model/index.js）
- 配置扫描：通过 glob 扫描 model 目录下的 model.js（模型配置）和 project/*.js（项目配置），区分配置类型。
- 继承逻辑：通过 projectExtendModel 方法实现项目对模型的继承：
  - 数组类型配置（如菜单）：项目中存在的键值覆盖模型（修改），项目新增的键值添加到模型（新增），模型独有的键值保留（继承）。
  - 最终输出整合后的配置结构，供后续页面和接口使用。

二、模型与项目配置示例

模型定义（model/[类型]/model.js）
定义某类产品的基础配置，如电商系统（buiness/model.js）包含商品管理、订单管理等通用菜单；课程系统（course/model.js）包含视频管理、用户管理等基础功能。
项目配置（model/[类型]/project/[项目名].js）
基于模型扩展或修改，如拼多多（buiness/project/pdd.js）在电商模型基础上修改 “商品管理” 名称，新增 “信息查询” 菜单；抖音课堂（course/project/douyin.js）新增 “流量管理” 模块。

三、项目列表与接口实现

核心接口
- 获取模型列表（/api/project/model_list）：返回所有模型及下属项目的结构化数据（模型名称、项目名称 / 描述等）。
- 获取项目列表（/api/project/list）：根据项目键（proj_key）筛选同模型下的项目，或返回全量项目。
- 获取项目配置（/api/project）：根据 proj_key 返回具体项目的详细配置（菜单、功能模块等）。
页面展示（project-list.vue）
通过卡片组件展示模型分组下的所有项目，包含项目名称、描述及 “进入” 按钮，点击后跳转至项目 dashboard。

四、Dashboard 实现

核心功能
作为项目主入口，动态渲染项目菜单、支持项目间切换、实现路由跳转，基于 Pinia 管理菜单和项目状态。
关键组件
- 头部菜单（header-view.vue） ：根据项目配置渲染顶部菜单，支持项目切换（通过下拉框）和菜单选择（触发路由跳转）。
- 路由配置：使用 vue-router 的 history 模式，定义主页面及子路由（如 /sider 侧边栏路由、/iframe 嵌入页路由）。
- 状态管理：通过 Pinia 的 menuStore 和 projectStore 缓存菜单列表和项目列表，实现跨组件状态共享。

五、模板引擎组件

SiderView（侧边栏菜单）
- 基于项目配置中的 siderConfig 动态渲染左侧菜单，支持多级嵌套（通过 sub-menu 组件递归渲染）。
- 结合路由实现侧边栏菜单与主内容区的联动，默认选中第一个菜单项。
IframeView（嵌入外部页面）
根据项目配置中的 iframeConfig.path，在 iframe 标签中嵌入外部页面（如百度、淘宝），实现跨系统集成。
SchemaView（动态表单与表格）
- 核心思想：通过 schema 配置动态生成 UI 组件，无需手写页面。
- 组件拆分：
  - schema-table.vue：基于 schema.properties 渲染表格列，支持分页、数据加载、行操作按钮（如删除）。
  - search-panel.vue：基于 schema.searchConfig 渲染搜索表单，支持条件查询。
  - table-panel.vue：整合表格和头部操作按钮（如新增、批量删除），通过 API 交互实现数据增删改查。

六、优化与扩展

懒加载与性能
通过 Webpack 配置 splitChunks 拆分代码（第三方库 vendor、公共业务代码 common、页面独立代码），利用浏览器缓存提升加载速度。
权限与安全
- 接口签名校验：通过 s_t（时间戳）和 s_sign（签名）验证请求合法性，防止超时和伪造请求。
- 参数校验：基于 json-schema 和 ajv 校验接口参数，确保输入合法。
测试保障
通过 mocha 编写测试用例，验证模型解析、接口返回格式、菜单渲染等核心逻辑，确保功能稳定性。

里程碑四 vue3动态组件库实现

动态组件

整体结构

DSL 采用 JSON 格式，核心字段包括：

mode: 模板类型（固定为 'dashboard'）
name/desc/icon: 仪表盘基本信息
homePage: 首页路径
menu: 顶部菜单配置，支持多级嵌套

菜单配置

菜单项目支持两种类型：

分组菜单（group） : 包含子菜单列表
模块菜单（module） : 包含四种模块类型
- sider: 侧边栏菜单
- iframe: 内嵌 iframe 页面
- custom: 自定义组件路径
- schema: 基于数据模型的动态组件

Schema 配置核心

这是 DSL 的重点，支持动态生成 UI 组件：

{
  "api": "数据源API",
  "schema": {
    "type": "object",
    "properties": {
      "字段1": {
        "type": "字段类型",
        "label": "中文名",
        "tableOption": { /* 表格列配置 */ },
        "searchOption": { /* 搜索栏配置 */ },
        "createFormOption": { /* 创建表单配置 */ }
      }
    },
    "tableConfig": { /* 表格整体配置 */ },
    "searchConfig": { /* 搜索栏整体配置 */ },
    "componentConfig": { /* 动态组件配置 */ }
  }
}

动态组件特性

表格配置：支持表头按钮和行操作按钮，可绑定自定义事件
搜索栏配置：支持多种组件类型（input/select 等）
表单配置：支持自定义表单标题、按钮文本及字段级配置

该 DSL 设计实现了 "配置即代码" 的理念，通过统一的 JSON 结构配置复杂的仪表盘界面，显著提升了前端开发效率和可维护性。

里程碑五抽离成npm包并发布

一、项目初始化与基础配置

仓库与环境搭建
- 创建代码仓库并克隆到本地，通过npm init初始化项目，指定作者信息。
- 配置.gitignore文件，忽略node_modules等无需提交的目录 / 文件。
- 在elpis项目中创建feature/sdk-npm分支，修改package.json的name为带 npm 账户名的作用域形式（如@tangliuyu/elpis）。
本地联调配置
- 通过npm link在elpis项目中创建本地链接，再在elpis-demo中通过npm link @tangliuyu/elpis引入，实现本地开发时的包依赖关联。
- 调整elpis的入口文件index.js，暴露核心启动方法serverStart，并在elpis-demo的server.js中调用，验证基础功能。

二、elpis-core 核心功能对外扩展

通过加载器（loader）实现middleware、router-schema、controller、service、config、extend等模块的可扩展性，支持业务项目（如elpis-demo）自定义内容：

加载逻辑：每个模块的加载器会同时读取elpis内置文件和业务项目对应目录的文件，合并后挂载到app实例（如app.middlewares、app.routerSchema）。
示例：在elpis-demo中创建app/middleware/demo.js，可通过app.middlewares.demo访问；配置config文件时，业务配置会覆盖elpis的默认配置。

三、webpack 前端构建扩展

环境配置
- 拆分webpack配置为base、dev、prod，分别处理基础配置、开发环境（热更新）和生产环境（压缩、优化）。
- 在elpis的index.js中暴露frontendBuild方法，支持通过环境变量（local/production）触发不同构建流程。
路径与自定义能力
- 动态识别elpis和业务项目的pages目录，自动构建入口文件和 HTML 模板，支持业务项目自定义页面覆盖或扩展内置页面。
- 通过webpack别名（如$businessWebpackConfig）允许业务项目自定义webpack配置，实现个性化构建。

四、路由与组件扩展

路由自定义
- 在dashboard页面中预留路由扩展接口，业务项目可通过router.js动态添加头部 / 侧边栏路由（如elpis-demo中添加todo页面路由）。
组件与控件扩展
- 动态组件：schema-view支持通过component-config.js扩展自定义组件（如demo-component），并在页面中调用。
- 表单控件：schema-form允许通过form-item-config.js扩展自定义表单控件（如demo-form-item），并在表单配置中指定使用。

五、收尾与发布

代码整理
- 将elpis中业务相关代码迁移到elpis-demo，暴露Controller和Service基类供业务项目继承。
- 编写README.md，文档化model配置、服务端启动、前端构建、自定义扩展等核心用法。
npm 发布
- 整理package.json，区分devDependencies（开发依赖）和dependencies（生产依赖），保留必要脚本。
- 切换 npm 源至官方仓库，通过npm login登录账户后，执行npm publish --access public发布包。
使用验证
- 在elpis-demo中移除本地链接，通过npm i @tangliuyu/elpis安装发布的包，测试功能完整性。

部署与发布

一、持续集成（CI）：构建 Docker 镜像并推送至制品库

创建构建计划
在 Coding 平台新建构建计划，指定分支（publish-demo），配置执行环境为默认节点，并设置触发规则（如分支推送时自动执行）。
配置构建脚本与环境变量
- 执行脚本：通过docker build命令构建镜像，参数包括镜像名、版本、Dockerfile 路径等。
- 环境变量：定义镜像名（elpis-demo-image-beta）、版本（关联 Git 分支和提交哈希）、Dockerfile 路径（publish/beta/Dockerfile）等，确保构建过程动态适配代码版本。
编写 Dockerfile
基于node:18镜像，创建工作目录，复制代码，暴露端口（8081），并设置启动命令（npm run beta）。
配置制品库
在 Coding 平台创建 Docker 制品库（elpis-demo-007），用于存储构建后的镜像，并在构建计划中关联制品库，实现构建完成后自动推送镜像。

二、持续部署（CD）：部署镜像至腾讯云 K8s 集群

准备云资源
- 在腾讯云创建 Kubernetes 集群，开启公网访问，创建命名空间（elpis-demo-beta）。
- 在 Coding 平台绑定腾讯云账号，授权访问云资源。
创建部署文件
- deployment.yaml：定义 Deployment 资源，指定镜像（来自 Coding 制品库）、容器端口、镜像拉取密钥（关联制品库权限）。
- service.yaml：定义 Service 资源，通过LoadBalancer类型暴露端口（8081），关联 Deployment 的 Pod 标签。
配置部署流程
在 Coding 平台创建部署流程，设置触发器（如 CI 构建成功后自动触发），添加部署步骤：
- 部署 Deployment：应用deployment.yaml，创建 Pod 实例。
- 部署 Service：应用service.yaml，暴露服务至公网。
执行部署
触发部署流程后，自动拉取镜像、创建容器，并通过 Service 分配公网 IP，完成应用上线。

elpis(配置驱动页面系统)学习总结