Как перенаправить клиент горячей перезагрузки веб-пакета?

Question

У меня есть приложение, созданное с помощью create-реагировать-app и машинопись. Это приложение является клиентом oauth2, и ему нужен действительный redirect_uri с https. Он также использует веб-сокеты. Я мог бы настроить nginx сервер, который принимает соединения https и wss и перенаправляет их на мою машину разработки.

Вот как это должно работать:

веб-браузер -> https и wss request -> nginx -> s sh tunnel (remoteforward) -> машина разработки -> локальный веб-пакет и локальный сервер приложений

Nginx отображает все запросы https на localhost: 3000 и все запросы wss (что-либо в / api) к localhost: 9091. Они отправляются на локальную машину разработки через туннели s sh. Локальный компьютер разработчика запускает веб-пакет на порту 3000 и сервер приложений на порту 9091.

Это позволяет мне разработать действительный веб-клиент oauth2 с действительными сертификатами https и значениями redirect_uri. Эта настройка работала долгое время. Сегодня я обновил все пакеты (включая node js, приложение create-Reaction и веб-пакет), и он перестал работать. Вот журнал трассировки:

SecurityError: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.
./node_modules/react-dev-utils/webpackHotDevClient.js
node_modules/react-dev-utils/webpackHotDevClient.js:60
__webpack_require__
/home/my_user/projects/my_project/frontend/webpack/bootstrap:785

Конечно, проблема в том, что веб-пакет использует веб-сокеты для уведомлений о горячей перезагрузке, а код по умолчанию предполагает, что сервер веб-пакета доступен по адресу ws: // localost. На самом деле, страница была загружена с https. Таким образом, код горячей перезагрузки пытается создать небезопасную веб-сокет для ws: // localhost со страницы, которая была загружена с помощью https.

Поскольку клиент oauth2 ДОЛЖЕН использовать https, очевидным решением будет полное отключение горячей перезагрузки. Но это замедлит развитие. Для эффективной работы мне нужна горячая перезагрузка. Это сработало бы только в том случае, если бы я мог также переслать веб-сокет клиента горячей перезагрузки с nginx на мой локальный сервер веб-пакетов. Другими словами: заставить его работать через wss: // вместо ws: //.

Однако я не знаю, как это сделать. Можно ли вообще перенаправить клиент горячей перезагрузки? Есть ли вариант для этого? Я вижу, что можно отключить горячую перезагрузку. Но я не вижу способа перенаправить URL для веб-сокета.

ОБНОВЛЕНИЕ - это больше не требуется, решено в версии 3.3.1 https://github.com/facebook/create-react-app/pull/8079 Но есть еще пакеты, которые зависят от более старой версии. В этих случаях может использоваться решение, представленное ниже.

Answer 1

Я нашел решение. Это действительно хак, но его можно использовать для тестирования клиентов oauth2 с помощью https, ваших собственных веб-сокетов и собственного веб-сокета socks-узла сервера разработки веб-пакетов одновременно .

1. Установите все необходимые пакеты
2. Отредактируйте ваши node_modules / реагировать на dev-utils / webpackHotDevClient. js file

Замените это:

// Connect to WebpackDevServer via a socket.
var connection = new WebSocket(
  url.format({
    protocol: 'ws',
    hostname: window.location.hostname,
    port: window.location.port,
    // Hardcoded in WebpackDevServer
    pathname: '/sockjs-node',
  })
);

На это:

// Connect to WebpackDevServer via a socket.
var connection = new WebSocket(
  url.format({
    protocol: 'wss',
    hostname: window.location.hostname,
    port: window.location.port,
    // Hardcoded in WebpackDevServer
    pathname: '/sockjs-node',
  })
);

Это заставит nodejs -socket использовать wss вместо ws. Если сокет nodejs также транслируется через ваш веб-сервер на локальный сервер разработки веб-пакетов, то он работает!

Было бы здорово, если бы этот код мог использовать ws / wss в зависимости от протокола окна. место.