node.js - 如何管理 Node-React 应用程序的生产/部署存储库？

Question

不久前，我们曾经使用服务器渲染页面，然后React用于客户端渲染和单页应用程序。它引入了虚拟DOM并改变了我们编写代码的方式。

在编写代码之前，我们需要所有这些 react 库并将它们安装为依赖项。现在我们可以分成许多组件，有许多 css 和 scss 文件，包括图像。但最后我们将构建文件，制作紧凑的 bundle 并从构建文件夹中提供服务。

快速获取路线

app.get('*', (req,res) =>{
    res.sendFile(path.join(__dirname+'/client/build/index.html'));
});

这是我所理解的:

Build 文件夹是 webpack 组合所有文件并创建准备部署的缩小包的地方。该文件基本上是每个浏览器都可以理解的简单 HTML 和 JS 文件。由于所有浏览器都不理解 ES6 等等，我们必须将所有这些文件转换为每个浏览器都能理解的简单语言。

此外，webpack-dev 服务器仅用于开发目的，我们不会将其运行到生产环境中。

1. 虚拟 DOM/真实 DOM 仅用于开发目的吗？或者在构建缩小文件时，这些 react 库是否也进行了转堆？如果以后是这种情况，react 会在客户端浏览器的后台模式下运行吗？我想知道在构建应用程序后，React 如何处理客户端路由。
2. 如何管理 Node-React 应用程序的 github 存储库？您是否保留两个不同的存储库，一个用于前端，另一个用于后端？行业标准是什么？
3. 如果你保留两个存储库，你如何部署前端代码？因为您无法将 webpack-dev-server 运行到生产环境中。您也不能在后端(快速服务器)中指定公共(public)静态(构建文件夹)，因为它们分为两个存储库。这两个存储库的集成是如何进行的(假设我们有两个 AWS EC2 实例，每个实例一个)，或者前端从前端存储库获得服务？？)。你真的可以在生产中使用像 npmserve 这样的东西吗？？

我想做什么？

我想在 AWS 上部署我的 node-react 应用程序。我在 github 上只有一个存储库。我的存储库中有一个文件夹“client”，其中所有 React 代码及其 package.json 文件都位于其中。服务器的所有其他文件都位于根文件夹内(服务器没有自己的文件夹，文件分散在根文件夹内)。因此有两个 package.json 文件，一个位于服务器根文件夹内，一个位于客户端文件夹内。我计划在 docker 容器上运行 my-node 应用程序。

请帮助我了解代码托管和部署的核心概念和标准实践，以保持大规模企业应用程序的形象。

Answer 1

我不会在这里解释你问题中的所有要点，因为 @Arnav Yagnik 和 @PrivateOmega 在解释其中大部分方面都做得非常出色。我绝对建议您在阅读此答案之前正确阅读他们的答案并阅读提供的链接以获取更多信息。

我想解决您有关部署 Node-React 应用程序的问题。在生产中，通常，我们对前端(React)和后端(Node)有不同的部署(或您在问题中提到的“存储库”)。例如，这允许您的后端位于 EC2 实例中，并具有自动扩展功能，以确保它能够处理所有传入的请求。

正如前面的答案以及您的问题中所提到的，webpack 将 React 文件编译并缩小为简单的 HTML 和 JS 文件，大多数浏览器都可以运行这些文件(我不会在这里解释 VirtualDOM，因为它已经在其他答案中已经得到了完美的解释)。然后，您可以获取这些缩小的文件并从 S3 存储桶中提供它们，因为同样，它是一个单页面应用程序(也在其他答案中讨论)，并且业务逻辑已经在缩小的 JS 文件中，它只是简单地发送对您的后端服务器的所有请求。

现在，对于前端，您可以使用 TravisCI 将 build 文件夹(您在问题中提到的文件夹)部署到 EC2 实例并提供服务使用 NGINX 处理文件，或者如果您可以正确配置 CDN 部署，则可以从 S3 存储桶提供文件，以获得最佳性能。

您可以将服务 React 应用程序视为向用户的浏览器发送一段神秘的代码块。现在，您可以部署这个神秘的代码块到公开可用的 S3 存储桶，并从那里提供服务。同样，由于 webpack 和缩小/丑化，没有人能够正确理解您的原始代码是什么，请记住，例如，您仍然可以访问 Chrome 的“源”选项卡中的所有代码。