<Wumart intelligence >Catalogue of series articles
Tutorial 1: Alibaba cloud uses docker to quickly deploy the server
Tutorial 2: configuring the server development environment locally
Tutorial 3: hardware side - Introduction to Arduino and ESP8266 development board
Tutorial 4: using the Internet of things platform to control the hardware side
Tutorial 5: Internet of things platform user manual
Tutorial 6: Official SDK code function supplement
Tutorial 7: APP usage and scene linkage function
diy: self made four kinds of smart small appliances
preface
This article follows the above. The previous article has introduced how to quickly deploy Wumart intelligent platform docker. This article will teach you how to build a server in the local development environment.
gitee address:
https://gitee.com/kerwincui/wumei-smart
Construction mode of local environment
1. Development environment:
IDEA == 2021.2 JDK == 1.8 Maven >= 3.0
1. Deploy Mysql server with version above 5.7.0
course:
https://blog.csdn.net/qq_45273552/article/details/110004118?spm=1001.2014.3001.5502
2. Redis can be deployed on virtual machines or ECs. Students who have successfully deployed Wumart docker according to the previous chapter can directly connect to redis in docker
course:
http://t.csdn.cn/wLbEc
3. Deploy vue environment, node JS, version above 12
https://blog.csdn.net/goxohu/article/details/114626236
4. Deploy mqtt server
course:
https://blog.csdn.net/qq_40698086/article/details/121562514
2. Back end operation
idea pulls the code on gitee locally
- Create Wumei smart database and import springboot / SQL / wumei.com in the project SQL database script. (install MySQL in Linux, configure case sensitivity, add lower_case_table_names=1 in / etc/my.cnf, and restart MySQL service.)
- When the development tool IDEA opens the springboot folder, it will automatically install Maven dependency and wait for the installation to complete. The speed depends on the network.
- Modify the database connection. The file is located at springboot / Wumei admin / SRC / main / resources / application Druid yml
# Data source configuration
spring:
datasource:
type: com.alibaba.druid.pool.DruidDataSource
driverClassName: com.mysql.cj.jdbc.Driver
druid:
# Master database data source
master:
url: Database address
username: Database account
password: Database password
1. The service configuration file is located in springboot / Wumei admin / SRC / main / resources / application YML. Pay attention to the format of the configuration file. The indentation must be aligned.
## Example of file upload path (Windows configuration D: / Wumei smart / uploadpath, Linux configuration / var / Wumei smart / Java / uploadpath)
profile: /var/wumei-smart/java/uploadPath
## redis configuration
redis:
# address
host: localhost
# Port, 6379 by default
port: 6379
# Database index
database: 0
# password
password: wumei-smart
## EMQX configuration
mqtt:
username: wumei-smart # Account number (user name of device simple authentication)
password: wumei-smart # Password (password for simple device authentication)
host-url: tcp://Localhost: 1883 # emqx deployment address
2. The log path configuration file is located in springboot / Wumei admin / SRC / main / resources / logback xml
# Example (Windows configuration D: / Wumei smart / logs, Linux configuration / var / Wumei smart / Java / logs) <property name="log.path" value="/var/wumei-smart/java/logs" />
3. Run the project wumeismartapplication Java, the following figure shows that the startup is successful.
_ _
(_) | |
__ ___ _ _ __ ___ ___ _ ___ _ __ ___ __ _ _ __| |_
\ \ /\ / / | | | '_ ` _ \ / _ \ | / __| '_ ` _ \ / _` | '__| __|
\ V V /| |_| | | | | | | __/ | \__ \ | | | | | (_| | | | |_
\_/\_/ \__,_|_| |_| |_|\___|_| |___/_| |_| |_|\__,_|_| \__|
----------Open source living Internet of things platform----------
=========wumei-smart Start successful=========
Front end operation
Developer Visual Studio Code opens the vue directory in the project
- 1. Modify the Vue of the root directory config. The back-end interface address and Emqx installation address in JS file need not be modified locally.
proxy: {
[process.env.VUE_APP_BASE_API]: {
target: `http://localhost:8080 `, / / backend interface address
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
}
},
['/api/v4']: {
target: `http://Localhost: 8081 `, / / emqx installation address
changeOrigin: true,
},
},
- 2. Modify Wumei smart \ Vue \ SRC \ views \ IOT \ device \ mqtt client Mqtt connection address of Vue file. Emqx is installed locally without modification.
// Configure Mqtt connection address, for example: ws://localhost:8083/mqtt
let url = "ws://" + window.location.hostname + ":8083/mqtt";
console.log("mqtt Address:", url);
this.client = mqtt.connect(url, options);
- 3. After the modification, start to install the dependency. You can solve the problem of slow npm installation by re specifying the registry.
# Installation dependency npm install # It is strongly recommended not to use cnpm directly for installation. There will be various strange bug s npm install --registry=https://registry.npm.taobao.org # Local development start-up project npm run dev
- 4. Open the browser and enter: http://localhost:80 Default account / password admin/admin123. If the login page can be displayed correctly and successfully, and the menu and page display are normal, it indicates that the environment is built successfully.
4, EMQX configuration
HTTP authentication
The system uses the HTTP authentication plug-in of EMQX to realize user-defined authentication logic. The configuration file is located in: etc/plugins/emqx_auth_http.conf
## Modify the request address in the authentication request, and leave others as default 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 ## Comment the super user's request address, request method and parameters # 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 ## Note the request address, request method and parameters of ACL authentication # 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
The authentication request address is the back-end interface http://localhost:8080/iot/tool/mqtt/auth , the back-end runs locally, using localhost or local IP, and the default port is 8080. If it is modified or proxy, it needs to be modified accordingly. Super user authentication and ACL authentication are not needed, but they need to be commented out, otherwise it will take about 5 seconds to authenticate.
WebHook
The system uses the WebHook plug-in of EMQX to realize the functions of equipment online and offline and IP positioning. The configuration file is located in: etc/plugins/emqx_web_hook.conf
## Modify webhook address
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"}
The WebHook address is the back-end interface http://localhost:8080/iot/tool/mqtt/webhook , the back-end runs locally, using localhost or local IP, and the default port is 8080. If it is modified or proxy, it needs to be modified accordingly. Enable web.hook.rule.client.connected.1 and web hook. rule. client. disconnected. 1. Comment out other items to save back-end resources.
Turn off anonymous authentication
Anonymous authentication is unsafe. It is recommended to close it. EMQX uses multiple authentication methods at the same time, which will also reduce the authentication speed. The configuration file is located in: etc / EMQX Conf, the file is relatively large and is probably located on line 447.
## Value: true | false allow_anonymous = false
Enable Http authentication and WebHook plug-ins
When emqx starts, the plug-in will be started by default, directly in data/loaded_plugins add the name of the plug-in to be started {emqx_auth_http, true} {emqx_web_hook,true}. . The installation mode may be different in / var / emload configuration file_ Plugins location. After all configurations of emqx are modified, restart 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}.
System deployment
1, The project is separated from the front end and the back end. The front end and the back end need to be deployed separately. Refer to the official website for the installation of EMQX, and refer to the system operation in the previous chapter for the configuration.
2, Backend deployment
1. Execute package in Wumei smart \ springboot \ bin directory Bat is packaged into a Web project to generate a war/jar package file.
# Build package directory wumei-smart\springboot\wumei-admin\target
2.jar deployment method
# Execute using the command line java –jar wumei-admin.jar
3.war deployment mode
# wumei-smart\springboot\wumei-admin\pom. Modify the packaging in the XML file to war and put it into the tomcat server webapps <packaging>war</packaging>
3, Front end deployment
Run the command and package the application
# Packaging formal environment npm run build:prod # Packaged pre release environment npm run build:stage
After the build is packaged successfully, the dist folder will be generated in the root directory, which is the built packaged file, usually js ,. css,index.html and other static files.
4, Nginx configuration
After the front end is packaged, the path configuration of file upload in dist Directory: / var / Wumei smart / Vue. Back end deployment address: http://localhost:8080/ The default port is 8080. EMQX installation address: http://localhost:8081/api/v4/ The default port is 8081. All configurations are as follows:
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;
}
}
}
It is recommended to enable Gzip compression of nginx to speed up Web page access. The configuration is as follows:
# Turn on gzip compression gzip on; # The critical value of non compression, which is compressed only when it is greater than 1K, generally does not need to be changed gzip_min_length 1k; # Compression buffer gzip_buffers 16 64K; # Compressed version (default 1.1, if the front end is squid2.5, please use 1.0) gzip_http_version 1.1; # The compression level is 1-10. The larger the number, the better the compression and the longer the time gzip_comp_level 5; # Type of file to compress gzip_types text/plain application/x-javascript text/css application/xml application/javascript; # Related to Squid and other caching services, if on, add "vary: accept encoding" in the Header gzip_vary on; # IE6 is not very friendly to Gzip, so I won't give it Gzip gzip_disable "MSIE [1-6]\.";
(for more information, please check Wumart's official website: http://wumei.live/)