Как развернуть приложение React в Heroku

Question

Я создал одностраничное приложение погоды с React и Node.js, но, похоже, его не удалось развернуть в Heroku. На данный момент у меня есть:

1. Создано новое приложение в Heroku под названием weather-app-response-node
2. Зарегистрировано в Heroku на CLI
3. Запустите команду 'heroku git: удаленный -a Weather-app-реагирующий-узел' в моем терминале
4. Добавлен Procfile с 'web: npm start' в нем
5. Ran 'git add. ',' git commit -m "Pressed to heroku" ',' git pu sh heroku master '

Мой терминал сообщает мне, что он развернут и ждет, но когда Я нажимаю на ссылку и получаю сообщение об ошибке:

SecurityError: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.

Я пытался найти его в Google, но не могу найти ничего подходящего для моей ситуации. Кто-нибудь знает, как это исправить?

heroku-site: https://weather-app-react-node.herokuapp.com/
github: https://github.com/caseycling/weather-app

Answer 1

Чтобы развернуть приложение React в Heroku, я выполнил следующие шаги ...

1. В своем терминале введите npm -v и node -v, чтобы получить npm и версия узла. В моем случае моя npm версия 6.14.1 и версия моего узла 12.13.0.

2. В package.json, добавьте "main": "server.js", и "engines": { "npm": "6.14.1", "node": "12.13.0" }, в "private" свойство. В свойстве scripts добавьте "heroku-postbuild": "npm install" и установите "start" в "node server.js".

3. В каталоге root создайте Procfile с одной строкой текста: web: node server.js.

4. В каталоге root создайте файл server.js с приведенный ниже код ..

const express = require("express");
// eslint-disable-next-line no-unused-vars
// const bodyParser = require('body-parser');
const path = require("path");
const app = express();
const port = process.env.PORT || 8080;

app.use(express.static(path.join(__dirname, "build")));

// This route serves the React app
app.get('/', (req, res) => res.sendFile(path.resolve(__dirname, "build", "index.html")));

app.listen(port, () => console.log(`Server listening on port ${port}`));

5. Введите npm run build в терминале, чтобы создать каталог build. Затем удалите (или закомментируйте) /build из файла .gitignore (в каталоге root).

6. Проверьте, работает ли server.js, введя node server.js ( или nodemon server.js) в терминале. Если это работает, server.js должно обслуживать приложение React.

7. Зафиксируйте все от шага 1-6 до GitHub и репозитория Heroku. Чтобы зафиксировать репозиторий Heroku, в своем терминале введите heroku git:remote -a weather-app-react-node, а затем введите git push heroku master.

Answer 2

Вы можете попробовать войти в heroku напрямую и развернуть нужную ветку вашего репозитория github оттуда напрямую.