如何配置我的 React-Node 应用程序以便将其部署到 Heroku？答案

【问题标题】：How do I configure my React-Node App so I can deploy it to Heroku?如何配置我的 React-Node 应用程序以便将其部署到 Heroku？
【发布时间】：2021-04-23 10:20:02
【问题描述】：

所以我使用 create-react-app 构建了一个简单的 MERN 应用程序，我想将它部署到 Heroku。我在 localhost:3000 上运行的客户端文件夹中构建前端，它将请求发送到我的快速服务器作为 localhost:5000 的代理。我的文件结构如下：

+client
   |
   +-node_modules
   +-public
   +-src
     |
     +-components
        +-App.js
        +-index.js
//server
+-models
+-node-modules
+-package-lock.json
+-package.json
+-server.js

我已经在我的package-json 中设置了代理，如下所示： "proxy": "http://localhost:5000",

所以我的主要问题是：如何配置我的 API 端点以进行部署？

目前，它们的结构如下：

来自 react 组件的 API 调用：

  useEffect(() => {
    axios.get("http://localhost:5000/api/all-cafes")
      .then((cafe) => {
        setCafe(cafe.data);
      })
      .catch((err) => {
        console.log(err);
      })
  }, [])

server.js 上的 Express 函数

app.get('/api/all-cafes', (req,res) => {
    Cafe.find()
    .then((result) => {
        res.send(result)
    })
    .catch(err => {
        console.log(err)
    })
})

我的另一个问题是.env 文件的作用是什么，我需要制作一个来解决这个问题吗？

我有一个有用的建议，说我可以在不同的服务器上运行前端和后端，并根据是在开发还是生产中调整代码，使用以下代码：

const prefix = process.env.NODE_ENV === 'production' ? "http://heroku_app_address" : "http://localhost:5000"
function getUrl(relativeUrl) {
   return prefix + "/" + relativeUrl;
}

fetch(getUrl('api/all-reviews'));

但我不确定如何实现这一点，是否需要 .env 文件，如果需要，在所述文件中放入什么。

【问题讨论】：

标签： reactjs express heroku deployment

【解决方案1】：

.env 文件可帮助您指定将根据部署环境更改的某些凭据或端点（dev、qa、prod 可能有不同的 API 端点），或者您想提供某些密钥或配置，否则不应成为您的代码存储库的一部分（clientSecret 等）。

create-react-app.dev/docs对这些有详细的解释。
如果您还没有使用 create-react-app 引导您的应用程序，那么您可以使用 dot-env npm 包。具体步骤在这里：Stack overflow :Adding an .env file to React Project

【讨论】：