---
url: /v6.2/cdn-config.md
---
# 支持 CDN 配置

本文介绍如何配置衡石系统，实现 CDN 静态资源与程序分离配置。
支持的配置方式：

1. [后端配置前端 cdn 地址(推荐方式)](#后端配置前端-cdn-地址-推荐方式)
2. [前端配置后端 api 地址](#前端配置后端-api-地址)

## 后端配置前端 cdn 地址 (推荐方式)

此种方式，业务域名指向 hengshi 部署的服务，再告知浏览器去 cdn 的服务上获取静态资源文件。
示例中假设后端部署域名为 `https://bi.domain.com`，前端 CDN 部署域名为`https://cdn.domain.com`。

### cdn 配置

支持两种方式：

1. cdn 自动代理
   不用单独部署前端文件，将 cdn 的回源地址设置为 `https://bi.domain.com`, 这样保障静态资源请求发过来时，自动回源获取。

2. 前端文件独立部署
   前端对应版本的安装包为 lhotse-x.y.z-xxx.zip，解压后保留 static 目录。 将 static 目录下的文件(不包含 static 目录，不包含 static/index.html)上传到静态文件服务上，由 cdn 代理或用于将静态资源分流到独立的静态文件服务器。使通过 cdn 域名可以访问到 `https://cdn.domain.com/assets/xxx`。

### hengshi 配置

1. 依赖 hengshi 前面有一个反向代理，此处以 nginx 举例。配置反向代理给 hengshi 服务传一个 header `X-HS-CDN-Path` 写明 cdn 地址

```text
server {
  listen 443 ssl;
  server_name bi.domain.com;
  ...
  # 注意地址以 '/' 结尾
  proxy_set_header X-HS-CDN-Path "https://cdn.domain.com/"; // [!code focus]
  ...
}
```

2. 请求 hengshi 服务，验证配置成功, 返回配置的地址则配置成功

```sh
curl https://bi.domain.com | grep -o '<name="cdn" content="https://cdn.domain.com/">'
```

### 访问方式

浏览器访问 `https://bi.domain.com` 应该看到所有的 js 和 css 文件的请求都发送到了 `https://cdn.domain.com`， api 请求依然发送给 `https://bi.domain.com`。

## 前端配置后端 api 地址

此种方式，业务域名指向 cdn 服务，再由前端自己访问后端 api，或依然访通过 cdn 间接访问 hengshi 后端 api。

示例中假设后端部署域名为 `https://api.domain.com`，前端 CDN 部署域名为`https://cdn.domain.com`。

### cdn 配置

1. 前端对应版本的安装包为 lhotse-x.y.z-xxx.zip，解压后保留 static 目录。
2. 将后端域名配置到前端`static/index.html`文件。
   ```sh
   cd static;
   sed -i -r 's#backend=\{api:"[^"]*"\}#backend=\{api:"https://api.domain.com"\}#' index.html
   ```
3. 将 static 下 index.html 与 assets 部署到 cdn 跟路径下，使通过 cdn 域名可以访问到`https://cdn.domain.com/index.html`与 `https://cdn.domain.com/assets/xxx`。

### hengshi 配置

1. 将前端 cdn 域名配置给后端配置文件 (假设后端部署在 `/opt/hengshi`), 在 `/opt/hengshi/conf/hengshi-sense-env.sh`中添加变量`export ACCESS_CONTROL_ALLOW_ORIGIN="https://cdn.domain.com"`。
2. 重启 hengshi 服务。
   ```sh
   cd /opt/hengshi;
   bin/hengshi-sense-bin restart hengshi;
   ```

### 访问方式

浏览器访问 cdn 前端域名`https://cdn.domain.com`，应该看到所有 js 和 css 文件请求发送到 `https://cdn.domain.com`, api 请求发送到了 `https://api.domain.com`