---
url: /v6.2/en-us/cdn-config.md
---
# Support CDN Configuration

This article explains how to configure the HENGSHI system to achieve the separation of CDN static resources and program configuration. Supported configuration methods:

1. [Backend Configuration of Frontend CDN Address (Recommended Method)](#backend-configuration-of-frontend-cdn-address-recommended-method)
2. [Frontend Configuration of Backend API Address](#frontend-configuration-of-backend-api-address)

## Backend Configuration for Frontend CDN Address (Recommended Method)

In this method, the business domain points to the HENGSHI deployment service, and the browser is instructed to fetch static resource files from the CDN service.\
In the example, the backend deployment domain is assumed to be `https://bi.domain.com`, and the frontend CDN deployment domain is `https://cdn.domain.com`.

### CDN Configuration

Supports two methods:

1. CDN Automatic Proxy\
   No need to deploy frontend files separately. Set the CDN's origin address to `https://bi.domain.com`, ensuring that static resource requests are automatically fetched from the origin.

2. Independent Deployment of Frontend Files\
   The installation package for the corresponding frontend version is `lhotse-x.y.z-xxx.zip`. After extraction, retain the `static` directory. Upload the files under the `static` directory (excluding the `static` directory itself and `static/index.html`) to the static file service. These files can then be accessed via CDN proxy or used to distribute static resources to an independent static file server, allowing access through the CDN domain at `https://cdn.domain.com/assets/xxx`.

### hengshi Configuration

1. hengshi relies on a reverse proxy in front of it. Here, nginx is used as an example. Configure the reverse proxy to pass a header `X-HS-CDN-Path` to the hengshi service, specifying the CDN address.

```text
server {
  listen 443 ssl;
  server_name bi.domain.com;
  ...
  # Note: The address should end with '/'
  proxy_set_header X-HS-CDN-Path "https://cdn.domain.com/"; // [!code focus]
  ...
}
```

2. Request the hengshi service to verify the configuration. If the configured address is returned, the configuration is successful.

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

### Access Method

Accessing `https://bi.domain.com` via a browser should show that all requests for js and css files are sent to `https://cdn.domain.com`, while API requests are still sent to `https://bi.domain.com`.

## Frontend Configuration for Backend API Address

In this approach, the business domain points to the CDN service, and the frontend either directly accesses the backend API or indirectly accesses the HENGSHI backend API through the CDN.

In the example, it is assumed that the backend deployment domain is `https://api.domain.com`, and the frontend CDN deployment domain is `https://cdn.domain.com`.

### CDN Configuration

1. The installation package for the corresponding front-end version is `lhotse-x.y.z-xxx.zip`. After extracting, retain the `static` directory.
2. Configure the backend domain in the front-end `static/index.html` file.
   ```sh
   cd static;
   sed -i -r 's#backend=\{api:"[^"]*"\}#backend=\{api:"https://api.domain.com"\}#' index.html
   ```
3. Deploy `index.html` and `assets` under the `static` directory to the root path of the CDN, so that the CDN domain can access `https://cdn.domain.com/index.html` and `https://cdn.domain.com/assets/xxx`.

### hengshi Configuration

1. Configure the frontend CDN domain name in the backend configuration file (assuming the backend is deployed at `/opt/hengshi`). Add the variable `export ACCESS_CONTROL_ALLOW_ORIGIN="https://cdn.domain.com"` to `/opt/hengshi/conf/hengshi-sense-env.sh`.
2. Restart the hengshi service.
   ```sh
   cd /opt/hengshi;
   bin/hengshi-sense-bin restart hengshi;
   ```

### Access Method

Access the CDN frontend domain via a browser at `https://cdn.domain.com`. You should see all JS and CSS file requests sent to `https://cdn.domain.com`, and API requests sent to `https://api.domain.com`.