EMQ Dashboard前端頁面使用SPA設(shè)計(single-page application), 后端使用 MochiWeb 服務(wù)器處理來自REST API的數(shù)據(jù)并分發(fā)EMQ Broker的信息以及頁面所需的靜態(tài)文件, 這個架構(gòu)在部署上也可以實現(xiàn)良好的前后端分離。

基本結(jié)構(gòu)

# REST API地址
http(s)://host:8080/api/v2/

# Dashboard API地址
http(s)://host:18083/api/v2/

# 前端文件結(jié)構(gòu)
www
    ├── favicon.ico
    ├── index.html
    └── static
        ├── css
        │   ├── *
        ├── fonts
        │   ├── *
        └── js
            ├── *

如果你需要使用Nginx來處理靜態(tài)資源文件或代理API接口，以獲得期望的性能和更高的安全性，這里提供一個官方的實踐指導(dǎo)。

1. 一個基本的nginx服務(wù)器配置, 將轉(zhuǎn)發(fā)Dashboard所有的數(shù)據(jù)

server {
        listen  80;
        server_name  localhost;
        # access_log  logs/host.access.log  main;
        # error_page  404 /index.html
        location / {
            proxy_pass   http://127.0.0.1:18083;
        }
}

這個配置僅僅是將瀏覽器發(fā)起的請求無差別反向代理到Dashboard，Dashboard仍然處理了繁重的靜態(tài)資源分發(fā)任務(wù)。

2. 使用nginx處理靜態(tài)資源，并代理轉(zhuǎn)發(fā)API的數(shù)據(jù)

server {
        listen  80;
        server_name  localhost;
        # access_log  logs/host.access.log  main;
        # error_page  404 /index.html
        
        # 靜態(tài)資源
        location / {
            # 復(fù)制一份靜態(tài)資源到此目錄下
            root   /www;
            # 如果你想使用已安裝在本機的EMQ里面的靜態(tài)資源,
            # /emqttd/lib/emq_dashboard-2.3.0/priv/www/
            index  index.html;
        }
        
        # API數(shù)據(jù)
        location /api/v2/ {
            proxy_pass   http://127.0.0.1/api/v2;
        }
}

前端靜態(tài)資源文件在emq-dashboard 的 priv/www 目錄下, 參見https://github.com/emqtt/emq-dashboard/tree/master/priv/www