如何给 Grafana 加上 CDN？

如何把大象放到冰箱里？

1. 打开冰箱门；
2. 把大象塞进去；
3. 关上冰箱门；
4. …

正文

开个玩笑，不过给 Grafana 加上 CDN 也是如此：

1. 剥离 Grafana 静态资源文件；
2. 将静态资源的访问指向 CDN 地址；

详细描述如下：

1. 通过 Nginx 剥离 Grafana 的静态资源

Grafana 的静态资源路径都处于 /public 之后，所以只需要下文 Nginx 配置即可：

server {
    listen 80;
    server_name grafana.example.com;

    # 将静态资源指向 CDN 地址
    location /public {
        rewrite ^/(.*) http://grafana-cdn.example.com/$1 permanent;
    }

    # 非静态资源透传到 Grafana 后端
    location / {
        proxy_pass http://localhost:3000;
    }
}

2. 在 CDN 控制台新增域名（已七牛云举例）

注意：

1. “加速域名”填写 Nginx 中 rewrite 地址，访问该域名会走 CDN；
2. “源站配置”填写的是 grafana-cdn-ori.example.com，多了一个 -ori，这是为了 Nginx 在接收到该 server_name 访问时，不要 rewrite，对应的 Nginx 片段为：

server {
    listen 80;
    server_name grafana-cdn-ori.example.com;

    # 将所有请求直接透传到 Grafana 后端
    # CDN 通过该配置读取静态资源
    location / {
        proxy_pass http://localhost:3000;
    }
}

3. “回源 HOST”选择“源站域名”，否则无法匹配上一步定义的 server_name（nginx 是根据请求中的 HOST 来选择 server_name）。

3. 配置域名 CNAME 指向 CDN

CDN 新增域名完毕后，将“七牛云”提供的 CNAME 配置到域名 DNS 服务提供商处，以阿里云域名服务为例：