使用 Nginx 做 EMQ Dashboard静态资源服务器

EMQ Dashboard前端页面使用SPA设计(single-page application), 后端使用 MochiWeb 服务器处理来自REST API的数据并分发EMQ Broker的信息以及页面所需的静态文件, 这个架构在部署上也可以实现良好的前后端分离。

基本结构

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

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

# 前端文件结构
www
    ├── favicon.ico
    ├── index.html
    └── static
        ├── css
        │   ├── *
        ├── fonts
        │   ├── *
        └── js
            ├── *

如果你需要使用Nginx来处理静态资源文件或代理API接口，以获得期望的性能和更高的安全性，这里提供一个官方的实践指导。

1. 一个基本的nginx服务器配置, 将转发Dashboard所有的数据

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;
        }
}

这个配置仅仅是将浏览器发起的请求无差别反向代理到Dashboard，Dashboard仍然处理了繁重的静态资源分发任务。

2. 使用nginx处理静态资源，并代理转发API的数据

server {
        listen  80;
        server_name  localhost;
        # access_log  logs/host.access.log  main;
        # error_page  404 /index.html
        
        # 静态资源
        location / {
            # 复制一份静态资源到此目录下
            root   /www;
            # 如果你想使用已安装在本机的EMQ里面的静态资源,
            # /emqttd/lib/emq_dashboard-2.3.0/priv/www/
            index  index.html;
        }
        
        # API数据
        location /api/v2/ {
            proxy_pass   http://127.0.0.1/api/v2;
        }
}

前端静态资源文件在emq-dashboard 的 priv/www 目录下, 参见https://github.com/emqtt/emq-dashboard/tree/master/priv/www