Хостинг статики для игр

Игры VK Games — это веб-приложения. Для работы им нужны разные файлы: изображения, HTML-страницы, скрипты. Эти файлы называются статическими ресурсами или просто статикой. Они загружаются прямо на устройство пользователя без обработки на сервере.

Чтобы пользователи могли получать эти файлы, их нужно разместить на хостинге. VK предлагает свой хостинг для таких файлов. Вы также можете выбрать любой хостинг, который поддерживает протокол HTTPS.

О хостинге VK

  • •

    Хостинг предназначен только для хранения и раздачи файлов, а не для выполнения серверного кода.

  • •

    Для размещения файлов используется CDN-инфраструктура VK. Это ускоряет загрузку и повышает её надёжность для пользователей из разных регионов.

  • •

    Размещение файлов на хостинге бесплатно, но есть ограничения по объёму переданных данных и количеству обновлений в сутки.

  • •

    Для загрузки файлов на хостинг используется библиотека vk-miniapps-deploy. Решение подходит для игр, которые собираются с помощью npm или Yarn.

  • •

    При переходе на хостинг VK может потребоваться изменить архитектуру игры, если сейчас используется один сервер для серверной части и статики. Если статика и серверная логика уже разделены, переход будет проще.

Ограничения

  • •

    Загружать файлы на хостинг VK можно не более 24 раз в сутки. Ограничение действует для игры и не зависит от количества администраторов.

  • •

    При повторной загрузке файлов предыдущие версии сохраняются. Для каждой игры хостинг хранит до 10 production-версий и до 100 staging-версий.

  • •

    Максимальный размер ZIP-архива для загрузки — 300 Мбайт.

  • •

    Размещать аудио- и видеофайлы на хостинге нельзя.

Как выложить файлы игры на хостинг

Чтобы размещать файлы на хостинге VK, используйте библиотеку vk-miniapps-deploy.

Шаг 1. Установите библиотеку

  1. 1.

    Запустите командную строку и перейдите в папку с файлами игры.

    Командная строка
    cd <путь-к-папке-игры>
  2. 2.

    Установите библиотеку:

    Командная строка
    npm install @vkontakte/vk-miniapps-deploy --include=dev

Шаг 2. Подготовьте файлы игры

2.1. Подготовьте файловую структуру

В папке с файлами игры создайте новую папку и переместите в неё все файлы, которые должны загружаться на устройства пользователей. В этом примере используется папка с именем build. Если вы используете систему сборки, например webpack, такая папка создаётся автоматически.

Пример файловой структуры
. └── game ├── build │ ├── image1.png │ ├── image2.png │ ├── index.html │ ├── script.js │ └── style.css ├── src ├── ... ├── package-lock.json ├── package.json ├── README.md └── vk-hosting-config.json

2.2. Используйте события VK Bridge для хранения данных

При использовании хостинга VK URL игры изменяется после каждой загрузки файлов на хостинг. Мы расскажем об этом ниже. Если для хранения данных вы используете cookies или localStorage, сохранённые значения станут недоступны после смены URL.

В качестве решения мы рекомендуем использовать события VKWebAppStorageSet, VKWebAppStorageGet и VKWebAppStorageGetKeys библиотеки VK Bridge. Значения, сохранённые таким образом, будут привязаны к идентификатору пользователя, а не к браузеру или устройству. Хранятся они бессрочно, и вам не нужно будет писать дополнительный код в серверной части игры, чтобы хранить небольшие порции данных между сессиями.

Шаг 3. Подготовьте конфигурационные файлы

  1. 1.

    В папке с игрой откройте или создайте файл vk-hosting-config.json и добавьте в него JSON-код по примеру ниже:

    JSON
    { "static_path": "build", "app_id": 123456, "endpoints": { "mobile": "index_DG.html", "web": "index.html", "mvk": "index.html" } }

    Подробное описание параметров конфигурационного файла — в разделе Файл vk-hosting-config.json.

  2. 2.

    Добавьте в файл package.json скрипты deploy и predeploy:

    package.json
    "scripts": { ... "build": "...", "predeploy": "npm run build", "deploy": "vk-miniapps-deploy" }

    В этом примере предполагается, что в вашем проекте есть скрипт build. Скрипт predeploy будет запускать этот скрипт перед загрузкой файлов на хостинг.

  3. 3.

    Также добавьте в файл package.json параметр "homepage": ".".

    package.json
    "scripts": { ... }, "homepage": "."

Шаг 4. Загрузите файлы на хостинг

  1. 1.

    Выполните команду для размещения файлов на хостинге:

    Командная строка
    npm run deploy
  2. 2.

    После запуска библиотека запросит разрешение на добавление файлов на хостинг.

    Запрос на размещение файлов на хостинге VKЗапрос на размещение файлов на хостинге VK

    Нажмите y или Enter.

  3. 3.

    Далее скрипт последовательно запросит разрешения на автоматическое изменение URL в настройках размещения игры. Это позволит вам не менять настройки вручную. Примите предложения:

    • •
      Would you like to update prod urls? — обновить адрес игры.
    • •
      Would you like to update dev urls? – обновить адрес игры в режиме разработки.
    • •
      Would you like to update test group url? – обновить адрес игры для тестовой группы. Если у вас ещё нет тестовых групп, изменений не произойдёт.
    • •
      Enter test group name – если на предыдущем шаге вы выбрали обновить адрес для тестовой группы, укажите её название. Вы также можете не указывать название — в этом случае адрес тестовой группы не поменяется.

    При каждом запуске команды для размещения файлов на хостинге, например после внесения изменений, необходимо подтверждать изменение URL. Это связано с тем, что при обновлении файлов хеш в URL приложения изменяется. Мы рекомендуем разрешить библиотеке vk-miniapps-deploy автоматически обновлять URL.

  4. 4.

    Если вы выкладываете файлы на хостинг впервые, библиотеке необходимо получить специальный ключ доступа для выполнения этой задачи. В командной строке появится ссылка следующего вида:

    URL для получения ключа доступаURL для получения ключа доступа

  5. 5.

    Скопируйте полученный URL и откройте его в браузере. На экране появится сообщение, что VK Mini Apps Hosting получил доступ к вашему аккаунту.

  6. 6.

    Вернитесь в командную строку и нажмите y или Enter, чтобы подтвердить успешную авторизацию. После этого появится сообщение о получении ключа.

    • •

      Библиотека сохранит ключ на вашем компьютере и не будет запрашивать его при следующих выкладках.

    • •

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

Завершение процедуры

  1. 1.

    Библиотека упакует содержимое папки build в ZIP-архив, загрузит его на хостинг и распакует там. Архив будет сохранён в папке, где находится файл vk-hosting-config.json.

  2. 2.

    После завершения загрузки в командной строке появятся URL для запуска игры. Эти ссылки ведут на размещённые на хостинге файлы.

    • •

      Если вы разрешили библиотеке vk-miniapps-deploy изменять настройки игры, URL автоматически обновятся в настройках размещения игры в блоках Мобильное приложение, Web и Мобильная версия сайта. Подробнее — в разделе Размещение.

    • •

      Если разрешение не было выдано, скопируйте URL в настройки вручную.

  3. 3.

    Чтобы проверить работу игры ВКонтакте, откройте ссылку https://vk.com/app<id-игры>.

    Чтобы проверить работу игры в Одноклассниках, подключите её к этой площадке и запустите по ссылке https://ok.ru/game/vk_app<id-игры> Подробнее — в разделе Публикация в Одноклассниках.

Возможные ошибки

Error: 5: User authorization failed: invalid session

Если вы выполнили команду npm run deploy и видите ошибку аутентификации, обновите ключ доступа библиотеки. Для этого удалите следующий файл c ключом с жёсткого диска:

  • •

    На Windows: C:\Users\.config\configstore\@vkontakte\vk-miniapps-deploy.json

  • •

    На macOS и Linux: ~/.config/configstore/@vkontakte/vk-miniapps-deploy.json

Выполните шаги для добавления файлов на хостинг — ключ будет сформирован снова.

Error: 15: Access denied

Проверьте, что в файле vk-hosting-config.json в поле app_id указан корректный идентификатор вашей игры.

Не могу найти ключ доступа

  1. 1.
    Выполните команду, описанную в разделе Error: 5: User authorization failed: invalid session.
  2. 2.
    Получите ключ доступа, выполнив пункт 6 в разделе Шаг 4. Загрузите файлы на хостинг.

Материалы по теме