时间戳

首页 > 解决方案 > 如何合并 React App 和 Express App 以部署在单个项目上？

reactjs - 如何合并 React App 和 Express App 以部署在单个项目上？

问题描述

我最近创建了 Express 和 MongoDB API，之后，我将该 API 成功连接到我的 React 应用程序并且运行良好。但是现在部署期间发生的一种情况我需要分别部署两个项目意味着我需要两个托管计划。所以，我希望这两个项目在同一主机上运行。可能吗？如何？

标签： reactjsmongodbexpressmern

解决方案

任何 React 应用程序的构建都会创建（除非使用 webpack-dev-server 来编译它）由静态文件组成的输出：脚本包和引用<script>标签中包的 .html 文件。

这些文件可以并且应该在生产构建中复制到 Express。然后，您在一台主机上拥有一台服务器。当 React 应用程序在客户端（例如浏览器）中运行时，它会从单一来源获取所有内容，包括 .html 文件、脚本包、API 响应：Express 后端/服务器。顺便说一句，这排除了许多人在 SO 上询问的 CORS 问题的任何可能性。

示例，例如演示所有这些的样板项目。
如果执行命令：

git clone https://github.com/winwiz1/crisp-react.git
cd crisp-react
yarn install && yarn start:prod

然后将您的浏览器指向localhost:3000，您将在浏览器中运行 React 应用程序，它从一个 Express 后端获取所有内容。

crisp-react有两个子目录：client带有 React 客户端应用程序和server带有 Express 后端。build 命令将构建工件从一个子目录复制到另一个子目录。所以你甚至可以client在构建后重命名或删除子目录，它不会影响 Express 后端。

推荐阅读