前端部署

环境要求

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

获取脚手架

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

bash

# 克隆项目
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_WAS_SITEID	WAS 用户运营分析统计 siteId
VITE_PROJECT_NAME	系统中文名称，展示在导航栏

部署介绍-前端环境变量配置路径

本地启动

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

bash

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

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

bash

npm run start

本地启动命令对应.env文件中的环境变量设置，默认为dev（开发），可根据需要调整test（测试）、uat（预发）、prd（生产）。

如果你还需要后端能力，可继续启动后端（参考后端部署）。后端的代理在脚手架工程根目录下的vite.config.js中设置。

信云+部署

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

PC端工程

流水线代码编译脚本

bash

# 脚本运行过程中日志冗余输出
set - x

# 进入从git仓库拉取下来的代码目录下 , #{前端代码根目录需}要根据业务方实际情况配置
cd pangea-web-vue3

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

pnpm install

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

nginx 中 default.conf 配置文件

bash

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 https://symamicro.hisense.com;
    }

    # 资产中心
    location /walnut/ {
        proxy_pass http://walnut-plugincenter-pangea-publicserver-prd.cloudprd.hisense.com;
    }

    # 后端网关代理
    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 团队获取真实地址。

移动端

流水线代码编译脚本

bash

# 脚本运行过程中日志冗余输出
set - x

# 进入从git仓库拉取下来的代码目录下 , #{前端代码根目录需}要根据业务方实际情况配置
cd pangea-uniapp-vite

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

yarn install

# 命令中“:”后的编码dev、test、uat、prd分别对应开发平台右上角开发、测试、预发、生产四个环境
yarn run build:h5:dev

镜像构建 Dockerfile

bash

FROM registry-dev.hisense.com/registry-ocp/nginx:static
ADD ./h5/ /tmp/static/uni/
ENV TZ=Asia/Shanghai
USER nginx

nginx 中 default.conf 配置文件

bash

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 /uni/index.html;
    }

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

    # 资产中心
    location /walnut/ {
        proxy_pass http://walnut-plugincenter-pangea-publicserver-prd.cloudprd.hisense.com;
    }

    # 后端网关代理
    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;
}

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

前端部署 ​

环境要求 ​

获取脚手架 ​

配置脚手架 ​

本地启动 ​

信云+部署 ​

PC端工程 ​

移动端 ​

前端部署

环境要求

获取脚手架

配置脚手架

本地启动

信云+部署

PC端工程

移动端