本文档适用于所有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

Linux系统-前端部署_前端

二、解压前端文件

#上传前端包至服务器并解压到dist，我这里上传至我的家目录，使用tar命令直接解压到dist下。
#这里在tar包后面跟上“-C”参数可直接解压到指定路径。
sudo tar xvf dist-2.2.12-20231122.tar.gz -C /home/nvisual-frontend/dist/

Linux系统-前端部署_Linux_02

三、配置转发

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://;
	

	}
}
↑==================================配置文件内容==========================================↑

Linux系统-前端部署_Linux_03

#使用命令修改前端配置文件后缀,把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'
}
↑==================================配置文件内容==========================================↑

Linux系统-前端部署_配置文件_04

3.2.2 重启nginx

#重启命令
sudo systemctl restart nginx 
#重启后可直接访问服务地址

四、访问测试

#访问服务地址，可访问到登录页即部署正常。

Linux系统-前端部署_配置文件_05