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

Question

这是我第一次研究“React Frontend with Node Backend”这个主题。 我现在遇到了一个小问题，我投入了大量时间锁定解决方案，但没有成功。

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

此联系表单位于公共(public) 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 前端部分创建了一个生产构建，并将构建文件夹中的所有文件放入我的服务器上的 htdocs 文件夹中。对于位于项目根目录中的后端文件 app.js，我在服务器上创建了一个名为 /apps 的根文件夹。我使用服务器上的 Node 应用程序手动启动了 Node 服务。

当我打开带有联系表单的网站并单击提交按钮时，出现以下错误:

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

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

更新:

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

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

Answer 1

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

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