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

Answer 1

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

1。。在您的终端中，输入npm -v和node -v以获取您的npm和节点版本。就我而言，我的npm版本是6.14.1，而我的节点版本是12.13.0。

2。。在package.json的{​​{1}}属性下添加"main": "server.js",和"engines": { "npm": "6.14.1", "node": "12.13.0" },。在您的"private"属性中，添加scripts并将"heroku-postbuild": "npm install"设置为"start"。

3。。在根目录中，创建一行"node server.js"的{​​{1}}。

4。。在根目录中，使用以下代码创建Procfile文件。

web: node server.js

5。。在终端中输入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}`)); 目录。接下来，从npm run build文件（在根目录中）中删除（或注释掉）build。

6。。通过在终端中输入/build（或.gitignore）来测试server.js是否有效。如果可行，node server.js应该为React应用服务。

7。。提交从步骤1-6到GitHub和Heroku存储库的所有内容。要提交到Heroku存储库，请在您的终端中输入nodemon server.js，然后输入server.js。

Answer 2

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

Answer 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项目仪表板中将构建包手动更改为mars/create-react-app

Answer 4

使用Node js后端将React应用程序推送到Heroku的最佳实践是使用Heroku Post Build Script，Post build将负责所有的工作

执行以下步骤

将以下代码片段添加到脚本中的package.json中

    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')));