腾龙开发底座

主题

Apaas平台适配 ​

本章节介绍腾龙适配集团apaas平台相关改造

第一步：安装vite插件 ​

安装依赖 ​

  • @pubinfo/apaas - 适配apaas平台的vite插件
  • cross-env - 用于设置环境变量
bash
pnpm add @pubinfo/apaas cross-env -w

添加vite插件 ​

apps/rbac/vite.config.ts 中添加插件

typescript
import { defineConfig } from '@pubinfo/vite'
import { VitePluginApaas } from '@pubinfo/apaas'
// 配置文件将会深度合并
export default defineConfig({
  build: {
    outDir: 'rbac',
  },
  plugins: [
    VitePluginApaas(),
  ],
})

第二步：添加apaas配置文件 ​

新建配置文件 ​

新建app/rbac/apaas.config.ts文件，内容如下：

typescript
import { defineConfig } from '@pubinfo/apaas'

export default defineConfig({
  url: [
    {
      name: 'VUE_APP_BASE_URL',
      replace: 'VITE_APP_API_BASEURL',
      // eslint-disable-next-line no-template-curly-in-string
      placeholder: '${thisAbility.pubinfo_plugin.externalAddress.default}',
    },
  ],
})

Apaas 平台的配置文件，主要用于替换环境变量，url 为需要替换的环境变量，replace 为需要替换的环境变量名称，name 为替换后的环境变量名称，placeholder 为替换的内容。

在 Apaas 平台中要求我们使用 VUE_APP_BASE_URL 作为请求的基础地址，而且不是从env 中取值，是从Window上得到的，而我们项目中使用的是 VITE_APP_API_BASEURL，这里就需要在打包的时候需要进行替换。

placeholder说明

关于placeholder的字段内容，thisAbility.pubinfo_plugin.externalAddress.default是Apaas平台提供的一个全局变量，Apaas会对其进行变量替换。 内容中间的pubinfo_plugin字段是后端服务名称，前端需要和后端约定好字段内容

例如后端服务名称叫做 server，那么placeholder字段内容就是${thisAbility.server.externalAddress.default}

alt text

提示

单体应用的修改整个文件只需修改pubinfo_plugin字符即可

注意

Apaas要求:服务名称需与Nacos 配置文件或者启动参数配置文件中的服务名称保持一致，服务名仅支持小写英文，如果在配置文件服务名称中存在_，在此输入时转换为-即可。例如在配置文件中服务名称为 demo_test，则在这里需要要入demo-test。

第三步：添加构建命令，执行构建 ​

在需要添加适配打包的应用的package.json中添加构建命令

json
{
  "scripts": {
    "build:apaas": "cross-env APAAS=true vite build"
  }
}

第四步：执行构建 ​

打包完成之后打包产物就是适配Apaas平台的打包文件

pnpm -F @pubinfo/rbac run build:apaas

提示

@pubinfo/rbac 名称是对应apps下的package.json中的name字段

第五步：apaas平台配置 ​

使用插件构建之后会在本地有一份适配apaas平台的打包产物名称和原来业务的打包产物名称一样，此时apps/rbac目录下会多一个apass文件夹，内部存放着需要上传到Apaas平台的route.json文件和打包镜像所需要的配置文件（nginx、dockerfile），基于nginx、和打包产物打包一份镜像上传到Apaas平台即可。

例图是apaas平台的配置界面

apaas

从页面中可以看到前端需要提供的内容有如下几个：

  • Nacos 配置文件
  • 镜像文件 - 上传到Apaas平台的镜像地址
  • route.json - 上传到Apaas平台的路由配置文件

路由配置文件 ​

就是apps/rbac/apaas/route.json，因为腾龙是直接采用编译器扫描全量代码形式生成的，上传系统的名称需要手动改成你的系统名称

json
{
  "permType": "header",
  "permName": "权限管理系统",
  "permPath": "/",
  "permCode": "",
  "permDes": "腾龙权限管理系统",
  "picPath": "",
}

菜单会全量生成项目内所有的菜单，如果需要删除某个菜单，可以在route.json中删除对应的菜单即可

镜像文件 ​

镜像文件是apps/rbac/apaas文件夹下的dockerfile，需要基于他打包一个镜像上传到Apaas平台

dockerfile
FROM nginx:1.26-alpine
COPY ./nginx-default.conf /etc/nginx/conf.d/nginx-default.conf
COPY ../rbac /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

提示

当前的 COPY 路径需要根据实际情况修改，默认提供的是基于研发云打包进项的配置，docker build -t xxx:xxx ./apps/rbac/apaas

dockerfile
FROM nginx:1.26-alpine
COPY ./nginx-default.conf /etc/nginx/conf.d/nginx-default.conf
COPY ../rbac /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Nacos配置文件 ​

Nacos 配置文件主要用于配置和管理应用前后端的配置信息，前端需要新建一个Nacos文件夹，将apps/rbac/apaas 文件夹下的nginx-default.conf 和 micro-service-config.js 文件内容复制到Nacos配置文件中，然后交给负责上传apaas平台的同事,由他整合前后端所有资源上传至Apaas平台。

其他配置项 ​

  • 前端框架 - 选择 vite
  • 服务名称 - 自定义服务名称
  • 镜像文件名称 - 自定义镜像名称
  • 镜像版本 - 自定义镜像版本，例如 1.0等