Node.js 如何管理Node React应用程序生产/部署的存储库？_Node.js_Reactjs_Amazon Web Services_Docker_Continuous Deployment

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

node.js reactjs amazon-web-services docker

Node.js 如何管理Node React应用程序生产/部署的存储库？,node.js,reactjs,amazon-web-services,docker,continuous-deployment,Node.js,Reactjs,Amazon Web Services,Docker,Continuous Deployment,不久前，我们使用服务器渲染页面，然后使用客户端渲染和单页面应用程序。它引入了虚拟DOM，并改变了我们编写代码的方式我们需要所有这些react库，并在编写代码之前将它们作为依赖项安装。现在我们可以分成许多组件，有许多css和scss文件，包括图像。但在最后，我们将构建文件，制作压缩包，并从构建文件夹提供服务快速到达路线 app.get('*', (req,res) =>{ res.sendFile(path.join(__dirname+'/client/build/index.

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

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

快速到达路线

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

以下是我的理解：

Build文件夹是webpack合并所有文件并创建可供部署的小型捆绑包的地方。该文件基本上是每个浏览器都能理解的简单HTML和JS文件。由于所有浏览器都不理解ES6及更多内容，我们必须将所有这些文件转换为每个浏览器都能理解的简单语言

另外，WebpackDevServer仅用于开发目的，我们不会在生产中运行它

虚拟DOM/真实DOM是否仅用于开发目的？或在构建缩小的文件时，这些库是否也进行了转换？如果以后是这样，react是否在客户端浏览器的后台模式下运行？我想知道react在构建应用程序后如何处理客户端路由

如何管理Node React应用程序的github存储库？您是否保留了两个不同的存储库，一个用于前端，另一个用于后端？行业标准是什么

如果保留两个存储库，如何部署前端代码？因为您无法在生产环境中运行webpack dev服务器。也不能在后端（express server）中指定公共静态（生成文件夹），因为它们在两个repo中分开。如何实现这两个存储库的集成（假设我们有两个AWS EC2实例，每个实例一个）或前端从前端repo获得服务？？）。你真的能在生产中使用npm服务吗？？

我想做什么

我想在AWS上部署我的node react应用程序。我在github上只有一个存储库。我在repo中有一个文件夹“client”，其中包含所有react代码及其package.json文件。服务器的所有其他文件都在根文件夹中（服务器没有自己的文件夹，文件分散在根文件夹中）。所以有两个package.json文件，一个在服务器的根文件夹中，一个在客户端文件夹中

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

我想用不同的方法解决这个问题

服务器呈现的页面：概念没有改变，服务器遇到文档请求时，必须用html响应。现在HTML可能包含也可能不包含脚本（可以是内联的，也可以是外部服务器地址）。在问题的上下文中，您仍然可以发送HTML，它将下载您编写的脚本（可能包括react或not）。在大多数情况下，您可以发送带有脚本标签的空html，这些标签将通过网络下载脚本并执行它们，这些脚本将包含所有呈现逻辑

回答您的问题：第一：在单线程JS中没有背景模式（除非我们想讨论worker，但我们可以将其排除在讨论之外）。通过编写代码，您不会与任何DOM交互。您正在指示组件（通过React扩展）何时更改其状态以及何时重新渲染（设置状态）。React在内部计算虚拟DOM并与真实DOM进行比较，以计算对真实DOM所做的实际更改（这是一个非常抽象的答案，为了获得更多理解，请阅读React文档，这里的基线是您没有与任何DOM交互，只是指示React核心库何时更新以及更新状态如何）

第二：如果你想支持SSR（服务器呈现页面）。我建议制作两个文件夹，client（这将包括所有客户端组件和逻辑）和server（将包括所有服务器端逻辑）使用不同的包。json，因为这两个应用程序的包都不同。这里没有这样的行业标准，漂浮在船上的东西应该可以工作，但通常基于逻辑实体创建目录应该满足分离和可维护性，如果将来您认为您希望在单独的repo中分叉服务器和客户机，这肯定会使过程变得容易

第三：您避免在生产环境中运行webpack dev服务器。文件通常不会被混淆，因此负载很重（不要忘记您编写的代码就在那里）。即使您想要进行不同的回购，服务器也可以吐出html，html可以向您的客户机服务器请求脚本

如何部署：部署代码并运行：

节点服务器/app.js

在app.js中，您可以编写您提到的位置块

附言：如果你只需要一个带位置块的服务器。您真的需要express服务器吗？您可以将客户端构建上传到CDN，并将您的域路由到CDN中的service index.html（这里也可以使用s3 bucket）

我想从尽可能清除术语开始

正如您所说，在过去是一个更突出的标准，但随着React的引入，它一点也没有改变，因为即使React也支持，这意味着HTML页面在服务器端生成，然后使用浏览器提供给客户端

也就是说，一个HTML页面被加载到浏览器中，然后javascript代码在这些HTML页面上呈现内容并使它们具有交互性

其概念是，我们只有一个HTML文件或基础HTML页面，基于用户交互和来自服务器的数据，它会被连续重写

ReactDOM.render(
  <HelloMessage name="Taylor" />,
  document.getElementById('demo')
);

<html>

<head>
    <title>Our Website</title>
    <style></style>
    <script src="/link/to/any/JS/script"></script>
</head>

<body>
    <h1>Hello World </h1>
</body>

</html>

<html>

<head>
    <title>Our Website</title>
    <style></style>
    <script src="/link/to/any/JS/script"></script>
</head>

<body>
    <h1>Hello World </h1>
    <div id="root"> </div>
    <script async type=”text/javascript” src="/link/to/our/transpiled/ReactSPA.js"></script>
    <!--async attribute is important to ensure that the script has access to the DOM whenever it loads. This also makes the script non-blocking -->
</body>

</html>