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

Posted 2023-03-07

【中文标题】如何将 React 应用程序部署到 Heroku

【英文标题】：How to deploy React application to Heroku

【发布时间】：2020-05-08 01:56:43

【问题描述】：

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

在 Heroku 上创建了一个名为 weather-app-react-node 的新应用 在 CLI 上登录 Heroku 在我的终端中运行命令“heroku git:remote -a weather-app-react-node” 添加了一个带有“web: npm start”的 Procfile 运行 '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 站点：https://weather-app-react-node.herokuapp.com/github：https://github.com/caseycling/weather-app

【参考方案1】：

您可以尝试直接登录 heroku 并直接从那里部署您的 github 存储库所需的分支。

【讨论】：

这可能与您对 openweathermap 的 api 调用有关。您能否再次检查请求 URL 的格式是否正确以及有效的身份验证密钥？

所以我发现我的问题之一是我没有构建服务器。我添加了一个 server.js 文件并使用 express 构建了一个服务器，但现在它给了我基本的应用程序错误消息

应用程序错误消息通常是由您的应用程序代码库引起的。我建议通过this link。

在浏览了你的 github 存储库之后，你似乎不需要快速服务器。 Heroku 提供使用 make create-react-app 零配置部署 react 项目。查看this link

【参考方案2】：

为了将 React 应用部署到 Heroku，我执行了以下步骤...

1. 在您的终端中，输入npm -v 和node -v 以获取您的npm 和节点版本。就我而言，我的 npm 版本是 6.14.1 而我的节点版本是 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。

【参考方案3】：

我使用了 create-react-app-buildpack

npm install -g create-react-app
create-react-app my-app
cd my-app
git init
heroku create -b https://github.com/mars/create-react-app-buildpack.git
or
heroku create -b mars/create-react-app
git add .
git commit -m "I am the newborn app"
git push heroku master
heroku open

注意：在我的例子中，来自 CLI 的 buildpack 配置不起作用，我仍然有 nodejs-build pack，所以我在 Heroku 项目仪表板中手动将 build pack 更改为 mars/create-react-app

【参考方案4】：

使用 node js 后端将 React 应用程序推送到 Heroku 的最佳做法是使用 Heroku 后期构建脚本，后期构建将处理所有后台工作

按照以下步骤操作

将下面的 sn-p 添加到脚本下的 package.json 中

    scripts
    "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix reactFolderName && npm run build --prefix reactFolderName"

并将这个 sn-p 添加到您的 index.js 文件中

    app = express()
    app.use(express.static('reactFolderName/build'));
    app.get('*', (req, res) => res.sendFile(path.resolve(__dirname, 'reactFolderName', 'build', 'index.html')));