EMQ Dashboard前端頁面使用SPA設(shè)計(jì)(single-page application), 后端使用 MochiWeb 服務(wù)器處理來自REST API的數(shù)據(jù)并分發(fā)EMQ Broker的信息以及頁面所需的靜態(tài)文件, 這個(gè)架構(gòu)在部署上也可以實(shí)現(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接口，以獲得期望的性能和更高的安全性署恍，這里提供一個(gè)官方的實(shí)踐指導(dǎo)崎溃。
- 一個(gè)基本的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;
}
}
這個(gè)配置僅僅是將瀏覽器發(fā)起的請(qǐng)求無差別反向代理到Dashboard，Dashboard仍然處理了繁重的靜態(tài)資源分發(fā)任務(wù)盯质。
- 使用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;
# 如果你想使用已安裝在本機(jī)的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
