NodeJS/ExpressJS/HandlebarsJS 全栈项目的目录结构

Question

我知道由于答案的主观性，此类问题对于 SO 来说是边缘性的，但是 NodeJS/ExpressJS/HandlebarsJS 全栈项目的目录结构是否有任何标准或最佳实践？

我有几个这样的项目，在每个项目中我仍然在努力寻找最好的方法：

• 你用client/和分开吗server/？
• 您是否有两个node_modules/目录和两个各自的目录package.json，一个用于客户端，另一个用于服务器？
• 如果拆分的话，服务器用来动态生成html代码给客户端的templates/和放在哪里呢？views/

Answer 1

据我所知，您需要对 monorepo 结构进行解释。

关于问题：

#1

你用client/和来分割吗server/？

如果在您的全栈项目/server中提供 HTML 和其他静态内容/client，则以不同的方式进行操作更有意义。例如这样：

将/src文件夹视为/server文件夹，并将/public其视为/client.

#2

您是否有两个node_modules/目录和两个各自的目录 package.json，一个用于客户端，另一个用于服务器？

我们正在 monorepo 中工作，所有模块都是嵌套的。由于我们的项目结构，前端无论如何都不是免费的，所以不需要单独的node_modulesand package.json.

#3

如果拆分的话，服务器用来生成html代码给客户端的templates/和放在哪里呢？views/

我们没有将他们分开。所以所有的工人都去/src。只有静态部分进入/public.

问题是什么？发生了什么事？

- Monorepo：例如，我们有一个非常繁忙的社交媒体应用程序。用户每天上传数百万张照片。为了无缝地实现这一点，我们需要扩展我们的服务器。我们选择水平扩展作为解决方案。但问题是什么？问题：我们只想扩展照片服务/上传部分，但由于我们的结构，我们必须以额外的费用扩展所有内容。假设没有新成员加入我们的应用程序，所以这部分很舒服，但我们无缘无故地扩大了规模。

- Node/Express 提供静态文件：只是一个坏主意。您不应该使用应用程序服务器（尤其是 Express）来提供静态内容，例如 html、css、js 和其他库。为他们提供服务的最佳方式是通过内容分发网络 (CDN)。或者，从您的 Web 服务器（nginx 或 apache）提供服务。

- 不必要的混乱：正如你所看到的，一切都非常复杂，并且模块是相互关联的。测试、分享、与团队合作都非常困难。如果我们以后要在架构上做一个小小的改变，可能需要付出很大的努力。

怎样才能更好呢？

首先你必须将前端和后端完全分离。您可以将 Express 用作 API 服务器。您可以使用 React、VueJs、Angular 等框架作为前端。没关系，它也可以是纯 JS/CSS/HTML。您可以使用 Nginx 或 Apache 等服务器来为它们提供服务。

尝试使您的项目适应微服务架构。微服务架构既可以降低复杂性，又可以在未来的结构变化中为您提供便利。而且很容易测试。在这条路上，Docker可以成为你非常好的朋友。

如果你仍然想留在 monorepo 架构中，你可以继续使用我在关于问题部分提到的方式，没有问题，此外，阅读这篇博客很有用。

额外的

所以/public你只放静态内容？如果与客户相关，为什么views/还要去呢？/src

想想我们的 monorepo 方法分为三个部分：

1. 静止的
2. 静态与动态的混合
3. 动态的。

1.静态：例如，当我们说它example.com/css/style.css应该直接为我们提供CSS文件（与我们本地的相同）时。或者，当我们右键单击网站上的任何照片并在新选项卡中打开图像时，它应该将您重定向到类似的地址example.com/img/the_image.jpeg。一切都准备好了，只需要上菜了。这就是我们这里所说的“静态”。并且只有那些去/public.

2.静态和动态的混合：我们的代码获取数据，填充必要的位置，并向用户呈现填充了数据的页面。而这一切都发生在/views文件夹中。可以看到，这里有一个编译过程，结果一开始还没有准备好。所以不能称之为“静态”。

如果前端和后端是分开的。我们的前端 JavaScript 代码将对后端服务器进行 fetch 调用，它将获取必要的数据并自行填充。所有这一切都将发生在独立于服务器的浏览器上。（这是纯客户端渲染的示例。看看SSR 与 CSR）

（这项工作有很多选择和不同的方法（使用 ejs、pug、handlebars 或 React、Vue、Angular），如果我们更进一步，这将是一个基于意见的答案。或者它已经是一个基于意见的答案，它将会更多）

3.动态：我们常规的后端代码。