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

【问题标题】：How to deploy React Frontend + Node Backend on a production server?如何在生产服务器上部署 React Frontend + Node Backend？
【发布时间】：2019-10-26 08:08:38
【问题描述】：

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

我开发了一个联系表单，其中react.js 和antd 作为前端的设计和输入验证组件。对于后端部分，我使用节点express、cors 和axios 来执行网络请求。作为包管理器，我使用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 为反应前端部分创建了一个生产构建，并将构建文件夹中的所有文件放在我服务器上的 htdocs 文件夹中。对于位于我项目根目录中的后端文件app.js，我在我的服务器上创建了一个名为/apps 的根文件夹。我在服务器上使用 node app 手动启动了 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

【问题讨论】：

标签： node.js reactjs frontend backend nodemailer

【解决方案1】：

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

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

【讨论】：

感谢您的帮助！我已将 localhost 更改为我的生产网址“philipp-buck.de”。新的错误消息是xhr.js:166 OPTIONS https://philipp-buck.de:5000/send net::ERR_CONNECTION_TIMED_OUT。

【解决方案2】：

你应该响应你的 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);
            }
        });
    });

【讨论】：

感谢您的回答！但这无济于事。我已经添加了您的代码并更新了 github 存储库。我的后端文件app.js 位于/apps。是否需要解析htdocs文件夹中/apps到index.html的路径？
新的错误信息是xhr.js:166 OPTIONS https://philipp-buck.de:5000/send net::ERR_CONNECTION_TIMED_OUT
我还没有看到 const path = require('path') 尝试使用 localhost 更多尝试 = 更好的结果 :)
我也不知道你为前端构建的文件夹是什么，也许你应该在 dist/build dirs 上更改 public
如果你使用 vps/vds 尝试使用守护进程，就像有人提到的那样 pm2 pm2 start app.js

【解决方案3】：

您应该通过pm2 将其用于生产

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

【讨论】：

我在后端启用了cors。
我的配置有以下标题：<Directory "/opt/bitnami/apache2/htdocs"> Header always set Access-Control-Allow-Origin "https://philipp-buck.de" Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT" Header always set Access-Control-Max-Age "1000" Header always set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin, authorization, accept, client-security-token" </Directory>
如果请求中包含https，则必须安装https另外，必须关闭防火墙或打开端口。
https 和有效的 ssl 证书已安装和配置。我已使用iptables -A INPUT -p tcp --dport 5000 -j ACCEPT 允许防火墙上的端口 5000，但我收到错误消息 OPTIONS https://philipp-buck.de:5000/send net::ERR_CONNECTION_TIMED_OUT 发送联系表格。
我已完全禁用防火墙，但没有帮助。