Как я могу использовать ngrok для внутреннего и внешнего интерфейса * одновременно *?

Question

У меня есть приложение реагирования, которое я хотел бы протестировать на мобильных устройствах, но инструментов разработчика для мобильных устройств в Chrome или Firefox недостаточно.

Бэкэнд работает на localhost:5000 и интерфейс на localhost:3000.

Если я запускаю оба ngrok http 3000 и ngrok http 5000 и использую ссылку, указанную ngrok http 3000, я могу получить доступ к своему веб-интерфейсу, но (по понятным причинам) он может общаться с моим бэкэндом, так как ищет localhost: 5000 сервер относительно моего телефона, а не по ссылке, указанной ngrok http 5000.

Мой вопрос:

1. Каков наилучший способ настройки моего приложенияи ngrok, чтобы я мог одновременно протестировать мое приложение на моем компьютере и на телефоне?

2. Есть ли лучший способ сделать это без использования ngrok ввсе?

Спасибо

Answer 1

Во-первых, вы можете настроить прокси для бэкэнда с вашего сервера разработки. Это позволит вашему веб-интерфейсу получать доступ к бэкенду через относительные URL-адреса (например, /api вместо localhost:5000/api) из любого места. Чтобы сделать это, вы должны добавить "proxy": "http://localhost:5000" к вашему package.json, а затем убедиться, что ваши внутренние запросы не совпадают с тем, что есть в вашем интерфейсе, предпочтительно с использованием префикса. Подробнее здесь .

Поскольку вы тестируете приложение только из локальной сети, вам не нужен ngrok, поскольку вы можете получить доступ к своей машине для разработки с телефона через локальный IP-адрес. Чтобы выяснить это, запустите ifconfig или ipconfig и введите возвращенный локальный IP-адрес (обычно что-то вроде 192.168.XX) в своем телефоне вместо домена, предоставленного ngrok.

Answer 2

Создайте свой веб-интерфейс, в котором вы выполнили настройку с сервера API, замените его на URL-адрес Ngrok, где работает ваш бэкэнд, а затем Ngrok - ваш веб-интерфейс, а затем вы сможете получить доступ к своему веб-интерфейсу из любого места