反应和 Nodejs

Question

我在连接 react 和 express nodejs 时遇到问题。在生产中它们在一起很好，但在开发中它们没有连接。我读过很多文章，但没有一篇对我有用。我正在部署在heroku上。在生产中，如何用 heroku url 替换本地主机端点。

const express = require("express");
const path = require("path");

const app = express();

const publicPath = path.join(__dirname, "", "../build");
app.use(express.static(publicPath));

app.get("*", (req, res) => {
  res.sendFile(path.join(publicPath, "index.html"));
});
const port = process.env.PORT || 3000;

app.listen(port, () => {
  console.log("Server is up on port " + port);
});

对于 package.json/

    "scripts": {
        "start": "node server/server.js",
        "dev": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
      }

Answer 1

假设你的 reactjs 和 node 应用是分开部署的，你可以按照以下步骤操作：

对于后端 dotenv 包非常受欢迎，并且易于设置。

1-) 使用您的环境变量将 .env 文件添加到根文件夹，如下所示：

MONGO_URL=mongodb://localhost:27017/

请注意不能有空格。

2-) 在你的主文件中，在读取任何变量之前尽快导入dotenv。

require("dotenv").config();

3-) 现在您可以像这样访问变量：

const dbUrl = process.env.MONGO_URL;

4-) 把你的 .env 文件放到 .gitignore 文件中

5-) 通过在 package.json 中添加一个 engines 部分来指定 node.js 的版本，该部分将用于在 Heroku 上运行您的应用程序。

例如：

"engines": {
    "node": "10.1"
}

6-) 将节点应用程序部署到 heroku 后，使用heroku docs 中所述的 PROD 值添加变量。

如果您使用 create-react-app 创建了您的 reactjs 应用程序，您可以按照以下步骤操作：

1-) 将 .env 文件添加到根文件夹。您的变量名必须以 REACT_APP_...

开头

REACT_APP_API_URL=http://localhost:3001/api

2-) 在您的代码中像这样访问您的变量：

process.env.REACT_APP_API_URL

3-) 将你的 .env 文件放到 .gitignore 文件中

4-) 将 reactjs 应用部署到 heroku 后，在配置变量部分设置 prod 变量，就像我们为节点应用所做的那样。