Host the frontend files on a CDN
This guide explains how to upload the JavaScript and CSS files of the Casdoor frontend to a content delivery network (CDN) with a script from the Casdoor repository.
Learning outcomes
- Create a storage provider that points to your CDN.
- Upload the built frontend files with the deployment script.
- Understand what the script changes.
What you need
- Casdoor built from source, with the frontend built into
web/build. See Run in production mode. - An object storage service with a CDN, such as Alibaba Cloud OSS
About the script
The script deployment/deploy_test.go does two things:
- It uploads the files under
web/build/assets/to the storage provider. Before Casdoor v4, the directory wasweb/build/static/. - It rewrites the URLs of the
.cssand.jsfiles inweb/build/index.html, so that they point to the CDN.
The Casdoor backend still serves index.html. The browser then loads the assets from the CDN.
порада
If you install the frontend from the casdoor-web npm package, you don't need this script. Set frontendCdnUrl in app.conf instead.
Create a storage provider
-
In the Casdoor admin console, create a storage provider for your object storage.
-
Set the Domain field to the URL of the CDN, ending with
/.
Upload the files
-
In
deployment/deploy_test.go, set the ID of your provider in the call toGetProvider(). The format is<owner>/<name>.func TestDeployStaticFiles(t *testing.T) {
provider := object.GetProvider("admin/provider_storage_aliyun_oss")
deployStaticFiles(provider)
} -
Run the script:
cd deployment
go testWhen the upload succeeds, the output is:
PASS
ok github.com/casdoor/casdoor/deployment 2.951s