【问题标题】:How to merge React App and Express App to deploy on single project?如何合并 React App 和 Express App 以部署在单个项目上?
【发布时间】:2019-09-29 09:33:09
【问题描述】:

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

【问题讨论】:

    标签: reactjs mongodb express mern


    【解决方案1】:

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

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

    示例,例如一个样板文件 project 演示了所有这些。
    如果你执行命令:

    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 后端。

    【讨论】:

      猜你喜欢
      • 2019-01-21
      • 2023-03-02
      • 2019-08-21
      • 2020-08-17
      • 2020-09-02
      • 2020-08-18
      • 2022-08-15
      • 2012-02-11
      • 2013-03-11
      相关资源
      最近更新 更多