Ошибка React-приложения: Не удалось создать 'WebSocket': Нельзя инициировать небезопасное соединение WebSocket со страницы, загруженной через HTTPS

Для обеспечения транспортной безопасности, как вы могли бы запросить страницу с использованием https://, замените ws:// на wss://.

Это указывает на то, что вы хотите установить безопасное соединение WebSocket.

Вот более простое решение. Понизьте версию react-scripts до 3.2.0 в вашем package.json (у меня была версия 3.3.0).

Вам может понадобиться удалить файл package-lock.json и папку node_modules (rm -rf package-lock.json node_modules), затем выполните команду npm i. Зафиксируйте изменения в вашем package.json и package-lock.json в репозитории.

Вам не будет трудно вспомнить, что react-scripts основан на webpack, и, если я не ошибаюсь, использует webpack-dev-server для ускорения разработки. Он применяет веб-сокеты для связи с клиентом, чтобы инициировать горячую перезагрузку при обнаружении изменений в файлах на диске.

Скорее всего, вы просто запускаете приложение в режиме разработки. Если вы собираетесь развернуть его в производственной среде, вам следует выполнить команду npm run build, которая создаст набор JavaScript файлов, которые вы сможете обслуживать с помощью вашего любимого веб-сервера.

Чтобы создать базовую структуру для вашего приложения на Node.js с использованием Express, выполните следующие шаги:

1. Создайте папку в корне вашего проекта для вашего приложения Node.js.
2. В этой папке создайте файл server.js, который будет служить основным серверным файлом вашего приложения.
3. Затем добавьте следующий код в server.js:

const express = require('express')
const path = require('path')
const app = express()

if (process.env.NODE_ENV === 'production') {
  // Обслуживаем статические файлы
  app.use(express.static(path.join(__dirname, 'client/build')))
  
  // Обрабатываем маршруты React, возвращая все запросы в React-приложение
  app.get('*', (request, response) => {
    response.sendFile(path.join(__dirname, 'client/build', 'index.html'))
  })
}

const port = process.env.PORT || 8080
app.listen(port, () => {
  console.log(`API слушает на порту ${port}...`)
})

4. В вашем package.json добавьте следующее в раздел "scripts":

"scripts": {
  "start": "node server.js",
  "heroku-postbuild": "cd client && yarn && yarn run build"
}

5. Также добавьте прокси-маршрут в ваш package.json в папке вашего React-приложения (по пути /folder-name-react-app/package.json):

"proxy": "http://localhost:8080"

Следуя этим шагам, вы сможете настроить серверное приложение, которое будет обслуживать ваши статические файлы для React в production-среде. Не забудьте, что в режиме разработки для запуска приложения может потребоваться дополнительная настройка.

Если вы сталкиваетесь с проблемой развертывания на Heroku, рекомендую понизить версию модуля react-scripts до 3.2.0. Для этого выполните следующие шаги:

1. Удалите файл package-lock.json.
2. Удалите папку node_modules.
3. Измените версию react-scripts на 3.2.0 в вашем package.json.
4. Запустите команду npm install, чтобы установить все модули заново.

Это должно помочь решить вашу проблему с развертыванием.