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)
2. 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.

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.

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.

   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.

   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.