前端系统运行

码匠君2024年12月18日大约 6 分钟部署运行后端默认账号用户名密码

[一]开发模式

[1]检出代码

在合适位置上，使用 Git 检出前端工程代码。项目地址

[2]修改配置

在前端工程的 packages/ui 目录下，找到 .env.development 或者 .env.production 文件。修改其中的参数

参数说明：

NODE_ENV：当前多环境名称，不用修改
VITE_PROJECT：工程名称，名称。通过该参数以动态修改域名以外的地址，以实现单体版等使用同一套操作界面。herodotus指定是微服务版，其它任意字符串或者空值指定是单体版
VITE_PROJECT_NAME：界面显示的系统名称
VITE_API_URL：后端服务网关访问地址
VITE_WS_URL：后端服务 WebSocket 访问地址
VITE_SECRET_KEY：前端关键信息 SM4 加密秘钥
VITE_AUTO_REFRESH_TOKEN：开启自动刷新 Token 机制
VITE_MULTI_TENANCY_ID：当前应用租户 ID，需要后台进行租户配置，空值为不启用租户模式。
VITE_USE_CRYPTO：是否开启前后端数据加密
VITE_USE_WEBSOCKET：是否开启 WebSocket
VITE_USE_OIDC：是否使用 OpenID Connect（OIDC）协议
VITE_OAUTH_CLIENT_ID：OAuth2 密码模式 Client Id。
VITE_OAUTH_CLIENT_SECRET：OAuth2 密码模式 Client 密码
VITE_OAUTH2_REDIRECT_URI：授权码模式登录前端回调地址

说明

VITE_SECRET_KEY 秘钥，并不是本系统前后端数据加密传输使用的秘钥，只是对前端临时存储的关键信息加密的秘钥。

本系统前后端数据加密传输，是基于自主设计的自定义数据传输 Session，实现国密 SM4 加密秘钥的动态生成，加密传输，一人一钥机制。每次使用系统都会动态重新生成，采用 SM2 前后端加密传输，临时存储至前端。缓存时间与 OAuth 2 Token 设置时间相同，正常退出系统后，会清除前端临时存储数据。

并没有绝对安全的加密措施，前后端数据加密传输也仅仅是相对提升安全性。毕竟不管如何处理，前端都要存储一定的关键信息，而且前端是最容易破解的。正式环境使用还是要配合 Https 以及其它安全防护措施。

[3]前端运行命令

// 进入目录
cd dante-cloud-ui

// 安装依赖
pnpm install

// 可以自己编译一下组件库
pnpm shared:build

// 如果要使用 `.env.development` 中的配置值，使用下面命令
pnpm dev

// 如果要使用 `.env.production` 中的配置值，编译整个项目，则使用下面命令。一般只有在前端进行正式部署时才会用到这个命令
pnpm prod

[4]运行验证

通过前端界面进行操作，是对的整个系统最好的验证方式之一。

打开浏览器，输入：http://localhost:3000。若能正确展示登录页面，并能成功登录，菜单及页面展示正常，则表明环境搭建成功

重要

系统登录默认的账户和密码是：system/123456

[二]生产模式

[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;
        }
    }
}

注

除了 Dante Cloud 工程相关的配置以外，其它的配置请结合自己的实际需求修改

[三]容器模式

为了方便使用和部署，Dante Cloud 响应式版本，对前端做了专门的改造。可以以 Docker 的方式运行前端，系统必要的参数可以通过环境变量进行修改。

[1]Docker

在 Docker Cloud 响应式版本前端工程中提供了 Dockerfile，可直接使用该文件生成 Docker 镜像

[2]Docker Compose

Dante Cloud 已经提前打包了前端工程，生成了 Docker 镜像并上传至 Docker Hub，可以使用 Docker Compose 直接运行，脚本如下：

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"