如何在 React 中创建要通过 SSI 包含的 SPA

Question

我们的任务是为另一个小组创建微服务前端。我们想在 React 中创建它，而我们为其构建它的团队希望通过 SSI 将其包含在他们更大的页面中。我已经设置了自己的 Nginx 服务器并创建了一个测试页面来包含我的基本 React 应用程序，这可以包含页面的内容。但是，对于 bundle.js、0.chunk.js 之类的内容，反应页面的内容指向相对 URL； main.chunk.js;我在 Nginx 中为此设置了规则，以将这些规则也用于原点，但这不太理想，我仍然在其他资源上收到 404 反应试图拉入。

解决这个问题的最佳方法是什么？ React 有没有办法将其所有资源捆绑到一个文件中？还是我们正在尝试做的事情不可行？

这是我用来包含我的 React 应用程序的 nginx 文件片段：

location /test.html {
    ssi on;
    proxy_set_header Accept-Encoding ""; 
    proxy_pass http://local.react.com:3000/;        
}

我添加了更多这些以从 React 应用程序引入 JS，该 JS 将 React 插入到页面中。

我包含它的页面只包含：

<!--#include virtual="test.html" -->

Answer 1

您可能需要更改一些配置选项。检查 create-react-app documentation about PUBLIC_URL setting or webpack documentation about output.publicPath 设置。

如何在 React 中创建要通过 SSI 包含的 SPA

How to create a SPA in React to be included through a SSI

javascript

ssi

reactjs