如何将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“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

- Casey Cling

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。

- Genesis

Answer 2

在我设置了上述所有内容之后，我遇到了这个问题。

当我使用像 http://localhost:8080/ 和 http://localhost:8080/button 这样的 URL 时。

Cannot GET /button

在控制台中

Failed to load resource: the server responded with a status 
of 404 (Not Found)
DevTools failed to load source map: Could not load content 
for chrome- 
extension://gighmmpiobklfepjocnamgkkbiglidom/browser- 
polyfill.js.map: System error: net::ERR_FILE_NOT_FOUND

- L O C O

Answer 3

你可以尝试直接登录Heroku并直接从那里部署你的GitHub仓库中所需的分支。

- sudo97

---

可能与您对openweathermap的API调用有关。您能否再次确认请求URL的格式是否正确，并且权限密钥有效？ - sudo97

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

应用程序错误消息通常是由您的应用程序代码库引起的。我建议通过此链接进行检查。 - sudo97

经过查看您的Github存储库，似乎您不需要使用Express服务器。 Heroku提供了对使用“create-react-app”制作的React项目进行部署的支持，无需任何配置。请查看此链接。 - sudo97

Answer 4

将React应用程序与Node.js后端一起推送到Heroku的最佳实践是使用Heroku Post Build脚本，该脚本将在后台处理所有工作。

请按照以下步骤操作：

将以下代码片段添加到您的package.json文件中的scripts字段下：

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

并将此片段添加到您的index.js文件中

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

- SARAN SURYA

Answer 5

我使用了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构建包配置没有起作用，我仍然使用了nodejs-build pack，因此我在Heroku项目仪表板中手动更改了构建包为mars/create-react-app。

- Divek John