跳到主要内容

使用 CDN 托管

自行托管 PlayCanvas 应用时，常需要将应用入口 index.html 与加载的资源放在不同位置。例如，内容分发网络（CDN）可从地理位置更接近用户的服务器分发资源，加快加载。本指南介绍如何为资源配置独立位置。

先按照发布指南下载应用的 Web 构建，再修改其中的 index.html 和 __settings__.js。

从其他位置提供资源​

最简单的做法是设置 __settings__.js 中的 ASSET_PREFIX，让全部资源从其他位置加载。

settings.js 中的资源前缀

ASSET_PREFIX 会添加到预加载和运行时的所有资源请求前，包括场景请求。例如，将它设为 CDN 资源存储根目录。上例中，原 URL 为 files/123456/1/texture.jpg 的资源，会改从 http://keepy-up-cdn.example.com/files/123456/1/texture.jpg 加载。

其他 URL​

还有一些文件由 index.html 直接引用，尤其是样式表、PlayCanvas JavaScript 引擎，以及 __settings__.js、__loading__.js、__start__.js。按下图更新 index.html。

index.html 中的引用

__settings__.js 中应用配置文件 config.json 的路径也需要修改：

settings.js 中的配置路径

将文件复制到 CDN​

然后将所需文件复制到服务器的新位置。以下文件通过 ASSET_PREFIX 加载：

__game_scripts.js、场景 JSON（例如 123456.json）、config.json、资源（files 文件夹内全部内容），以及默认加载画面标志 logo.png。

以下文件由 index.html 引用：

  • playcanvas-stable.min.js，
  • manifest.json
  • __settings__.js
  • __loading__.js
  • __start__.js
  • styles.css

CDN 文件

将这些文件全部复制到 CDN 托管服务。

配置 CORS​

应用现已配置为从独立服务器加载文件。最后需要确保服务器正确返回跨域资源共享（CORS）响应头。浏览器的安全机制会限制不同来源的读取，例如 http://example.com 与 http://keepy-up-cdn.example.com/。应在资源服务器上配置 CORS，告知浏览器允许其他页面下载内容。

不同 CDN 和服务器的配置方式不同，请查阅对应提供商的文档。例如，Amazon Web Services 的设置详见 CORS 文档。