Использование ngrok для туннелирования к локальному клиенту, проксируемому на локальный сервер

После нескольких месяцев использования Facebook’s Create React App в нескольких проектах, я думаю, что это так же круто, как и я ленив.

Я начал использовать его для создания простых интерфейсных прототипов всего, что вышло из моего мозга, снабженного распределителем лотерейных шаров с питанием от ADD.

Когда я познакомился с тем, как использовать его во внешнем интерфейсе, я захотел узнать, как подключить его к серверу. К счастью, в Интернете уже были решения этой проблемы (статья из Fullstack React, блог Дэйва Седдиа, блог Брайана Гилбрейта и т. Д.).

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

Я решил создать приложение для отображения текущей и прогнозируемой погоды для нескольких городов - подождите - одновременно. И поскольку в конечном итоге мне нужно было придумать субдомен для этой штуки (потому что я никогда не могу вспомнить случайные субдомены, которые Heroku генерирует во время развертывания), я остановился на MultiWeather.

Теперь, когда у меня было представление о том, какую (составленную) проблему я хотел решить, и что я бы назвал своим решением, мне нужно было выяснить, как она будет выглядеть и / или как она будет действовать.

Несмотря на то, что дизайн не был моим умением, я предполагал, что у каждого города будет своя собственная карта, и все карты будут жить в адаптивной сетке. И это казалось хорошей возможностью использовать CSS Grid Layout просто потому, что мне не нужно было беспокоиться о поддержке браузера в стороннем проекте.

Построив базовый макет карты, я решил использовать для своих данных Открытую карту погоды. Я создал учетную запись и сгенерировал ключ API. Однако я совершил ошибку новичка и попытался вызвать API прямо из клиентского кода.

Я забыл о CORS, поэтому переместил вызов API Open Weather Map в файл сервера. Однако это все еще не работало. Поскольку мой сервер разработки Webpack работал на порту 3000, а мой сервер Express API работал на порту 5000, я все еще нарушал CORS. В статье Fullstack React есть отличная диаграмма этого в разделе под названием Загвоздка.

Решение заключалось в том, чтобы проксировать запрос с сервера разработки Webpack на сервер Express API. К счастью, это заняло всего одну строчку кода в client/package.json.

{
  ...
  ”proxy”: “http://localhost:5000"
}

После настройки клиента для правильного проксирования запроса на сервер вызов API начал работать.

Теперь, когда у меня было приложение, работающее локально, я хотел посмотреть, как оно выглядит на моем реальном телефоне, а не в Режиме устройства Chrome.

Несколько лет назад я узнал об инструменте под названием ngrok из сообщения в блоге Twilio. Согласно веб-сайту, ngrok создает защищенный общедоступный URL-адрес локального веб-сервера на вашем компьютере.

Я попытался использовать ту же команду (ngrok http 3000), которую использовал в предыдущих проектах.

Однако на этот раз это не сработало. И я понятия не имел, почему. Итак, я сделал то, что обычно делаю, когда понятия не имею, почему мой код не работает; Google.

Я набрал неверный заголовок хоста ngrok в Google, и первым результатом был вопрос о переполнении стека. Я открыл ссылку, просмотрел вопрос и пролистал до ответа. А потом я почувствовал волну облегчения, когда ответ был кратким и получил разумное количество голосов.

ngrok http --host-header=rewrite 3000

Я ввел это в iTerm2, а затем перешел к URL-адресу, созданному ngrok.

Хотя я огорчен тем, что мне потребовалось столько же времени, чтобы улавливать запросы туннелей / прокси, я предпочитаю выучить на собственном опыте, чем не учиться вообще.

Не стесняйтесь оставлять комментарии (пожалуйста, не будьте придурками), подписывайтесь на меня в Twitter и / или Instagram.