前端部署

环境要求

• 本地启动时node版本要求 18 版本以上，信云+部署时基础环境应选择 18 以上版本。

获取脚手架

盘古提供业务运行时脚手架代码，请点击此处下载业务运行平台代码或使用以下命令拉取。

# 克隆项目
git clone http://gitlab.hisense.com/Pangea/Pangea-Cloud/frontend/pangea-vue3-project/pangea-web-vue3.git

注意：请在虚拟桌面访问，如访问后出现 404 页面，请联系 Pangea 团队开通 Git 访问权限。

配置脚手架

脚手架工程根目录中的.env配置文件用于设置系统环境变量，首次拉取脚手架应修改其中的环境变量并在以后不能变更。其中变量说明如下：

变量名称	说明
VITE_SYSTEM_NAME	【必填】系统英文编码，用于隔离系统数据
VITE_PROJECT_CODE	项目编码，用于获取模板、自定义组件等资产
VITE_PROJECT_ENV	环境编码，用于获取模板、自定义组件等资产
VITE_WAS_SITEID	WAS 用户运营分析统计 siteId
VITE_PROJECT_NAME	系统中文名称，展示在导航栏

本地启动

为了更好的开发体验，我们建议开发者在本地启动时使用 pnpm 管理依赖并配置海信私服，脚手架中也内置了 pnpm-lock 文件用于锁定依赖版本。

# 修改npm私服地址（虚拟桌面使用）
npm config set registry http://nexus.hisense.com/repository/npm-public/
# 安装pnpm环境
npm install pnpm -g
# 修改yarn私服地址（虚拟桌面使用）
pnpm config set http://nexus.hisense.com/repository/npm-public/
#安装依赖
pnpm install

配置完成后，即可启动项目进行操作了。

npm run start

如果你还需要后端能力，可继续启动后端（参考后端部署）。后端的代理在脚手架工程根目录下的vite.config.js中设置。该文件已内置了本地启动时所需连接业务运行平台的后端网关服务，非特殊情况下无需变动。

信云+部署

业务方首先需要将脚手架代码上传至业务方的Git代码仓库后再进行信云+部署，在信云+的部署操作请参考Devops 使用手册，这里只提供部署时需要的相关配置。

• 流水线代码编译脚本

# 脚本运行过程中日志冗余输出
set - x
# 进入从git仓库拉取下来的代码目录下 , #{前端代码根目录需}要根据业务方实际情况配置
#cd
pangea - web - vue3
cd #{前端项目根目录}

# 设置仓库
pnpm config set registry http://nexus.hisense.com/repository/npm-public/

pnpm install

# 命令中“:”后的编码dev、test、uat、prd分别对应开发平台右上角开发、测试、预发、生产四个环境
# 部署开发环境时请使用此命令
pnpm run build:dev
# 部署测试环境时请使用此命令
# pnpm run build:test
# 部署预发环境时请使用此命令
# pnpm run build:uat
# 部署生产环境时请使用此命令
# pnpm run build:prd

• nginx 中 default.conf 配置文件

server {
    listen 8080;
    server_name localhost;
    underscores_in_headers on;
    #默认主页d
    index index.html;

    #跨域问题
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

    #静态页面目录
    root /tmp/static;
    client_max_body_size 2048m;

    proxy_connect_timeout 12500s;
    proxy_send_timeout 12000s;
    proxy_read_timeout 12000s;
    # 配置主页信息
    location / {
    try_files $uri $uri/ /index.html; #主要是这句配置
    }

    # 对象存储代理
    location /minio/ {
        proxy_pass #{对象存储地址};
    }

    # 前端代码编辑器
    location /node_modules/ace-builds {
        proxy_pass #{前端代码编辑器地址};
    }

    # 资产中心
    location /walnut/ {
        proxy_pass #{资产代理地址};
    }

    # 后端网关代理
    location /api/ {
        proxy_pass #{网关地址};
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header authorization $http_authorization;
        proxy_cookie_path /project /proxy_path;
    }

    # 统一鉴权代理
    location /auth/ {
        proxy_pass #{网关地址};
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header authorization $http_authorization;
        proxy_cookie_path /project /proxy_path;
}

注意： nginx 配置文件中#{xxx} 需要替换为真实地址，请联系 Pangea 团队获取真实地址。

• 健康检查配置

  注意： 端口的配置应根据业务方实际部署时填写。