如何将 React 应用程序部署到 Heroku

Question

我已经使用 React 和 Node.js 构建了一个单页天气应用程序，但似乎无法将其部署到 Heroku。到目前为止，我有：

1. 在 Heroku 上创建了一个名为 Weather-app-react-node 的新应用程序
2. 在 CLI 上登录 Heroku
3. 在我的终端中运行命令“heroku git:remote -a Weather-app-react-node”
4. 添加了一个带有“web: npm start”的 Procfile
5. Ran 'git add .', 'git commit -m "Pushed to heroku"', 'git Push heroku master'

我的终端告诉我它已部署并正在等待，但是当我单击链接时，我收到以下错误消息：

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

我尝试用谷歌搜索，但似乎找不到与我的情况相关的任何内容。谁知道怎么修它？

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 和 Node 版本。就我而言，我的 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.在根目录中，创建一个Procfile包含一行文本的文件：web: node server.js。

4.在根目录中，使用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文件（根目录中）中删除（或注释掉） 。

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。