如何在不同端口上构建具有多个功能区域的 React App？
How to structure a React App with several functional areas on different ports?
我们正在构建的 Web 应用程序必须有 3 个不同的 "areas" 可在 3 个不同的端口上访问，例如：
- localhost:9001 - 对于管理员
- localhost:9002 - 对于客户
- localhost:9003 - 对于非注册用户
后端建立在 Hapi/Node 之上，并公开了许多 API 端点以供 UI 使用。前端现在必须在 React 中构建——这三个区域应该共享共同的 UI 元素，但是在不同的端口上，每个区域都可能具有独特的 UI 特性。
在这种情况下，您将如何构建应用程序的前端代码 (React)？
直到现在，我会使用 create-react-app 并构建一个实际上只有 1 个端口的应用程序 - 并使用 authentication/authorization 来限制某些功能。现在，有了三个不同的功能区域，是否应该有 3 个独立的 create-react-apps，每个区域一个，位于同一个根项目中？共享的 UI 元素是否位于单独的 "Shared" 模块中，然后 3 个不同的应用程序将从那里导入组件？
非常感谢所有关于如何构建 React 应用程序以与（至少）3 个不同端口/区域一起工作的建议。
如果您坚持 运行 将每个部分连接到不同的端口，一个解决方案是为它们构建 3 个单独的应用程序以 运行 在不同的端口上。如果每个界面的功能有任何相似之处，您应该而不是复制代码。相反，在 package.json 文件中配置构建，以便您可以更轻松地重用每个应用共享的组件和其他代码。
或者，您可以设计一个权限方案，根据授予当前用户的权限确定哪些 UI 组件和菜单项可用。例如，所有组件都可以有一个 isAdmin 属性。当此属性设置为 true 时，该属性呈现仅供管理员使用的组件。否则它会正常呈现。总的来说，我相信这比三个单独的应用程序更容易实施和维护。
关于让您的应用程序结构以一种可听的方式：
- localhost:9001 - 对于管理员
- localhost:9002 - 对于客户
- localhost:9003 - 对于非注册用户
可以实现，Node.js，react.js完全支持这种结构。
但我会先把我可能的顾虑写成 pre-note 然后会建议 solution 问题：
前注：
问题中提到的情况可能并不适合所有情况，但仅适用于某些特殊情况（当您知道为什么以及您想做什么时）。
在生产环境中，您将只监听端口 80（对于 HTTP）或 443（对于 HTTPS) 访问者、会员和管理员 。其余的事情将由您的应用程序自行处理。
在后端，您可以将流量负载平衡到机器 (IP) 的数量，每个 运行ning 相同的应用程序包和版本。因此，似乎没有理由针对一个 URL 使用多个端口。
（到此为止吧，否则会越走越远。）
问题解答：
现在，如果您想在 3 个不同的端口（每个用于不同的角色或用户类型）上构建您的应用程序，这可能会帮助您为每个 port 设置额外的访问权限；那么您将需要 Node.js server.js 文件在多个端口上侦听。如此处所述，这也是可能的：
或者您可以让不同的 server1.js、server2.js、server3.js 分别监听不同的端口。然后，您将抛出或呈现相关的 react.js 应用程序 bundle 文件。您需要为每个部分（总共 3 个）开发单独的 react.js 应用程序。通过这种方式，您可以非常轻松地扩展和管理每个部分，而不会混淆每个部分（网络、会员、管理员）的太多复杂性。
当然，您将有一个 node_modules/ 供您的 NodeJs 应用程序使用。您可以 运行 来自一个 package.json.
的所有 3 个服务器文件
我知道此时对问题的回复可能为时已晚。
但是，如果您真的想对您的问题进行更多探索。您可以查看 Lerna 工具。
我们正在构建的 Web 应用程序必须有 3 个不同的 "areas" 可在 3 个不同的端口上访问，例如：
- localhost:9001 - 对于管理员
- localhost:9002 - 对于客户
- localhost:9003 - 对于非注册用户
后端建立在 Hapi/Node 之上，并公开了许多 API 端点以供 UI 使用。前端现在必须在 React 中构建——这三个区域应该共享共同的 UI 元素，但是在不同的端口上，每个区域都可能具有独特的 UI 特性。
在这种情况下，您将如何构建应用程序的前端代码 (React)？
直到现在，我会使用 create-react-app 并构建一个实际上只有 1 个端口的应用程序 - 并使用 authentication/authorization 来限制某些功能。现在，有了三个不同的功能区域，是否应该有 3 个独立的 create-react-apps，每个区域一个，位于同一个根项目中？共享的 UI 元素是否位于单独的 "Shared" 模块中，然后 3 个不同的应用程序将从那里导入组件？
非常感谢所有关于如何构建 React 应用程序以与（至少）3 个不同端口/区域一起工作的建议。
如果您坚持 运行 将每个部分连接到不同的端口，一个解决方案是为它们构建 3 个单独的应用程序以 运行 在不同的端口上。如果每个界面的功能有任何相似之处，您应该而不是复制代码。相反，在 package.json 文件中配置构建，以便您可以更轻松地重用每个应用共享的组件和其他代码。
或者，您可以设计一个权限方案，根据授予当前用户的权限确定哪些 UI 组件和菜单项可用。例如，所有组件都可以有一个 isAdmin 属性。当此属性设置为 true 时，该属性呈现仅供管理员使用的组件。否则它会正常呈现。总的来说，我相信这比三个单独的应用程序更容易实施和维护。
关于让您的应用程序结构以一种可听的方式：
- localhost:9001 - 对于管理员
- localhost:9002 - 对于客户
- localhost:9003 - 对于非注册用户
可以实现，Node.js，react.js完全支持这种结构。
但我会先把我可能的顾虑写成 pre-note 然后会建议 solution 问题：
前注：
问题中提到的情况可能并不适合所有情况，但仅适用于某些特殊情况（当您知道为什么以及您想做什么时）。
在生产环境中，您将只监听端口 80（对于 HTTP）或 443（对于 HTTPS) 访问者、会员和管理员 。其余的事情将由您的应用程序自行处理。
在后端，您可以将流量负载平衡到机器 (IP) 的数量，每个 运行ning 相同的应用程序包和版本。因此，似乎没有理由针对一个 URL 使用多个端口。
（到此为止吧，否则会越走越远。）
问题解答：
现在，如果您想在 3 个不同的端口（每个用于不同的角色或用户类型）上构建您的应用程序，这可能会帮助您为每个 port 设置额外的访问权限；那么您将需要 Node.js server.js 文件在多个端口上侦听。如此处所述，这也是可能的：
或者您可以让不同的 server1.js、server2.js、server3.js 分别监听不同的端口。然后，您将抛出或呈现相关的 react.js 应用程序 bundle 文件。您需要为每个部分（总共 3 个）开发单独的 react.js 应用程序。通过这种方式，您可以非常轻松地扩展和管理每个部分，而不会混淆每个部分（网络、会员、管理员）的太多复杂性。
当然，您将有一个 node_modules/ 供您的 NodeJs 应用程序使用。您可以 运行 来自一个 package.json.
我知道此时对问题的回复可能为时已晚。
但是，如果您真的想对您的问题进行更多探索。您可以查看 Lerna 工具。