logo标签列表

如何在不同端口上构建具有多个功能区域的React应用程序？

node.jsreactjscreate-react-app
4
我们正在构建的Web应用程序必须有三个不同的“区域”，可以通过三个不同的端口访问，例如：
  • localhost:9001 - 供管理员使用
  • localhost:9002 - 供客户使用
  • localhost:9003 - 供非注册用户使用
后端是基于Hapi/Node构建的，并公开了许多API端点供UI使用。现在必须在React中构建前端 - 这三个区域应该共享常见的UI元素，但由于它们位于不同的端口上，每个区域可能具有独特的UI功能。
在这种情况下，您将如何构造应用程序的前端代码（React）？
到目前为止，我会使用create-react-app并构建一个实际上只有1个端口的应用程序 - 并使用身份验证/授权来限制某些功能。现在，由于有三个不同的功能区域，是否应该有3个单独的create-react-app，一个用于每个区域，都在同一个根项目中？共享的UI元素是否在单独的“Shared”模块中，然后3个不同的应用程序从中导入组件？
非常感谢有关如何构造适用于（至少）3个不同端口/区域的React应用程序的所有建议。
每个UI有何不同？ - Code-Apprentice
就大部分而言 - 按钮、布局、网格表格、颜色 - 用户界面完全相同。此时唯一的区别是某些独特的功能和相关的独特组件 - 例如，管理区域将具有一个“仪表板”屏幕，其中包含其独特的小部件。其他区域也是如此。 - Stoyan Berov
这些应用程序为什么需要在不同的端口上运行？似乎更容易设计一个权限方案，让应用程序根据当前用户被授予的权限呈现不同的UI组件并提供不同的功能。 - Code-Apprentice
3个回答
3

关于以一种可以监听的方式构建应用程序结构：

  • localhost:9001 - 管理员
  • localhost:9002 - 客户
  • localhost:9003 - 非注册用户

这是可行的，并且Node.js和React.js完全支持这样的结构。但是，我首先会写出我的可能顾虑作为预注，然后再给出问题的解决方案：

预注：

在问题中提到的情况可能不适合每个人，而只适合某些特殊情况（当你知道为什么和你要做什么时）。在生产环境中，您只会监听端口80（用于HTTP）或443（用于HTTPS）以供访问者、成员和管理员使用。其余的事情将由您的应用程序自行处理。

在后端中，您可以将流量负载均衡到多台计算机（IP），每台计算机运行相同的应用程序包和版本。因此，没有理由对一个URL使用多个端口。
（让我们在这里总结一下，否则它会变得越来越广泛。）

问题的解决方案：

现在，如果您希望将应用程序结构化为3个不同的端口（每个端口对应一个单独的角色或用户类型），这可能有助于您为每个port设置其他访问权限，则您需要使您的Node.js server.js文件监听多个端口。如下所述，这也是可能的：运行多个端口的node.js http服务器

或者您可以有不同的server1.js、server2.js、server3.js分别监听不同的端口。然后，您将抛出或呈现相关的react.js应用程序bundle文件。您需要为每个部分（共3个）开发单独的react.js应用程序。这样，您就可以轻松地扩展和管理每个部分，而不会从每个部分（Web、成员、管理员）混合过多的复杂性。

当然，您将拥有一个node_modules/，该模块将被您的Node.js应用程序使用。并且您可以从一个package.json运行所有3个服务器文件。

2
如果您坚持在不同端口上运行每个部分，一种解决方案是为它们构建3个单独的应用程序以在不同端口上运行。如果每个接口的功能有任何相似之处，则不应重复代码。相反，应在package.json文件中配置构建，以便更轻松地重用每个应用程序共享的组件和其他代码。
或者，您可以设计一个权限方案，该方案根据当前用户授予的权限确定可用的UI组件和菜单项。例如，所有组件都可以具有isAdmin属性。当此属性设置为true时，该属性呈现仅对管理员可用的组件。否则，它会正常呈现。总体而言，我认为这比三个单独的应用程序更容易实现和维护。
任何参考或更多详细信息和示例都有助于理解。仅有理论并不容易理解。 - Nah
@MuhammadHannan 我已经编辑了几次我的问题。最近的版本是否更接近你建议的内容？ - Code-Apprentice
1
@MuhammadHannan 客户要求在3个不同的端口上运行3个不同的“区域”。除了其他问题外，他们希望以不同的方式处理不同的端口 - 例如，只有在特定办公室和/或特定网络中才能访问管理端口；客户端口应通过WiFi访问，但不能通过移动网络访问等。虽然我同意只使用一个端口也可以实现所需的结果，但最终这是客户的要求。 - Stoyan Berov
@MuhammadHannan，听起来你对这里必要的细节有更好的了解。你应该写下你自己的答案。 - Code-Apprentice
0

我知道现在回答可能对你的问题来说有点晚了。

但是，如果你真的想更深入地探索你的问题，你可以查看Lerna工具。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接