Tutorial 2: configuring the server development environment locally

<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


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:

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
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
3. Deploy vue environment, node JS, version above 12
4. Deploy mqtt server

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
        type: com.alibaba.druid.pool.DruidDataSource
        driverClassName: com.mysql.cj.jdbc.Driver
            # Master database data source
                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
    # address
    host: localhost
    # Port, 6379 by default
    port: 6379
    # Database index
    database: 0
    # password
    password: wumei-smart
  ## EMQX configuration
    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 = 
# 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 =                                                             
# 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.

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.


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

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

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/)

Posted by elenev on Mon, 18 Apr 2022 09:44:06 +0930