为了将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"
。
![enter image description here](https://istack.dev59.com/8QU2H.webp)
3. 在根目录下创建一个Procfile
文件,并写入一行文本:web: node server.js
。
4. 在根目录下创建server.js
文件,并添加以下代码。
const express = require("express");
const path = require("path");
const app = express();
const port = process.env.PORT || 8080;
app.use(express.static(path.join(__dirname, "build")));
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
。