本文档适用于所有Linux系统
示例环境
系统版本：Ubuntu 22.04
web服务端版本：nginx 1.18.0
前端版本：dist-2.2.12-20231122
一、创建目录
#Linux环境下，前端路径为/home/nvisual-frontend/
sudo mkdir -p /home/nvisual-frontend/dist
二、解压前端文件
#上传前端包至服务器并解压到dist，我这里上传至我的家目录，使用tar命令直接解压到dist下。
#这里在tar包后面跟上“-C”参数可直接解压到指定路径。
sudo tar xvf dist-2.2.12-20231122.tar.gz -C /home/nvisual-frontend/dist/
三、配置转发
3.1 nginx实现转发
3.1.1 修改nginx配置文件
#修改nginx配置文件
sudo vim /etc/nginx/nginx.conf
↓==================================配置文件内容==========================================↓
#全局块------------------------------------------------------------------------------------------------------
user nginx;
worker_processes auto;
worker_cpu_affinity auto;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid; #(或/run/nginx.pid实际需要根据nginx安装路径调整)#events块---------------------------------------------------------------------------------------------------
events {worker_connections 1024;
}#http全局块--------------------------------------------------------------------------------------------------
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;tcp_nopush on;tcp_nodelay on;keepalive_timeout 60000;types_hash_max_size 2048;client_max_body_size 100M;gzip on;gzip_min_length 1k;gzip_comp_level 6;#gzip_proxied any;gzip_types text/plain application/json application/javascript application/x-javascript tex t/javascript text/xml text/css;gzip_vary on;gzip_buffers 16 8k;gzip_http_version 1.1;proxy_read_timeout 100000;proxy_send_timeout 100000;proxy_buffering on;proxy_buffer_size 4k;proxy_buffers 4 4k;proxy_busy_buffers_size 8k;#proxy_temp_file_write_size 2048k;proxy_max_temp_file_size 128m;#proxy_temp_path /etc/nginx/temp;#proxy_cache_path /etc/nginx/cache levels=1:2 keys_zone=cache_one:200m inactive=1d max_size=30g;#http全局块-server块-----------------------------------------------------------------------------------------server { listen 443;listen 80;#server_name ;root /home/nvisual-frontend/dist;if ($server_port = 443) {rewrite ^(/.*)$ http://${server_name}$1 permanent ;}#ssl on;#ssl_certificate ssl/nvisual.com.pem;#ssl_certificate_key ssl/nvisual.com.key;#ssl_session_timeout 5m;#ssl_protocols TLSv1 TLSv1.1 TLSv1.2;#ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;#ssl_prefer_server_ciphers on;proxy_redirect https:// http://;#http全局块-server块-location块-实际项目除调整后端接口地址外，以下部分无须调整，--------------------------------------location / {add_header Access-Control-Allow-Origin *;add_header Access-Control-Allow-Methods *;add_header Access-Control-Allow-Headers *;index index.html;try_files $uri $uri/ /;}location /report {index report.html;try_files $uri $uri/ /report.html;}location /message {index message.html;try_files $uri $uri/ /message.html;}location /modelLibrary {index modelLibrary.html;try_files $uri $uri/ /modelLibrary.html;}location /recycle {index recycle.html;try_files $uri $uri/ /recycle.html;}location /account {index account.html;try_files $uri $uri/ /account.html;}location /setting {index setting.html;try_files $uri $uri/ /setting.html;}location /dataExchange {index dataExchange.html;try_files $uri $uri/ /dataExchange.html;}location /relationalView {index relationalView.html;try_files $uri $uri/ /relationalView.html;}location /access {index access.html;try_files $uri $uri/ /access.html;}location /business {index business.html;try_files $uri $uri/ /business.html;}location /attributeStatistics {index attributeStatistics.html;try_files $uri $uri/ /attributeStatistics.html;}location /netWorkTool {index netWorkTool.html;try_files $uri $uri/ /netWorkTool.html;}location /workOrder {index workOrder.html;try_files $uri $uri/ /workOrder.html;}location /systemLog {index systemLog.html;try_files $uri $uri/ /systemLog.html;}location /globalSetting {index globalSetting.html;try_files $uri $uri/ /globalSetting.html;}location /reportAdapter/ {proxy_pass http://127.0.0.1:8081/;}location /reportApi/ {proxy_pass http://127.0.0.1:8081/;}location /diagramApi/ { proxy_pass http://127.0.0.1:8081/;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection 'upgrade';} location /managementApi/ { proxy_pass http://127.0.0.1:8081/;}location /netWorkToolApi/ {proxy_pass http://127.0.0.1:8081/;}location /apidoc/ {proxy_pass http://127.0.0.1:8081/;}location /vjmapApi/ {proxy_pass http://127.0.0.1:27660/;}location /wapi/ {proxy_pass http://127.0.0.1:8081/wapi/;}location /ig/ {proxy_pass http://127.0.0.1:1880/;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection 'upgrade';}location /version {return 200 2.0.33.3;}}
}
↑==================================配置文件内容==========================================↑
3.1.2 重启nginx
#重启命令
sudo systemctl restart nginx
#重启后可直接访问服务地址
3.2 配置文件实现前后端转发
#采用前后端自主转发，nginx只需要配置前端路径与服务地址。
sudo vim /etc/nginx/nginx.conf
↓==================================配置文件内容==========================================↓
#全局块------------------------------------------------------------------------------------------------------
user nvisual;
worker_processes auto;
worker_cpu_affinity auto;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid; #(或/run/nginx.pid实际需要根据nginx安装路径调整)#events块---------------------------------------------------------------------------------------------------
events {worker_connections 1024;
}
#http全局块--------------------------------------------------------------------------------------------------
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;tcp_nopush on;tcp_nodelay on;keepalive_timeout 60000;types_hash_max_size 2048;client_max_body_size 100M;gzip on;gzip_min_length 1k;gzip_comp_level 6;#gzip_proxied any;gzip_types text/plain application/json application/javascript application/x-javascript tex t/javascript text/xml text/css;gzip_vary on;gzip_buffers 16 8k;gzip_http_version 1.1;proxy_read_timeout 100000;proxy_send_timeout 100000;proxy_buffering on;proxy_buffer_size 4k;proxy_buffers 4 4k;proxy_busy_buffers_size 8k;#proxy_temp_file_write_size 2048k;proxy_max_temp_file_size 128m;#proxy_temp_path /etc/nginx/temp;#proxy_cache_path /etc/nginx/cache levels=1:2 keys_zone=cache_one:200m inactive=1d max_size=30g;#http全局块-server块-----------------------------------------------------------------------------------------server { #listen 443;listen 80;server_name 10.0.0.21;root /home/nvisual-frontend/dist;#ssl on;#ssl_certificate ssl/nvisual.com.pem;#ssl_certificate_key ssl/nvisual.com.key;#ssl_session_timeout 5m;#ssl_protocols TLSv1 TLSv1.1 TLSv1.2;#ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;#ssl_prefer_server_ciphers on;proxy_redirect https:// http://;}
}
↑==================================配置文件内容==========================================↑
#使用命令修改前端配置文件后缀,把api.js.sample修改为api.js。
sudo mv /home/nvisual-frontend/dist/config/api.js.sample /home/nvisual-frontend/dist/config/api.js
#编辑api.js
sudo vim /home/nvisual-frontend/dist/config/api.js
#如服务为https协议，请把地址前缀的http改为https。
↓==================================配置文件内容==========================================↓
window.nvisualApi = {diagramApiHost: 'http://10.0.0.21', reportApiHost: 'http://10.0.0.21', reportAdapterHost: 'http://10.0.0.21', websocketHost: 'ws://10.0.0.21', apiDocHost: 'http://10.0.0.21'
}
↑==================================配置文件内容==========================================↑
3.2.2 重启nginx
#重启命令
sudo systemctl restart nginx
#重启后可直接访问服务地址
四、访问测试
#访问服务地址，可访问到登录页即部署正常。
