时间戳

首页 > 解决方案 > 如何为 React 生产重定向端口

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

问题描述

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

为了连续运行它们，我已经安装并永远运行，然后这些应用程序在端口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 应用程序发送的表单代码（在构建之前与 React.js 一起工作得很好npm run build：

反应组件：

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();
        }
    })();
}

快递的东西：

// 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 });
  }
});

标签： javascriptnode.jslinuxreactjsexpress

解决方案

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

假设您使用的是 create-react-app，您可以运行“build”命令来创建静态文件。然后设置您的 Express.js 应用程序来服务它。有关提供静态文件的详细信息，请参见此处，以及为您的 react 应用程序构建静态文件的详细信息。

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

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

推荐阅读