CDN Configuration Support

This article explains how to configure the Hengshi system to achieve CDN static resource separation from the program. Supported configuration methods:

1. Backend Configuration for Frontend CDN Address (Recommended Method)
2. Frontend Configuration for Backend API Address

Backend Configuration for Frontend CDN Address (Recommended Method)

With this method, the business domain points to the Hengshi deployment service, and then informs the browser to fetch static resource files from the CDN service. In the example, it is assumed that the backend deployment domain is https://bi.domain.com and the frontend CDN deployment domain is https://cdn.domain.com.

CDN Configuration

Two methods are supported:

1. CDN Automatic Proxy There is no need to deploy frontend files separately. Set the CDN's origin address to https://bi.domain.com. This ensures that when static resource requests come in, they 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 decompression, retain the static directory. Upload the files under the static directory (excluding the static directory and static/index.html) to the static file service. This can be either for CDN proxy or to divert static resources to an independent static file server. This allows access to https://cdn.domain.com/assets/xxx via the CDN domain.

Hengshi Configuration

1. Dependency on Reverse Proxy Hengshi requires 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 that the address ends with '/'
  proxy_set_header X-HS-CDN-Path "https://cdn.domain.com/";
  ...
}

2. Request Hengshi Service to Verify Configuration Request the Hengshi service to verify that the configuration is successful. 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

Visiting https://bi.domain.com in a browser should show that all js and css file requests 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 method, the business domain points to the CDN service, and the frontend accesses the backend API itself, or still accesses the hengshi backend API indirectly 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 version of the frontend is lhotse-x.y.z-xxx.zip. After decompression, keep the static directory.
2. Configure the backend domain in the frontend static/index.html file.

   cd static;
   sed -i -r 's#backend=\{api:"[^"]*"\}#backend=\{api:"https://api.domain.com"\}#' index.html

3. Deploy the index.html and assets under static to the root path of the CDN, so that https://cdn.domain.com/index.html and https://cdn.domain.com/assets/xxx can be accessed via the CDN domain.

Hengshi Configuration

1. Configure the frontend CDN domain to the backend configuration file (assuming the backend is deployed at /opt/hengshi), add the variable export ACCESS_CONTROL_ALLOW_ORIGIN="https://cdn.domain.com" in /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 https://cdn.domain.com in the browser, you should see all js and css files being served from https://cdn.domain.com, and API requests being sent to https://api.domain.com.