Question

这是我第一次研究带有Node Backend的React Frontend。我现在有一个小问题，我花了很多时间锁定解决方案，但没有成功。

我已经开发了一个联系表单，其中react.js和antd作为前端的设计和输入验证组件。对于后端部分，我使用节点express，cors和axios来执行Web请求。作为包管理器，我使用yarn。

此联系表位于公共GitHub存储库中：https://github.com/philippbck/react-nodemailer

在下面可以找到我的package.json，其中包含所有已使用的依赖项：

 {
  "name": "react-nodemailer",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "antd": "^3.19.1",
    "axios": "^0.19.0",
    "body-parser": "^1.19.0",
    "cors": "^2.8.5",
    "espress": "^0.0.0",
    "nodemailer": "^6.2.1",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

此联系表在我的计算机上完全可以在本地运行，但是现在我想使用CentOS7和Apache Webserver将其部署到我的生产云服务器中。但是我的问题是如何？以我的理解，我使用yarn run build为react前端部分创建了一个生产版本，并将来自build文件夹的所有文件放在服务器上的htdocs文件夹中。对于位于项目根目录中的后端文件app.js，我在服务器上创建了一个名为/apps的根文件夹。然后，我使用服务器上的节点应用程序手动启动了节点服务。

当我使用联系表单打开网站并单击“提交”按钮时，发生以下错误：

xhr.js:166 OPTIONS http://localhost:5000/send net::ERR_CONNECTION_REFUSED

我的问题是我如何在生产服务器上部署联系表单以使其正常运行？在这种情况下，我不想使用无服务器解决方案。非常感谢你！

更新：

将axios POST网址从“ localhost”更改为我的生产网址“ philipp-buck.de”后，现在出现以下错误：

OPTIONS https://philipp-buck.de:5000/send net::ERR_CONNECTION_TIMED_OUT

Answer 1

Contactform.js的后端URL硬编码为。 localhot：5000 [https://github.com/philippbck/react-nodemailer/blob/master/src/contactform.js#L45]

您的生产前端需要指向生产后端。

Answer 2

您应该在pm2上进行生产部署

您是在后端启用cors还是在前端使用代理？

Answer 3

您应该回复您的html

   // in the beginning of app
    app.use(express.static('public'));

   // ...your code

    // serves frontend application
    app.get('/*', (req, res) => {
        res.sendFile(path.resolve('public/index.html'), { root: __dirname }, err => {
            if (err) {
                res.status(500).send(err);
            }
        });
    });

如何在生产服务器上部署React Frontend + Node Backend？

3 个答案: