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

VK Tunnel

VK Tunnel — это утилита, которая позволит отобразить в интернете веб-сервер, работающий на вашем локальном компьютере.

Очень часто в веб-разработке требуется показать своё приложение другим пользователям. Если во время разработки вы пользуетесь локальным сервером, то показать промежуточные результаты на нём — нетривиальная задача. Ещё сложнее становится, когда вам нужно проверить взаимодействие приложения с внешними инструментами, например с VK Bridge, внутри мобильных приложений ВКонтакте.

После запуска VK Tunnel вы можете отслеживать в терминале информацию о состоянии и показателях соединений, установленных через ваш туннель.

NPM: vk-tunnel.

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

Вы можете настроить работу через VK Tunnel для любого сервера. Ниже мы приведём пример запуска при создании VK Mini Apps из шаблона. В иных случаях внимательно изучите используемые параметры и их значения.

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

  1. 1.

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

    Shellnpm install @vkontakte/vk-tunnel -g
  2. 2.

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

  3. 3.

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

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

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

    Shellnpm start
  5. 5.

    Откройте новую командную строку. Вызовите VK Tunnel:

    • •

      Через переменные окружения:

      Shellcross-env NODE_TLS_REJECT_UNAUTHORIZED=0 PROXY_HTTP_PROTO=https PROXY_WS_PROTO=wss PROXY_HOST=0.0.0.0 PROXY_PORT=10888 vk-tunnel
    • •

      Через параметры:

      Shellvk-tunnel --insecure=1 --http-protocol=https --ws-protocol=wss --host=0.0.0.0 --port=10888
  6. 6.

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

    Shell"tunnel": "vk-tunnel --insecure=1 --http-protocol=https --ws-protocol=wss --host=0.0.0.0 --port=10888 app_id=8174360 endpoints=[web]"

    И вызовите VK Tunnel:

    Shellnpm run tunnel
  7. 7.

    В командной строке будет предложено перейти по адресу в формате https://oauth.vk.com/code_auth?stage=check&code=2a2aaaa для авторизации. Откройте ссылку в браузере, вернитесь в терминал и нажмите Enter.

    После успешной авторизации в командной строке появится ссылка вида https://user12345-jv7zlzzz.wormhole.vk-apps.com.

    Укажите её в поле URL в Настройках для дальнейшей работы. Если приложение ещё не создано, воспользуйтесь разделом Регистрация мини-приложения ВКонтакте.

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

  1. 1.

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

    Shellnpm install @vkontakte/vk-tunnel -g
  2. 2.

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

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

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

    Shellnpm i react-scripts
  4. 4.

    Создайте папку public и переместите в неё файл index.html.

  5. 5.

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

    Обратите внимание! Каталог src должен иметь файл index.js.

    Структура каталога проекта мини-приложения:

    . └── mini-app ├── public └── index.html ├── src ├── cactus.png ├── dinosaur.png ├── index.js └── style.css ├── package-lock.json ├── package.json └── README.md
  6. 6.

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

    Shellenv PORT=10888 HTTPS=true react-scripts start
  7. 7.

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

    Shell"start": "cross-env PORT=10888 HTTPS=true react-scripts start",

    И запустите проект:

    Shellnpm start
  8. 8.

    Откройте новую командную строку. Вызовите VK Tunnel:

    • •

      Через переменные окружения:

      Shellenv NODE_TLS_REJECT_UNAUTHORIZED=0 PROXY_HTTP_PROTO=https PROXY_WS_PROTO=wss PROXY_HOST=0.0.0.0 PROXY_PORT=10888 vk-tunnel
    • •

      Через параметры:

      Shellvk-tunnel --insecure=1 --http-protocol=https --ws-protocol=wss --host=0.0.0.0 --port=10888
  9. 9.

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

    Shell"tunnel": "vk-tunnel --insecure=1 --http-protocol=https --ws-protocol=wss --host=0.0.0.0 --port=10888 app_id=8174360 endpoints=[web]"

    И вызовите VK Tunnel:

    Shellnpm run tunnel
  10. 10.

    В командной строке будет предложено перейти по адресу в формате https://oauth.vk.com/code_auth?stage=check&code=2a2aaaa для авторизации. Откройте ссылку в браузере, вернитесь в терминал и нажмите Enter.

    После успешной авторизации в командной строке появится ссылка вида https://user12345-jv7zlzzz.wormhole.vk-apps.com.

    Укажите её в поле URL в Настройках для дальнейшей работы. Если приложение ещё не создано, воспользуйтесь разделом Регистрация мини-приложения ВКонтакте.

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

Вы можете настроить работу библиотеки при помощи переменных окружения или параметров.

NODE_TLS_REJECT_UNAUTHORIZED

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

  • •
    0 — пропустить проверку;
  • •
    1 — проверить сертификат.

Аналогом переменной окружения является параметр --insecure. Возможные значения:

  • •
    0 — проверить сертификат;
  • •
    1 — пропустить проверку.

PROXY_HTTP_PROTO

Схема для протокола HTTP. Возможные значения:

  • •
    http — нешифрованное соединение (значение по умолчанию);
  • •
    https — шифрованное соединение.

Аналогом переменной окружения является параметр --http-protocol. Возможные значения совпадают.

PROXY_WS_PROTO

Схема для WebSocket-протокола. Возможные значения:

  • •
    ws — нешифрованное соединение (значение по умолчанию);
  • •
    wss — шифрованное соединение.

Аналогом переменной окружения является параметр --ws-protocol. Возможные значения совпадают.

PROXY_HOST

Хост, на котором запущен проект. Значение по умолчанию: localhost.

Аналогом переменной окружения является параметр --host.

PROXY_PORT

Порт, на котором запущен ваш проект. Значение по умолчанию: 10888.

Аналогом переменной окружения является параметр --port.

PROXY_TIMEOUT

Тайм-аут запросов к вашему приложению. Значение по умолчанию: 5000 (5 секунд). Увеличьте тайм-аут, если мини-приложение получает ответ с ошибкой Bad gateway и вы видите в логах сообщение Error: timeout of 5000ms exceeded.

Аналогом переменной окружения является параметр --timeout.

Файл vk-tunnel-config.json

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

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

JSON{ "app_id": "8174360", "endpoints": ["mobile", "mvk", "web"] }

app_id

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

endpoints

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

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

Ошибки

Получаю ошибку Error: Пользователь не является создателем приложения. Что делать?

Если при запуске утилиты вы видите ошибку ERROR: Пользователь не является создателем приложения, обновите токен утилиты:

Shellrm ~/.config/configstore/@vkontakte/vk-tunnel.json

Обратите внимание! Если ошибка сохраняется, убедитесь, что вас добавили в администраторы мини-приложения.

Получаю ошибку Error: connect ECONNREFUSED 127.0.0.1:10888. Что делать?

Убедитесь, что вы запустили проект:

Shellnpm start