系统部署

提示

项目是前后端分离的，需要前端和后端单独部署。EMQX4.0版本的安装参考EMQX官网，配置参考上一章节的系统运行。

# 一、后端部署

在 yanfan-smart\springboot\bin 目录下执行package.bat 打包成Web工程，生成war/jar包文件。

# 生成包目录
yanfan-smart\springboot\yanfan-admin\target

1
2

jar部署方式：

# 使用命令行执行
java –jar yanfan-admin.jar

1
2

war部署方式：

# 修改yanfan-smart\springboot\yanfan-admin\pom.xml 文件中的packaging为war，打包后放到tomcat服务器webapps
<packaging>war</packaging>

1
2

# 二、前端部署

修改根目录的 .env.production 文件,EMQX消息服务器地址使用ws协议对应8083端口，使用wss协议建议配置代理访问8083端口。

# EMQX接口账号（后端地址和EMQX接口地址，通过nginx配置代理）
VUE_APP_EMQX_API_USER_NAME = 'admin'
VUE_APP_EMQX_API_PASSWORD = 'public'

# EMQX消息服务器连接地址
VUE_APP_EMQX_SERVER_URL = 'ws://localhost:8083/mqtt'

# 百度地图AK
VUE_APP_BAI_DU_AK = 'nAtaBg9FYzav6c8P9rF9qzsXXXXXX'

1
2
3
4
5
6
7
8
9

运行命令，打包应用

# 打包正式环境
npm run build:prod

1
2

打包前请确保安装依赖包，打包成功之后，会在根目录生成 dist 文件夹，里面就是构建打包好的文件，通常是 .js 、.css、index.html 等静态文件。

# 三、Nginx配置

前端打包后，dist目录里面文件上传的路径配置： /var/data/vue 。后端部署的地址： http://localhost:8080/ 端口默认8080 。EMQX安装的地址： http://localhost:8081/api/v4/ 端口默认8081。全部配置如下：

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       80;
        server_name  localhost;
        charset utf-8;

        location / {
            root   /var/data/vue;
            try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }
		
        location /prod-api/ {
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://localhost:8080/;
		}
        
        location /api/v4/ {
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://localhost:8081/api/v4/;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

建议开启nginx的Gzip压缩，加快网页访问速度。配置如下：

# 开启gzip压缩
gzip on;
# 不压缩临界值，大于1K的才压缩，一般不用改
gzip_min_length 1k;
# 压缩缓冲区
gzip_buffers 16 64K;
# 压缩版本（默认1.1，前端如果是squid2.5请使用1.0）
gzip_http_version 1.1;
# 压缩级别，1-10，数字越大压缩的越好，时间也越长
gzip_comp_level 5;
# 进行压缩的文件类型
gzip_types text/plain application/x-javascript text/css application/xml application/javascript;
# 跟Squid等缓存服务有关，on的话会在Header里增加"Vary: Accept-Encoding"
gzip_vary on;
# IE6对Gzip不怎么友好，不给它Gzip了
gzip_disable "MSIE [1-6]\.";

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

提示

启用Https参考移动端的Nginx配置
更多部署资料参考若依系统文档

← 系统运行使用说明→