Самостоятельный хостинг для начинающих

Этот документ предназначен для людей, которые только начинают знакомиться с веб-программированием, и описывает на высоком уровне, как различные части веб-приложения объединяются для предоставления приложений PlayCanvas или других веб-страниц пользователю в браузере.

Веб-стек

В общем случае, вы можете разделить веб-приложение на 3 части: серверную, клиентскую и статический контент. В почти всех случаях у вас будут все три части для вашего веб-приложения, хотя иногда одна или несколько частей будут либо очень простыми, либо обрабатываться другим сервисом.

Серверный код

Когда пользователь открывает ссылку в своем веб-браузере, браузер отправляет запрос на сервер где-то в интернете с просьбой предоставить HTML-страницу. В самом простом случае это страница текста, которая находится на жестком диске веб-сервера и отправляется обратно через интернет в браузер.

Для веб-страниц, которые являются документами для отображения текста или изображений, это работает очень хорошо. Но для обеспечения определенного уровня интерактивности, часто сервер выполняет некоторую обработку после получения запроса, а затем отображает страницу HTML, включая результаты этой обработки.

Например, в PHP вы можете показать текущую дату и время внутри вашей страницы.

<html>
    <head>
        <title>Моя домашняя страница</title>
    </head>
    <body>
        <h1>Сегодняшняя дата</h1>
        <?php
            echo date(DATE_RFC2822);
        ?>
        <p>Хорошего дня</p>
    </body>
</html>

Этот PHP-код создает HTML-страницу, как показано ниже, и отправляет ее в браузер для отображения.

<html>
    <head>
        <title>Моя домашняя страница</title>
    </head>
    <body>
        <h1>Сегодняшняя дата</h1>
        Пн, 11 апр 2016 06:54:14 -0400
        <p>Хорошего дня</p>
    </body>
</html>

Существует множество различных языков и фреймворков для написания кода на стороне сервера. PHP, Python, Nodejs, Ruby - все это популярные варианты. Но в конечном итоге у них одна и та же цель: они получают запрос на HTML-страницу, выполняют некоторую обработку и затем возвращают данные HTML.

При написании приложений PlayCanvas ни одна строка кода, написанная вами в PlayCanvas, не работает на стороне сервера, и мы не предоставляем кода на стороне сервера для ваших проектов.

Код на стороне клиента

В веб-стеке сервер - это не единственное место, где мы можем программировать и реагировать на пользовательский ввод. Код на стороне клиента относится к коду, работающему в вашем браузере. Этот код всегда написан на Javascript, который является языком, на котором работают браузеры. С помощью клиентского javascript вы можете выполнять множество различных операций. В самом простом случае вы можете изменить HTML-страницу, загруженную с сервера.

var title = document.getElementById("title");
title.innerHTML = "Это новый заголовок";

Или в самом сложном случае вы можете написать полноценную 3D WebGL игру с использованием PlayCanvas. Потому что все, что вы пишете с использованием PlayCanvas, является клиентским javascript.

Статический контент

Некоторые части вашего веб-приложения не являются динамическими и не нуждаются в изменениях. Например, изображения, аудиофайлы, текстовые файлы и, в случае приложений PlayCanvas, 3D-модели и текстуры. Можно считать это немного похожим на загрузку файлов с локального диска, за исключением того, что, конечно, это происходит через интернет, поэтому это немного медленнее. Обслуживание статического контента осуществляется веб-сервером, очень похожим на серверный код, и в некоторых случаях это будет одна и та же машина. Так как нет интерактивности, для выполнения запроса не требуется обработка. Веб-сервер просто отправляет запрошенный файл.

Главное в статическом контенте - обеспечить его максимально быстрое скачивание клиентом.

Размещение приложений PlayCanvas

Когда вы создаете приложение PlayCanvas, вы пишете клиентский код на javascript и создаете ассеты, которые являются статическим контентом. В проектах PlayCanvas у вас вообще не будет серверного кода.

Когда вы публикуете с использованием PlayCanvas, мы обрабатываем серверную часть, настраивая URL, откуда ваше приложение будет загружаться, отправляя обратно HTML-страницу, которая запускает ваше клиентское приложение. Когда загружается HTML-страница, она запускает клиентский javascript вашего приложения PlayCanvas, который загружает все ваши ассеты с наших серверов статического контента.

Мы разработали хостинг PlayCanvas так, чтобы он был оптимизирован для быстрой доставки вашего приложения PlayCanvas конечным пользователям по всему миру. Вот почему самый простой способ развертывания приложения PlayCanvas - это нажать кнопку публикации и отправить URL playcanv.as. Однако в некоторых случаях вам может потребоваться разместить свое собственное приложение.

Самостоятельное размещение приложений PlayCanvas

У нас есть более подробная страница о самостоятельном размещении приложения PlayCanvas. Но вкратце, для самостоятельного размещения вам нужно предоставить три части веб-стека, описанные выше.

Сервер

Для стандартного приложения PlayCanvas не требуется серверный код. Однако вам все равно нужно будет предоставить веб-сервер, потому что вам нужно обслуживать статический контент, включая файл index.html, который находится в вашем загруженном приложении. Именно этот файл будет запрашивать браузер для загрузки вашего приложения. Два распространенных веб-сервера для Linux: Apache и Nginx и один распространенный веб-сервер для Windows: IIS.

Кэширование и сжатие

Как описано в разделе Сервер, вы будете обслуживать весь ваш контент PlayCanvas, включая файл index.html, с вашего веб-сервера в качестве статического контента.

Для достижения хорошей производительности при обслуживании статического контента критически важно включить сжатие gzip и установить правильные заголовки кэша для контента. См. документацию вашего веб-сервера о том, как включить сжатие и заголовки кэширования для статического контента.

Типы контента

Не все серверы имеют настроенные типы контента для распространенных форматов, используемых в PlayCanvas, и могут вызывать ошибки при попытке загрузить приложение с сервера.

Если у вас возникают ошибки или предупреждения о том, что ассеты не обслуживаются правильно в браузере, вам, возможно, придется добавить эти типы.

Вот список типов контента, используемых в приложениях PlayCanvas:

Тип файла	Тип контента
AAC	audio/aac
BASIS	application/octet-stream
BIN	application/octet-stream
DDS	image/dds
GLB	model/gltf-binary
JPEG	image/jpeg
JS	application/javascript
JSON	application/json
MP3	audio/mpeg
MP4	video/mp4
OGG	audio/ogg
PNG	image/png
TEXT	text/plain
WASM	application/wasm
WAV	audio/x-wav
XML	application/xml

Клиент

Клиентский код - это все, что вы написали в рамках вашего приложения PlayCanvas. Когда браузер загружает файл index.html, он запускает ваше приложение PlayCanvas и выполняет весь клиентский код, который вы написали.

Issue Tracker

Новые функции

Добавлен новый компонент "Tutorial Thumbnail"
Улучшена производительность редактора Entity
Добавлен новый тип Asset: Material Asset

Исправления ошибок

Исправлены проблемы с отображением в Material Inspector
Исправлены ошибки в Shader Editor
Улучшена стабильность работы Node Inspector

Изменения

Обновлен интерфейс Texture Inspector
Улучшена навигация в Graph Inspector
Оптимизирован процесс импорта Assets в Graph Editor

Удалено

Удалена поддержка устаревших форматов файлов