如何在 Heroku 中部署 React + Express 应用程序？答案

【问题标题】：How to Deploy React + Express Application in Heroku?如何在 Heroku 中部署 React + Express 应用程序？
【发布时间】：2020-03-10 17:08:54
【问题描述】：

我有这样的文件夹结构：

客户端 // 它持有反应应用程序
节点模块
App.js // 这是服务器代码所在的位置。
Package.json
包-lock.json

我需要将它部署到heroku。在 react 应用程序的文件之一中。我有： 它是唯一与后端通信的文件。

axios.post('http://localhost:5000/api/form' , data)
.then(()=>{
    console.log('message sent')
}).catch(err=>{
    console.log('failed');
})

现在在 app.js（后端文件）中，我有：

const express = require('express') ;
const bodyParser = require('body-parser');
const nodemailer = require('nodemailer') ;
const cors = require('cors');
const port = process.env.PORT || 5000 ;

const app = express();
app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended : false}));

app.post('/api/form' , (req , res)=>{
    //something
})

app.listen(port , ()=>{
    //something
})

那么，我应该更改或添加哪些内容以将其部署到 heroku。

【问题讨论】：

标签： reactjs express heroku deployment mern

【解决方案1】：

好的，你需要做几件事：

假设，您在 heroku 上的应用名为 myapp，其结果为 https://myapp.herokuapp.com 作为根 url

首先将您的 axios 调用修改为如下内容：

    axios.post('http://myapp.herokuapp/api/form' , data)
    .then(()=>{
        console.log('message sent')
    }).catch(err=>{
        console.log('failed');
    })

并修改您的 package.json 的脚本以反映这一点：

 "build":"cd client and npm run build"

还提到引擎：

"engines": {
"node": "10.x"}

【讨论】：