教程二：本地配置服务端开发环境
《物美智能》系列文章目录
教程一：阿里云使用docker快速部署服务端
教程二：本地配置服务端开发环境
教程三：硬件端-Arduino和ESP8266开发板入门
教程四：使用物联网平台控制硬件端
教程五：物联网平台使用手册
教程六：官方SDK代码功能补充
教程七：APP的使用与场景联动功能
diy：自制作四种智能小电器
前言
本文章承接上文，上篇文章已介绍如何快速部署物美智能平台docker，本篇来教各位在本地开发环境中搭建服务端。
gitee地址：
https://gitee.com/kerwincui/wumei-smart
本地环境搭建方式
1. 开发环境：
IDEA == 2021.2
JDK == 1.8
Maven >= 3.0
1.部署Mysql服务器，版本在5.7.0版本以上
教程：
https://blog.csdn.net/qq_45273552/article/details/110004118?spm=1001.2014.3001.5502
2.部署redis，可以在虚拟机上，也可以在云服务器上，如果已按照上章成功部署了物美docker的同学，可以直接连docker中的redis
教程：
http://t.csdn.cn/wLbEc
3.部署vue环境，node.js，版本在12以上
https://blog.csdn.net/goxohu/article/details/114626236
4.部署mqtt服务器
教程：
https://blog.csdn.net/qq_40698086/article/details/121562514
2.后端运行
idea将gitee上的代码拉到本地
- 创建wumei-smart数据库，导入项目中的 springboot/sql/wumei.sql 数据库脚本。（Linux中安装mysql，配置大小写敏感，在 /etc/my.cnf 添加 lower_case_table_names=1 重启MYSQL服务。）
- 开发工具IDEA打开springboot文件夹，会自动安装Maven依赖，等待安装完成，速度取决于网络。
- 修改数据库连接，文件位于： springboot/wumei-admin/src/main/resources/application-druid.yml
# 数据源配置
spring:
datasource:
type: com.alibaba.druid.pool.DruidDataSource
driverClassName: com.mysql.cj.jdbc.Driver
druid:
# 主库数据源
master:
url: 数据库地址
username: 数据库账号
password: 数据库密码
1.服务配置，文件位于：springboot/wumei-admin/src/main/resources/application.yml。注意配置文件的格式，缩进一定要对齐。
## 文件上传路径 示例（ Windows配置D:/wumei-smart/uploadPath，Linux配置 /var/wumei-smart/java/uploadPath）
profile: /var/wumei-smart/java/uploadPath
## redis 配置
redis:
# 地址
host: localhost
# 端口，默认为6379
port: 6379
# 数据库索引
database: 0
# 密码
password: wumei-smart
## EMQX 配置
mqtt:
username: wumei-smart # 账号（设备简单认证的用户名）
password: wumei-smart # 密码 (设备简单认证的密码)
host-url: tcp://localhost:1883 # EMQX的部署地址
2.日志路径配置，文件位于：springboot/wumei-admin/src/main/resources/logback.xml
# 示例（ Windows配置D:/wumei-smart/logs，Linux配置 /var/wumei-smart/java/logs）
<property name="log.path" value="/var/wumei-smart/java/logs" />
3.运行项目 WumeiSmartApplication.java ，出现下图表示启动成功。
_ _
(_) | |
__ ___ _ _ __ ___ ___ _ ___ _ __ ___ __ _ _ __| |_
\ \ /\ / / | | | '_ ` _ \ / _ \ | / __| '_ ` _ \ / _` | '__| __|
\ V V /| |_| | | | | | | __/ | \__ \ | | | | | (_| | | | |_
\_/\_/ \__,_|_| |_| |_|\___|_| |___/_| |_| |_|\__,_|_| \__|
----------开源生活物联网平台----------
=========wumei-smart启动成功=========
前端运行
开发工具Visual Studio Code 打开项目中vue目录
- 1.修改根目录的 vue.config.js 文件中的后端接口地址和Emqx安装地址，本地不用修改。
proxy: {
[process.env.VUE_APP_BASE_API]: {
target: `http://localhost:8080`, // 后端接口地址
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
}
},
['/api/v4']: {
target: `http://localhost:8081`, // Emqx安装地址
changeOrigin: true,
},
},
- 2.修改 wumei-smart\vue\src\views\iot\device\mqtt-client.vue文件的mqtt连接地址，Emqx安装在本地不用修改。
// 配置Mqtt连接地址，例如：ws://localhost:8083/mqtt
let url = "ws://" + window.location.hostname + ":8083/mqtt";
console.log("mqtt地址：", url);
this.client = mqtt.connect(url, options);
- 3.修改完成后，开始安装依赖，可以通过重新指定 registry 来解决 npm 安装速度慢的问题。
# 安装依赖
npm install
# 强烈建议不要用直接使用 cnpm 安装，会有各种诡异的 bug
npm install --registry=https://registry.npm.taobao.org
# 本地开发 启动项目
npm run dev
- 4.打开浏览器，输入：http://localhost:80 默认账户/密码 admin/admin123 。若能正确展示登录页面，并能成功登录，菜单及页面展示正常，则表明环境搭建成功。
四、EMQX配置
HTTP认证
系统使用EMQX的HTTP认证插件，实现自定义认证逻辑。配置文件位于：etc/plugins/emqx_auth_http.conf
## 修改认证请求中的请求地址，其他保持默认
auth.http.auth_req = http://localhost:8080/iot/tool/mqtt/auth
auth.http.auth_req.method = post
auth.http.auth_req.params = clientid=%c,username=%u,password=%P
## 注释超级用户的请求地址、请求方式和参数
# auth.http.super_req = http://127.0.0.1:8991/mqtt/superuser
# auth.http.super_req.method = post
# auth.http.super_req.params = clientid=%c,username=%u
## 注释ACL鉴权的请求地址、请求方法和参数
# auth.http.acl_req = http://127.0.0.1:8991/mqtt/acl
# auth.http.acl_req.method = get
# auth.http.acl_req.params = access=%A,username=%u,clientid=%c,ipaddr=%a,topic=%t,mountpoint=%m
认证请求地址为后端接口 http://localhost:8080/iot/tool/mqtt/auth ，后端运行在本地使用localhost或本机IP，端口默认8080，如果做了修改或者代理，需要对应修改。超级用户认证和ACL鉴权用不到，但是需要注释掉，不然会占用5秒左右的认证时间。
WebHook
系统使用EMQX的WebHook插件，实现设备上下线和IP定位功能。配置文件位于：etc/plugins/emqx_web_hook.conf
## 修改webhook地址
web.hook.api.url = http://localhost:8080/iot/tool/mqtt/webhook
# web.hook.rule.client.connect.1 = {"action": "on_client_connect"}
# web.hook.rule.client.connack.1 = {"action": "on_client_connack"}
web.hook.rule.client.connected.1 = {"action": "on_client_connected"}
web.hook.rule.client.disconnected.1 = {"action": "on_client_disconnected"}
# web.hook.rule.client.subscribe.1 = {"action": "on_client_subscribe"}
# web.hook.rule.client.unsubscribe.1 = {"action": "on_client_unsubscribe"}
# web.hook.rule.session.subscribed.1 = {"action": "on_session_subscribed"}
# web.hook.rule.session.unsubscribed.1 = {"action": "on_session_unsubscribed"}
# web.hook.rule.session.terminated.1 = {"action": "on_session_terminated"}
# web.hook.rule.message.publish.1 = {"action": "on_message_publish"}
# web.hook.rule.message.delivered.1 = {"action": "on_message_delivered"}
# web.hook.rule.message.acked.1 = {"action": "on_message_acked"}
WebHook地址为后端接口 http://localhost:8080/iot/tool/mqtt/webhook，后端运行在本地使用localhost或本机IP，端口默认8080，如果做了修改或者代理，需要对应修改。启用 web.hook.rule.client.connected.1 和 web.hook.rule.client.disconnected.1 其他项注释掉，节省后端资源。
关闭匿名认证
匿名认证不安全，建议关闭。EMQX同时使用多个认证方式，也会降低认证速度。配置文件位于： etc/emqx.conf ，文件比较大，大概位于第447行。
## Value: true | false
allow_anonymous = false
启用Http认证和WebHook插件
在 EMQX 启动时就默认启动插件，直接在 data/loaded_plugins 添加需要启动的插件名称 {emqx_auth_http,true}. {emqx_web_hook,true}. 。安装方式不同配置文件可能在 /var/lib/emqx/loaded_plugins 位置。emqx所有配置修改完后，重启emqx。
{emqx_management,true}.
{emqx_recon,true}.
{emqx_retainer,true}.
{emqx_dashboard,true}.
{emqx_rule_engine,true}.
{emqx_bridge_mqtt,false}.
{emqx_auth_http,true}.
{emqx_web_hook,true}.
系统部署
一、项目是前后端分离的，需要前端和后端单独部署。EMQX的安装参考 官方网站 ，配置参考上一章节的系统运行。
二、后端部署
1.在 wumei-smart\springboot\bin 目录下执行package.bat 打包成Web工程，生成war/jar包文件。
# 生成包目录
wumei-smart\springboot\wumei-admin\target
2.jar部署方式
# 使用命令行执行
java –jar wumei-admin.jar
3.war部署方式
# wumei-smart\springboot\wumei-admin\pom.xml 文件中的packaging修改为war，放入tomcat服务器webapps
<packaging>war</packaging>
三、前端部署
运行命令，打包应用
# 打包正式环境
npm run build:prod
# 打包预发布环境
npm run build:stage
构建打包成功之后，会在根目录生成 dist 文件夹，里面就是构建打包好的文件，通常是 .js 、.css、index.html 等静态文件。
四、Nginx配置
前端打包后，dist目录里面文件上传的路径配置： /var/wumei-smart/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/wumei-smart/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;
}
}
}
建议开启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]\.";
（想要了解更多可查看物美智能官网：http://wumei.live/）
