node.js - 如何将 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. 运行'git add .'，'git commit -m“推送到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-站点: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，我的 Node 版本是 12.13.0。

2. 在 package.json 中，在 "private" 属性下添加 "main": "server.js", 和 "engines": { "npm": "6.14.1", "node": "12.13.0"},。在您的 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 目录。接下来，从 .gitignore 文件(在根目录中)中删除(或注释掉)/build。

6. 通过在终端中输入 node server.js (或 nodemon server.js)来测试 server.js 是否正常工作。如果有效，server.js 应该为 React 应用程序提供服务。

7. 将步骤 1-6 中的所有内容提交到 GitHub 和 Heroku 存储库。要提交到 Heroku 存储库，请在终端中输入 heroku git:remote -a Weather-app-react-node，然后输入 git push heroku master。