ДокументацияAPIСообществоСоздать приложение
Войти

Хостинг статики

После того как вы запустили мини-приложение внутри ВКонтакте, получите постоянную ссылку на него.

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

Использование

Деплой на хостинг статики возможен не более 24 раз в сутки.

Проект мини-приложения из шаблона

  1. 1.

    Создайте мини-приложение из шаблона.

  2. 2.

    Перейдите к папке проекта мини-приложения:

    Shellcd <ПУТЬ_К_МИНИ_ПРИЛОЖЕНИЮ>
  3. 3.

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

    Shellnpm install @vkontakte/vk-miniapps-deploy --include=dev
  4. 4.

    Откройте файл vk-hosting-config.json в папке проекта. В поле app_id замените 0 на идентификатор вашего мини-приложения, который вы получили при регистрации. Сохраните изменения.

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

    Разверните мини-приложение:

    Shellnpm run deploy

    Перед деплоем автоматически выполнится команда npm run build, соберётся проект, а в каталоге проекта появится файл build.zip и каталог build.

  6. 6.

    Согласитесь на настройки по умолчанию: введите Y/y или нажмите Enter.

  7. 7.

    В командной строке вы получите ссылку вида: https://oauth.vk.com/code_auth?stage=check&code=1c2d2bd. Откройте её в браузере, чтобы пройти аутентификацию.

  8. 8.

    Вернитесь в терминал и подтвердите действие в командной строке: введите Y/y или нажмите Enter.

  9. 9.

    Подтвердите размещение мини-приложения на хостинге: введите код из личных сообщений от администрации ВКонтакте. Также в push-уведомлении нужно подтвердить автоматическое изменение URL вашего мини-приложения.

    Если мини-приложение не размещается, проверьте, что в поле app_id указан корректный идентификатор вашего мини-приложения.

  10. 10.

    Перейдите по ссылке vk.com/app<id>, чтобы увидеть работу мини-приложения. Мини-приложение будет размещено на хостинге ВКонтакте, а ссылка вида: https://prod-app1-1.pages-ac.vk-apps.com/index.html появится в поле URL раздела Настройки.

Проект мини-приложения на Node.js

  1. 1.

    Перейдите к папке проекта мини-приложения:

    Shellcd <ПУТЬ_К_МИНИ_ПРИЛОЖЕНИЮ>
  2. 2.

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

    Shellnpm install @vkontakte/vk-miniapps-deploy --include=dev
  3. 3.

    Создайте файл vk-hosting-config.json.

  4. 4.

    Создайте папку build и перенесите в неё все статические файлы.

    . └── mini-app ├── build ├── cactus.png ├── dinosaur.png ├── index.html ├── script.js └── style.css ├── src ├── package-lock.json ├── package.json ├── README.md └── vk-hosting-config.json
  5. 5.

    В командной строке проекта задеплойте его:

    Shellvk-miniapps-deploy
  6. 6.

    Или добавьте в файл package.json скрипт deploy, после чего сохраните файл:

    JSON"scripts": { ... "deploy": "vk-miniapps-deploy" }

    И задеплойте проект:

    Shellnpm run deploy

    Перед деплоем автоматически выполнится команда npm run build, соберётся проект, а в каталоге проекта появится файл build.zip и каталог build.

  7. 7.

    Согласитесь на настройки по умолчанию: введите Y/y или нажмите Enter.

  8. 8.

    В командной строке вы получите ссылку вида: https://oauth.vk.com/code_auth?stage=check&code=1c2d2bd. Откройте её в браузере, чтобы пройти аутентификацию.

  9. 9.

    Вернитесь в терминал и подтвердите действие в командной строке: введите Y/y или нажмите Enter.

  10. 10.

    Подтвердите размещение мини-приложения на хостинге: введите код из личных сообщений от администрации ВКонтакте. Также в push-уведомлении нужно подтвердить автоматическое изменение URL вашего мини-приложения.

    Если мини-приложение не размещается, проверьте, что в поле app_id указан корректный идентификатор вашего мини-приложения.

  11. 11.

    Перейдите по ссылке vk.com/app<id>, чтобы увидеть работу мини-приложения. Мини-приложение будет размещено на хостинге ВКонтакте, а ссылка вида: https://prod-app1-1.pages-ac.vk-apps.com/index.html появится в поле URL раздела Настройки.

Файл vk-hosting-config.json

Для настройки библиотеки vk-miniapps-deploy укажите файл vk-hosting-config.json:

Пример файла:

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

static_path

Путь, по которому обращается библиотека за статическими файлами.

app_id

Идентификатор мини-приложения.

endpoints

Объект платформ, для которых нужно автоматически заменить адрес в Настройках. Возможные значения:

  • •
    mobile — мобильное приложение.
  • •
    mvk — мобильная версия сайта.
  • •
    web — десктопная версия сайта.

Для каждой платформы указывается файл, из которого будет собираться мини-приложение для нужной платформы.

nopromt

Информация о том, нужно ли выполнить деплой на Continuous Integration (CI). Имеет единственное значение true.

На что обратить внимание

  • •
    Убедитесь, что в файле package.json значение "homepage":'''"./"'''

CI

Чтобы задеплоить проект, используйте команду:

Shell$ env MINI_APPS_ACCESS_TOKEN=<КЛЮЧ_ДОСТУПА> yarn deploy

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

Примечание. Информация о ключе доступа выведется только после авторизации в библиотеке.

Команда запуска деплоя

Чтобы получить ключ доступа, выполните команду запуска деплоя:

ShellCI_URLS=true npm run deploy

В консоли выведется информация о ключе доступа.

Файл ключа доступа библиотеки

Чтобы вывести содержимое файла ключа доступа, выполните команду:

Shellcat ~/.config/configstore/@vkontakte/vk-miniapps-deploy.json

В консоли выведется информация о ключе доступа.

Переменные окружения

MINI_APPS_ACCESS_TOKEN

Токен можно получить от библиотеки vk-miniapps-deploy. Или используйте сервисный ключ доступа мини-приложения.

MINI_APPS_ENVIRONMENT

Окружение для деплоя. Возможные значения:

  • •
    production — production-окружение. Ссылки на production-окружение имеют префикс prod-.
  • •
    dev — dev-окружение. Ссылки на dev-окружение имеют префикс stage-.

Примечание. При деплое на production-окружение также выполнится деплой на dev-окружение.

CI_URLS

Подготовка URL-адресов production- или dev-окружения. Имеет единственное значение true.

Примечание. Чтобы деплой выполнился корректно, нужно также указать переменную nopromt в файле vk-hosting-config.json.

FAQ

Получаю ошибку Error: 5: User authorization failed: invalid session. Что делать?

Если вы выполнили команду npm run deploy и видите ошибку авторизации, обновите ключ доступа библиотеки:

Shellrm ~/.config/configstore/@vkontakte/vk-miniapps-deploy.json

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

  1. 1.
    Выполните команду, описанную в разделе Получаю ошибку Error: 5: User authorization failed: invalid session. Что делать?.
  2. 2.
    Выполните шаги, описанные в разделе Получение ключа доступа.