Размещение с использованием CDN
При развертывании вашего приложения PlayCanvas для самостоятельного хостинга часто необходимо разделить местоположение, с которого предоставляется ваше приложение (index.html), от ассетов, которые загружает приложение. Например, сеть доставки контента (CDN) используется для обеспечения доставки ассетов с сервера, который географически близок к компьютеру пользователя. Это значительно ускоряет загрузку вашего приложения. В этом руководстве показано, как настроить ваше приложение PlayCanvas для использования отдельного местоположения для ваших ассетов.
Первый шаг - загрузить веб-сборку вашего приложения, следуя инструкциям в руководстве по
публикации. Затем мы начинаем с внесения изменений в файлы index.html и __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. В частности, таблица стилей, движок javascript PlayCanvas,
скрипты приложения __settings__.js, __loading__.js и __start__.js. Обновите ваш index.html, как показано
ниже.
В __settings__.js путь к настройкам приложения config.json также необходимо изменить. Обновите
Копирование файлов на 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__.jsstyles.css
Вы должны скопировать все эти файлы на свой хостинг-сервис CDN.
Настройка CORS
Теперь ваше приложение готово загружать файлы с другого сервера. Последний шаг, который нужно выполнить, - это убедиться, что ваш сервер
правильно настроен для обслуживания заголовков Cross-Origin Resource Sharing (CORS). CORS - это функция безопасности браузера, которая означает,
что по умолчанию веб-страница на http://example.com не может загружать файлы с веб-страницы на
http://keepy-up-cdn.example.com/, потому что у них разный "источник". Чтобы обойти это, вы должны установить сервер на
http://keepy-up-cdn.example.com/ для обслуживания заголовков CORS, которые сообщают браузеру, что другие страницы могут загружать
контент.
Настройка CORS зависит от того, какой CDN или сервер вы используете. Вам нужно будет проверить документацию вашего сервера или поставщика CDN, чтобы узнать, как настроить заголовок CORS. Например, страница настроек CORS для Amazon Web Services находится здесь