前端系统运行
重要
自 Dante Cloud 4.0.X 版本起，使用 Vuetify 组件及其 Material Design 3 蓝图风格和 Vue 3 组合式 API，全新构建的新版本的前端工程。
之所以使用 Vuetify 全新构建前端工程的主要原因：
- 一是因为，原版工程使用 Quasar 组件库，目前 Quasar 更新频率变低，以防出现停止维护的情况做的防御措施。
- 二是因为，Vuetify 的 Material Design 3 蓝图风格，与目前流行的前端界面风格相契合，可以更容易的做出漂亮的界面。同时，Vuetify 社区活跃，目前看短期内不会出现停止维护的情况。
自 Dante Cloud v4.0.5.1 版本起，为了提升维护的效率，将企业版前端与开源版前端合并，新版本前端（Vuetify 版）也一并开源。
注意
需要注意的是，当前版前端界面为企业版和开源版共享，由于开源版后端部分功能不包含（例如：Passkey），那么前端可能会出现操作异常问题。
[一]开发模式
[1]检出代码
在合适位置上，使用 Git 检出前端工程代码。
提示
推荐使用新版：herodotus-cloud-ui-vuetify。当然，也可以选择原版 dante-cloud-ui。
需要注意的是，Dante Cloud 4.0.X 的原版前端与新版前端采用共享模块方式，使用原版需要自己配置私库，参见：共享模块 。如果只是使用新版前端则不需要配置私库
[2]修改配置
在前端工程的 packages/ui 目录下，找到 .env.development 文件。修改其中的参数
参数说明：
- VITE_BASE_PATH：基础路径，默认为根目录
/可以根据你的部署需求修改。主要用于有路径映射需求的场景。 - VITE_PROJECT：工程名称。通过该参数以实现单体版和微服务版使用同一套操作界面。
dante指定是微服务版，其它任意字符串或者空值指定是单体版 - VITE_APPLICATION_NAME：界面显示的系统名称
- VITE_API_URL：后端服务网关访问地址
- VITE_WS_URL：后端服务 WebSocket 访问地址
- VITE_OAUTH_CLIENT_ID：OAuth2 密码模式 Client Id。
- VITE_OAUTH_CLIENT_SECRET：OAuth2 密码模式 Client 密码
- VITE_OAUTH2_REDIRECT_URI：授权码模式登录前端回调地址
- VITE_AUTO_REFRESH_TOKEN：开启自动刷新 Token 机制
- VITE_USE_CRYPTO：是否开启前后端数据加密
- VITE_USE_WEBSOCKET：是否开启 WebSocket
- VITE_USE_OIDC：是否使用 OpenID Connect（OIDC） 协议
- VITE_SECRET_KEY：前端关键信息 SM4 加密秘钥
- VITE_MULTI_TENANCY_ID：当前应用租户 ID，需要后台进行租户配置，空值为不启用租户模式。
- VITE_USE_DISABLE_DEVTOOL：是否开启调试防护工具，开启后浏览器 F12、邮件等操作将被屏蔽。开发环境可以关闭，生产环境建议开启
说明
VITE_SECRET_KEY 秘钥，并不是本系统前后端数据加密传输使用的秘钥，只是对前端临时存储的关键信息加密的秘钥。
本系统前后端数据加密传输，是基于自主设计的自定义数据传输 Session，实现国密 SM4 加密秘钥的动态生成，加密传输，一人一钥机制。每次使用系统都会动态重新生成，采用 SM2 前后端加密传输，临时存储至前端。缓存时间与 OAuth 2 Token 设置时间相同，正常退出系统后，会清除前端临时存储数据。详情参见：【数字信封】
并没有绝对安全的加密措施，前后端数据加密传输也仅仅是相对提升安全性。毕竟不管如何处理，前端都要存储一定的关键信息，而且前端是最容易破解的。正式环境使用还是要配合
Https以及其它安全防护措施。
[3]编译运行
前面配置配置完成之后，在运行之前，需要进行依赖下载，以及模块编译等操作。
(1)首次检出
如果你是首次检出前端工程，使用以下命令下载依赖，并运行工程
// 进入目录
cd herodotus-cloud-ui-vuetify
// 安装依赖
pnpm install
// 使用 `.env.development` 中的配置值，使用下面命令
pnpm dev(2)非首次检出（使用 Git 更新代码方式）
当你采用更新代码的方式，那么更新下来的可能不仅仅是新的代码，还包含依赖的模块的更新。所以需要采用以下命令：
// 更新代码（如果已经采用其它方式更新了代码，可以忽略该操作）
git pull
// 1. 更新主工程依赖模块
pnpm update --latest
// 2. 更新 monorepo 模块依赖模块
pnpm -r update --latest
// 3. 重新编译模块
pnpm shared:build
// 4. 再次运行。使用 `.env.development` 中的配置值，使用下面命令
pnpm dev[4]运行验证
通过前端界面进行操作，是对的整个系统最好的验证方式之一。
打开浏览器，输入：http://localhost:3000。若能正确展示登录页面，并能成功登录，菜单及页面展示正常，则表明环境搭建成功
重要
系统登录默认的账户和密码是：system/123456。测试账号的账户和密码是：test/123456
[5]共享模块
(1)共享逻辑
基于 Vuetify 的新版除了使用的组件库以及界面风格不同外，很多代码都与原有基于 Quasar 的旧版前端工程一致。重复的维护相同的代码，这与 Dante Cloud 的编程哲学不符。因此，结合 monorepo 的模块化特点，提取共性代码为模块，将模块代码编译后其私库实现共享。
Dante Cloud 前端采用 monorepo 结构，除了主工程（前端工程 packages 目录下的代码）以外，很多核心内容都被抽取为 模块 放置在 shared 目录下。这些 模块 可以编译后发布至 npm 或者私库中方便共享（这和 Java Maven 多模块工程，以及将模块发布至 Maven 仓库是一个道理）。
当前，Dante Cloud 前端以 herodotus-cloud-ui-vuetify 作为 主 工程，共享的三个模块 @herodotus/core @herodotus/api 和 @herodotus/framework 代码均在该工程中。需要首先在该工程中编译共享模块，然后将其发布至私库之后，旧版前端工程才能使用。dante-cloud-ui 作为 辅 工程，在使用时，需要先从私库中下载，之后才能编译其它代码。
(2)搭建私库
搭建 npm 私库的方式有很多中，你可以按照自己的方式搭建。作者这里推荐使用阿里云云效（Codeup）搭建，免费方便。
说明
如果你不想搭建私库，可以考虑直接将相关模块发布至 npm 仓库中。
注册完阿里云云效（Codeup）后，已经默认帮你开通的 npm 仓库。找到【制品仓库】功能，找到 npm-registry 就是默认的 npm 仓库。
在 npm-registry 页面中，点击【仓库指南】，其中提供了明确的操作方法，如下所示
私库搭建完成时，可以直接将本地的 npm 镜像替换为私库的镜像。该镜像中除了包含你自己上传的模块外，还包含 npm 中的所有内容，和正常使用 npm 仓库没有任何区别。
使用下面命令，直接替换默认的 registry
pnpm config set registry "https://packages.aliyun.com/XXX/npm/npm-registry/"警告
由于作者本人本地也使用自己的私库开发，所以旧版前端和新版前端，shared 目录下所有模块的 package.json 文件中都会自动添加 publishConfig 配置。在开始后面操作之前，需要将 publishConfig 全部删除或者替换为你自己的私库才行。
(3)操作方法
先编译 herodotus-cloud-ui-vuetify 工程模块代码，将其发布至私库。按照以下命令操作即可：
// 进入目录
cd herodotus-cloud-ui-vuetify
// 安装依赖(如果已经安装了可以跳过)
pnpm install
// 1.更新主工程依赖模块
pnpm update --latest
// 2. 更新 monorepo 模块依赖模块
pnpm -r update --latest
// 3. 重新编译模块
pnpm shared:build
// 4. 标记发布信息。使用下面命令会要求选择模块，然后设定具体的版本号。根据界面提示选定即可
pnpm changeset
// 5. 让版本号信息生效
pnpm changeset version
// 6. 发布模块
pnpm changeset publish // 该种方式需要将 pnpm 默认的 registry 修改为你自己的私库地址
or
pnpm changeset publish --registry=https://packages.aliyun.com/XXX/npm/npm-registry/ // 该种方式是手动指定仓库提示
使用 pnpm changeset 命令，就是在帮助你设置模块的版本号。当前 Dante Cloud 各个模块中已经有了之前发布的版本号，你可以继续沿用这个版本号，也可以将所有版本号统一修改为你需要的起始版本号（例如：0.0.0），然后再用 pnpm changeset 命令设置新的版本号
使用 changeset 你可以完全按照自己的版本号策略操作。例如：可以让所有模块的版本号一致，也可以独立设置各个模块的版本号。
再进入 dante-cloud-ui 更新共享模块，之后就可以正常使用前端。使用下面命令进行更新：
// 1.更新主工程依赖模块
pnpm update --latest
// 2. 更新 monorepo 模块依赖模块
pnpm -r update --latest[二]生产模式(手动部署)
[1]编译代码
- 根据实际使用情况，修改
.env.production中的配置值 - 使用下面命令，编译工程代码
// 编译组件库。升级过依赖版本或者修改过模块代码，需要重新编译组件
pnpm shared:build
// 编译代码
pnpm prod[2]安装 Nginx
安装 Nginx 用于部署编译后的前端代码。需要修改 Nginx 配置，参考配置如下：
worker_processes 1;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
keepalive_timeout 65;
#gzip on;
map $http_upgrade $connection_upgrade {
default upgrade;
'' close;
}
upstream herodotus.cn {
server 192.168.101.10:8847;
}
server {
listen 8000;
server_name localhost;
location / {
root /etc/nginx/html/ui;
index index.html index.htm;
# 解决刷新页面变成404问题的代码
try_files $uri $uri/ @router;
# 开启gzip
gzip on;
# 启用gzip压缩的最小文件，小于设置值的文件将不会压缩
gzip_min_length 1k;
#gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间
gzip_comp_level 6;
# 进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript image/jpeg image/gif image/png image/avif image/webp image/apng image/svg+xml image/x-icon application/vnd.ms-fontobject font/ttf font/opentype font/x-woff font/woff2 font/eot;
# 是否在http header中添加Vary: Accept-Encoding，建议开启
gzip_vary on;
# 禁用IE 6 gzip
gzip_disable "MSIE [1-6]\.";
# 设置压缩所需要的缓冲区大小
gzip_buffers 32 16k;
# 设置gzip压缩针对的HTTP协议版本
gzip_http_version 1.1;
gzip_static on;
gzip_proxied expired no-cache no-store private auth;
}
location @router {
rewrite ^.*$ /index.html last;
}
location /api/ {
proxy_pass http://herodotus.cn/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
location /socket/ {
proxy_pass http://herodotus.cn/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
}
location /reactive/ {
proxy_pass http://herodotus.cn/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
}[3]拷贝代码
将在第一步编译好的代码，放置在 Nginx 对应目录中。例如：上一步 Nginx 配置的目录为 /etc/nginx/html/ui，将所有编译好的代码放置在该目录即可。
[三]生产模式(容器部署)
为了方便使用和部署，Dante Cloud 对企业版前端做了专门的改造。打包完成之后，可以直接部署至 Nginx 下，并以 Docker 的方式运行。一些应用相关的必要参数，例如：应用名称等，支持以 Docker 环境变量的方式，在 Docker 外部系统通过环境变量进行修改。
[1]编译代码
按照以下命令，编译工程代码，并生成可部署至生产换的的代码。
// 编译组件库。
pnpm shared:build
// 编译代码
pnpm prod[2]打包Docker镜像
手动部署前端代码，需要自己搭建 Nginx 以及拷贝代码，操作略显繁琐。Dante Cloud 提供了直接将前端打包为可运行的 Docker 镜像。通过修改 Docker 环境变量可以动态修改内部参数。
注意
这里假设，你本地就有 Docker 环境，如果你的 Docker 环境是在其它服务器中，需要拷贝 build 目录下的文件到服务器中，然后注意修改命令以及调整目录
1. Dockerfile
使用命令行工具，进入到 build 目录下，执行以下命令，利用 Dockerfile 进行打包。
docker buildx build --platform linux/amd64,linux/arm64 -t quay.io/herodotus-cloud/herodotus-cloud-preview:latest .注意
- 注意前面命令中，结尾的
. - 修改
-t后面的名称为你想要的名称
2. Docker Compose
使用下面的 Docker Compose 脚本，可以将前面已经编译完成的生产环境代码以及 Nginx 打包为可以直接运行的 Docker 镜像。
services:
ui:
image: herodotus/herodotus-cloud-ui:3.3.0.0
container_name: herodotus-cloud-ui
environment:
HERODOTUS_SERVER_PROJECT: herodotus
HERODOTUS_SERVER_ADDR: 192.168.101.10:8847
HERODOTUS_PROJECT_NAME: Dante\ Cloud
HERODOTUS_OAUTH2_CLIENT_ID: 14a9cf797931430896ad13a6b1855611
HERODOTUS_OAUTH2_CLIENT_SECRET: a05fe1fc50ed42a4990c6c6fc4bec398
HERODOTUS_OAUTH2_REDIRECT_URI: http://192.168.101.10:4000/authorization-code
ports:
- "8888:8000"提示
当然，也可以根据您的喜欢，直接使用 Dockerfile 进行镜像的构建。相关的内容均放置在前端工程 ${project_home}/build 目录下
使用
pnpm prod编译生成的可部署代码，会直接生成至${project_home}/build/dist下。
参数说明：
1. HERODOTUS_SERVER_PROJECT(可选)
工程类型。Dante Cloud 前端工程和后端工程使用的是同一套前端，通过修改这个参数来适配不同的后端。
- 微服务版：将该值设置为
herodotus(企业版)，dante(开源版) - 单体版：将该值设置为
athena
默认值为： herodotus。如果后端是微服务版，无需修改该参数。
2. HERODOTUS_SERVER_ADDR(可选)
后端服务的访问地址
- 微服务版：即网关服务的访问地址，IP + 端口，例如：192.168.101.10:8847
3. HERODOTUS_PROJECT_NAME(可选)
系统名称。可通过该参数修改系统名称，当前默认名称为 Herodotus Cloud
注
当前还不支持系统名称中包含空格。如果包含空格将不会生效，还是显示默认系统名称
4. HERODOTUS_OAUTH2_CLIENT_ID(可选)
前端系统的 Client Id，默认值：14a9cf797931430896ad13a6b1855611
5. HERODOTUS_OAUTH2_CLIENT_SECRET(可选)
前端系统的 Client Secret，默认值：a05fe1fc50ed42a4990c6c6fc4bec398
6. HERODOTUS_OAUTH2_REDIRECT_URI(可选)
前端使用 OAuth2 授权码授权模式进行登录，需要指定具体的 redirect_uri。当前默认值为：http://192.168.101.10:3000/authorization-code
注意
请根据实际部署情况修改这个值。该值需要与数据表 oauth2_registered_client 中对应 Client 的配置对应，否则将会出现参数错误无法登录。
因为配置了缓存，所以不建议直接手动在数据库中修改这个值，修改了也不会马上生效。建议通过系统界面进行修改。
提示
以上参数都是可选参数，仅在你在 Docker 已经打包完成，需要动态修改参数时使用。如果运行 Docker 时不设置这些环境变量，代码默认使用 .env.production 中的配置。
