javascript - 如何为 React 生产重定向端口

Question

我正在尝试在同一个 Ubuntu 服务器上设置 Express.js 和 React.js 应用程序。这是一个运行 Plesk Onyx 的 VPS，我们有很多虚拟主机在端口 80 上运行。

为了连续运行它们，我安装并运行了 forever ，然后这些应用在端口 3000 和 5000 上启动(例如)。

我执行了命令:

forever start -c "node src/server" ./ -l ./express.log
forever start -c "npm start" ./ -l ./react.log

两个日志文件都没有保存任何内容，但这不是重点。两者都像在前面的命令行中一样运行，但在那些端口中。

如何为这个唯一的应用至少将 React 端口重定向到 80？通常使用 PHP 应该可以工作 .htaccess 但我不确定是否适用于 Nodejs。

编辑:通过 Express 从 React 应用程序发送的表单代码(在使用 npm run build 构建之前与 React.js 配合得很好:

React 组件:

sendEmail(evt) {
    evt.preventDefault();
    (async () => {
        let response = await fetch(
            `${window.location.origin}/contacto`,
            options
        );
        let data = await response.json();

        if (!data.success) {
            this.setState(
                Object.assign(this.state, {
                    error: true,
                    texto: { error: <p>{data.message}</p> },
                    alert: {
                        visible: true,
                        tipo: "alert-danger"
                    }
                })
            );
        } else {
            this.setState(
                Object.assign(this.state, {
                    error: false,
                    texto: { error: <p>{data.message}</p> },
                    alert: {
                        visible: true,
                        tipo: "alert-success"
                    }
                })
            );
            document.getElementById("formulario-contacto").reset();
        }
    })();
}

express 的东西:

// Static site init
server.use("/", express.static("build"));

server.post("/contacto", (req, res) => {
  try {
    server.mailer.send(
      "email",
      {
        to: process.env.EMAIL_FROM,
        subject: `Contacto ${req.body.asunto}`,
        body: req.body
      },
      err => {
        if (err) {
          res.send({ success: false, message: err });
        } else {
          res.send({ success: true, message: "Mensaje enviado" });
        }
      }
    );
  } catch (err) {
    res.send({ success: false, message: err });
  }
});   

Answer 1

看来您可能想改变您的处理方式。您应该考虑将您的 React 应用程序构建为静态输出，然后与您的 Express.js 应用程序/服务器一起提供服务。

假设您正在使用 create-react-app，您可以运行“build”命令来创建静态文件。然后设置您的 Express.js 应用程序为其提供服务。参见 here有关服务静态文件的详细信息和 here为你的 React 应用构建静态文件。

或者你也可以使用 webpack或 parcel如果您没有使用 creat-react-app 来构建您的 React 应用程序。

要在端口 80 上获取 express，您可以将端口变量设置为 80 或直接在 app.listen() 函数中设置它 app.listen(80)