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；有关为React应用程序构建静态文件的信息，请参见here。

或者，如果您不使用creat-react-app，也可以使用webpack或parcel来构建您的react应用。

要在端口80上表达，您可以将端口变量设置为80或直接在app.listen（）函数app.listen(80)

中进行设置

Answer 2

我不确定我是否完全理解这个问题，但是由于您使用的是Express，因此您将在index.js中的某个地方进行app.listen(3000)调用。

您可以根据process.env.NODE_ENV的值将其更改为3000或80，该值将设置为“生产”，“开发”或“无”。

Answer 3

假设您正在使用来自Facebook的CRA。您可以在项目的根文件夹中创建一个.env文件。并在其中PORT=80

中指定

如何重定向端口以进行React生产

3 个答案: