哪吒监控部署 流媒体解锁：Grafana + Prometheus

首先放一个我自己的哪吒监控 孱弱小鸡 ，不太好看，但是基本的功能有了。整体的期望是在监控服务器的同时，也能监控服务器流媒体解锁情况，方便在不同的服务器中切换；

整体参考了 YorkChou 大佬的指导 https://yorkchou.com/media-unlock-monitor.html；但是其中有些操作说的稍显模糊，我自己记录一下操作步骤；

整体逻辑是，promethues获取不同vps的信息,然后交给grafana处理；最后通过nezha的iframe调用grafana面板；

1.在自己需要确认流媒体服务的vps上安装监控服务

bash <(curl -Ls unlock.moe/monitor) -service

这里可以直接参考YorkChou的建议，不同区域使用不同的命令

2.在自家需要部署哪吒的服务器上安装promethues;

建议是docker安装，我的grafana,promethues和nezha都安装在openwrt上；因为自家家宽的80端口被封了，后续用的阿里云服务器做反代，不在此处详述；

总体而言，假设大家已经安装了nezha监控，我们接下先安装promethues。

promethues,使用 docker 将prom/prometheus:latest 拉到本地；然后配置一个promethues.yml,内容如下：

# my global config
global:
  scrape_interval: 15s # Set the scrape interval to every 15 seconds. Default is every 1 minute.
  evaluation_interval: 15s # Evaluate rules every 15 seconds. The default is every 1 minute.
  # scrape_timeout is set to the global default (10s).

# Alertmanager configuration
alerting:
  alertmanagers:
    - static_configs:
        - targets:
          # - alertmanager:9093

# Load rules once and periodically evaluate them according to the global 'evaluation_interval'.
rule_files:
  # - "first_rules.yml"
  # - "second_rules.yml"

# A scrape configuration containing exactly one endpoint to scrape:
# Here it's Prometheus itself.
scrape_configs:
  # The job name is added as a label `job=<job_name>` to any timeseries scraped from this config.
  - job_name: "prometheus"

    # metrics_path defaults to '/metrics'
    # scheme defaults to 'http'.

    static_configs:
      - targets: ["localhost:9090"]
  - job_name: checkmedia
    scrape_interval: 30s
    static_configs:
      - targets:
        - "8.210.xxx.xxx:9101"
        - "4.230.xxx.xxx:9101"

其中你只需要把最后的vps的ip地址填上去，默认9091端口；

然后启动容器：如果使用openwrt的话，可视化界面启动容器不谈了；如果是命令行的话：

docker run --name prometheus -d \
    -p 9090:9090 \
    -v /etc/localtime:/etc/localtime:ro \
    -v /opt/prometheus/data:/prometheus/data \
    -v /opt/prometheus/config:/prometheus/config \
    -v /opt/prometheus/rules:/prometheus/rules \
    prom/prometheus:v2.41.0 --config.file=/prometheus/config/prometheus.yml --web.enable-lifecycle

这里面-v的目的是将服务器的地址（冒号前面）与容器内的地址（冒号后面）映射，后续每次运行的数据可以持久化；最后一行将prometheus.yml作为配置文件，所以我们修改的yml文件需要放在服务器对应的/opt/prometheus/config中；

在openwrt中可能出现一种情况，如果我们忘记配置地址映射了，甚至配置最开始也没有导入改怎么办呢
这种情况下，数据生成在容器内部，没有外部对应的文件夹，怎么修改呢？推荐是重新配置容器，与外部环境映射；也有一种方式，则是在当前容器中修改配置。

首先进入openwrt的Docker，点击容器，在容器中扎到正在运行的容器名，例如我取名为Proms,点击名字；

进入后在页签界面选择名为文件的页签，我们就进入了正在运行的容器的内部文件路径；进入/etc/prometheus/ 里面有一个prometheus.yml，既是我们需要修改的文件；将修改的文件传入，并将原始文件移除后，点击容器的重启按钮，最后也能按照目标配置；

运行成功后，我们就可以访问9090端口进入prometheus的可视化界面了；
进入的方式：直接在浏览器的地址栏中输入你服务器对应的IP地址:9090；如果有域名也可以用域名:9090；
举例1：我的服务器是本地服务器，在局域网192.168.101.2中，则输入：192.168.101.2:9090
举例2：我的服务器是华为云/腾讯云/阿里云，则找到对应的IP地址，40.32.132.33:9090
举例3：我的服务器已经绑定了域名，并开启了动态DNS，域名为overstic.com，则可以输入www.overstic.com:9090
进入后，点击正上方Status - Target health,应该就能看到如下图所有的服务器跟踪了

如果这步失败，需要考虑是否服务器正确按照第一步安装了命令，然后配置文件是否加入的对应服务器ip.以及yml格式的首行缩进等是否正确；

3.在自家需要部署哪吒的服务器上安装grafana;

grafana的操作方式，先docker将 grafana/grafana:latest 拉到本地

然后直接docker命令配置

docker run -d \
  --name=grafana \
  -p 3000:3000 \
  -v /opt/grafana/config:/etc/grafana \
  -v /opt/grafana/data:/var/lib/grafana \
  -v /opt/grafana/plugins:/var/lib/grafana/plugins \
  --user 472 \
  grafana/grafana:latest

接着进入3000界面：
grafana的配置，请直接参考YorkChou 的配置；
当大家按照上述操作配置好后，可以在Dashboards中找到对应的流媒体解锁dashborads

点进去，能看到类似的界面，如果你按照YorkChou的配置了一个服务器；不需要按照之前的操作完全重新配置，可以直接复制，复制方式如下：

先点击右上角edit

然后选择一个配置好的，例如JP CLAW面板的右上角点击

复制后，同样点击复制好的JP CLAW右上角的编辑按钮，配置一个新的boards即可；

配置完成后，整个界面右上角，edit旁边有一个share按钮；将这个dashborads分享出去，可以得到一个本地的仪表盘网址；在浏览器中输入网址，检查是否能够进入分享的界面，如下图：

这个界面只能观看，不能配置，也就是我们要在nezha服务器上可视化的界面；可以按照自己的喜好排版；

4.在哪吒的服务器上将页面共享;

进入哪吒服务器的后台，在系统设置 - 自定义代码 添加如下的iframe;

 <div class="custom-visualization" style="
    display: flex;
    justify-content: center;
    align-items: flex-end;
    min-height: 100vh;">
  <iframe 
    src="共享的连接"
    width="1200" 
    height="800"
    style="margin-bottom: 20px;">
  </iframe>
</div>

就可以在主页面中看到了；你可以自己配置iframe的格式，使它和你的哪吒面板更贴合

如果你在主页面看到一个面板，但是整体呈现灰色，显示拒绝了请求；则有可能是Grafana嵌入到哪吒监控时出现的X-Frame-Options被拒绝的问题，X-Frame-Options的作用，它用来控制页面是否可以被嵌入到iframe中，防止点击劫持攻击。默认情况下，Grafana可能设置为deny，导致无法嵌入。

我们需要修改Grafana的配置文件，在/etc/grafana/grafana.ini中，修改

allow_embedding = true
x_frame_options = ""

注意！如果前面有";"这个符号，是要先删掉的，我最早以为有用，结果一直xframe不生效。。

修改之后，重启容器，应该就成功了