部署项目前端

准备环境

安装如下软件环境

  • Node.js: 8.9+
  • nginx: 1.10.0+

下载源码

拉取 Dubhe git 仓库最新源码至本地,再进入根目录;

# 进入项目根目录
cd Dubhe/webapp

配置

根据实际情况修改如下配置文件:

.env.mock
.env.development
.env.test
.env.production
note

修改.env.production文件时: 配置minIO环境时IP地址后需跟/minio;

例如: VUE_APP_MINIO_API = 'http://127.0.0.1:9000/minio'

构建

# 安装项目依赖
npm install
# 构建生产环境
npm run build:prod

部署

  • 构建完成后会在根目录生成 dist 文件夹,并将该文件夹上传至服务器。
  • 在服务器 nginx.conf/etc/nginx/sites-available/default文件中添加如下配置(根据实际情况修改)。
# 云端serving网关
server {
listen 80;
server_name $(四级域名,如*.dev.dubhe.ai);
location /api {
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_pass http://127.0.0.1:8081;
client_max_body_size 100m;
}
}
server {
listen 80; # 端口
server_name $(域名,如www.dubhe.ai); # 域名/外网IP
client_max_body_size 5120m; # 上传文件大小限制
# 鉴权API
location /auth {
proxy_pass http://127.0.0.1:8200; # 后端地址
}
# 后端API
location /api {
proxy_pass http://127.0.0.1:8200; # 后端地址
}
# 可视化API
location /visual/api {
proxy_pass http://127.0.0.1:8200; # 后端地址
}
# minIO 服务
location ^~/minio/ {
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_set_header X-NginX-Proxy true;
proxy_pass http://127.0.0.1:9000; # minIO 服务地址
}
location ^~/dcm4chee/ {
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers X-Requested-With,Content-Type;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS,PUT;
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_set_header X-NginX-Proxy true;
proxy_pass http://127.0.0.1:8080/; # dcm服务地址 具体参数请根据部署数据处理算法文档中dcm服务部署后的具体地址来进行修改
}
# 前端页面
location / {
root /Dubhe/webapp/dist; # dist 文件夹根目录
index index.html;
try_files $uri $uri/ /index.html;
}
}
  • 保存 nginx.conf/etc/nginx/sites-available/default并重启 Nginx 使之生效。
Last updated on