如何将 React 应用程序和 Nodejs 后端部署在子域的同一目录中？答案

【问题标题】：How to deploy React app and Nodejs backend on the same directory in the subdomain?如何将 React 应用程序和 Nodejs 后端部署在子域的同一目录中？
【发布时间】：2020-02-06 13:14:41
【问题描述】：

我有一个 React 应用程序，我使用 Node js 制作了后端，同时也是来自 MongoDB 的服务器。它是一个 MERN 堆栈。我有一个像这样的目录结构：

-client  // this is where react app, in build version is in client/build
-middleware
-models
-routes
package.json
server.js
...

我想在我的 Filezilla 中像这样部署它：

-test.Server22c
      -backend // this is where all nodejs files
      -static    //these folder and other files are my build files in react app client/build
      -index.html
      ...

我怎样才能安排在同一个文件夹中一起工作？我在我的 react redux 中更改了我的 Axios 帖子链接中的端点，但它不起作用

【问题讨论】：

您有两个选项可以为同一域/子域上的 2 台服务器提供服务。第一个太使用不同的端口，例如，您可以在 http 默认端口 80 上为您的 react 应用程序提供服务，而您的 node.js 服务器在一个随机的空闲端口（如 3000 或 8080）上提供服务。第二个是太 使用反向代理服务器，该服务器根据根 URL 将请求重定向到一个或另一个服务器，例如 mydomain.com/react（重定向到反应应用程序）和 mydomain.com/node（重定向到 node.js）。
有这方面的例子吗？并且在同一目录（不同文件夹）中会有一个后端（node.js）一个前端（react）

标签： node.js reactjs deployment web-deployment filezilla

【解决方案1】：

最好的选择是使用 2 个不同的端口，一个用于您的 react 应用程序，一个用于您的 node.js 服务器。

假设我们将使用：

React App (http://example.com) 的 HTTP 默认端口 80
为您的 Node.js 服务器自定义端口 8080 (http://example.com:8080)

反应

要部署 React，您只需使用 serve，您可以在 https://create-react-app.dev/docs/deployment/ 找到所需的一切。

你基本上需要在你的 react 目录中执行这些命令。

npm install -g serve
serve -s build -l 80

确保您的机器上没有运行任何 apache 服务器，否则端口 80 将被占用。

Node.js

您只需要在端口 8080 上运行您的服务器，我真的不知道您使用的是哪个框架，所以假设您使用的是 express，它在您的入口点 index.js 中看起来像这样。

app.listen(8080, function() {
    console.log("Server is running on port 8080...");
});

【讨论】：

谢谢，我做到了 React 部分没问题，但问题是，如何部署 Nodejs 后端并使其运行？现在我的后端不起作用，我无法访问 db
@OnerT。要运行 Node.js，您只需执行 node index.js。但这将在您关闭终端后立即结束，以保持 Node.js 服务器运行，请查看 forever。 npmjs.com/package/forever