React, Spring - 从 spring 后端提供两个 react 应用程序答案

【问题标题】：React, Spring - serving two react applications from the spring backendReact, Spring - 从 spring 后端提供两个 react 应用程序
【发布时间】：2020-05-24 10:18:21
【问题描述】：

我一直在开发一个应用程序，并意识到某些用户只会使用 react 应用程序的一部分，而其他用户只会使用应用程序的另一部分。为简化起见，假设它是一个图书订购应用程序，书店的所有者只会看到应用程序的Library Management 部分，而客户只会看到应用程序的Book Ordering 部分。这两个 UI 永远不会相互交互，所以在我看来，我不应该向客户发送整个 js 包，因为客户不需要使应用程序的 Library Management 部分工作的 javascript。我查看了代码拆分，但我想尝试创建两个 React 应用程序，一个提供给书店老板，一个提供给书店客户，因为我似乎可以更好地控制捆绑包的大小。

TLDR 问题： ：在 index.html 文件中，插入了一个指向 link=/static/someJsBundle.js 的 <script> 标记。我如何将其更改为指向以下内容：<script link=my-folder/static/someJsBundle.js。

问题的长版：

现在，我仍然将整个 React 应用程序作为一个索引 html 文件提供服务，这就是我处理它的方式：

我构建了 react 应用程序，并将构建文件夹（其中包含 index.html 和 js 包）移动到我的后端模块的 /target/classes/public 文件夹，我的所有后端类都在其中。
我将后端配置为使用解析器并提供index.html 文件：

// configuration for resource handler

 registry.addResourceHandler("/url-for-ui-pages/**")
                .resourceChain(false)
                .addResolver(resolverThatReturnsTheIndexHtmlFile);

 registry.addResourceHandler("/js/**").addResourceLocations("classpath:/public");
 registry.addResourceHandler("/css/**").addResourceLocations("classpath:/public");

public class ResolverThatReturnsTheIndexHtmlFile implements ResourceResolver {

    private Resource index = new ClassPathResource("/public/index.html");

    @Override
    public Resource resolveResource(
            HttpServletRequest request,
            String requestPath,
            List<? extends Resource> locations,
            ResourceResolverChain chain) {

        return index;
    }

这一切都很完美，我的 index.html 得到了服务，它获取了它需要的所有包。

但是，现在转向提供 2 个 React 应用程序，我的设置更改如下：

我现在构建了两个 React 应用程序，并将它们的一个构建文件夹放在 /target/classes/public/book-store-ordering 中，另一个放在 /target/classes/public/book-store-management 中。
我更新了我的资源处理程序以使用两个解析器，一个用于每个反应应用程序

// configuration for resource handler

 registry.addResourceHandler("/url-for-book-store-management-pages/**")
                .resourceChain(false)
                .addResolver(resolverThatReturnsTheIndexHtmlFileForManagement);

 registry.addResourceHandler("/url-for-book-store-ordering-pages/**")
                .resourceChain(false)
                .addResolver(resolverThatReturnsTheIndexHtmlFileForOrdering);

 registry.addResourceHandler("/js/**").addResourceLocations("classpath:/public");
 registry.addResourceHandler("/css/**").addResourceLocations("classpath:/public");

我修改了解析器，为管理应用提供服务：

public class ResolverThatReturnsTheIndexHtmlFileForManagement implements ResourceResolver {

    private Resource index = new ClassPathResource("/public/book-store-management/index.html");

    @Override
    public Resource resolveResource(
            HttpServletRequest request,
            String requestPath,
            List<? extends Resource> locations,
            ResourceResolverChain chain) {

        return index;
    }

我创建了一个新的解析器来为其他应用提供服务：

public class ResolverThatReturnsTheIndexHtmlFileForOrdering implements ResourceResolver {

    private Resource index = new ClassPathResource("/public/book-store-ordering/index.html");

    @Override
    public Resource resolveResource(
            HttpServletRequest request,
            String requestPath,
            List<? extends Resource> locations,
            ResourceResolverChain chain) {

        return index;
    }

现在，根据我输入的 url，我得到正确的 index.html，但是它需要的静态文件，它会在 /static/someJsBundle.js 上查找它们。我可以在插入到 index.html 文件中的 <script link=/static/someJsBundle.js 标记中看到这一点。

显然，这是一个问题，因为我需要我的一个应用程序在/book-store-management/static/someJsBundle.js 和另一个在/book-store-ordering/static/someJsBundle.js 的应用程序中查找其静态文件。然后我可以配置我的解析器以根据 url 来提供正确的静态文件。

我该怎么做？如何配置将哪个 url 插入 index.html 文件以查找静态 js 文件？
我也从来没有做过这样的事情，我可能以错误或过于复杂的方式做这件事。有没有更好的方法来做我想做的事？

【问题讨论】：

标签： javascript java reactjs spring webpack

【解决方案1】：

问题已通过添加处理 /static/** 的资源处理程序并添加公共/订单和公共/管理位置来解决。

至于：在 index.html 文件中，插入了一个指向link=/static/someJsBundle.js 的标记。我如何将其更改为指向类似的内容：<script link=my-folder/static/someJsBundle.js。答案是在你的 package.json 中添加一个“主页”。

【讨论】：