将PHP后端与React Application一起使用

Question

我有一个react应用程序，我运行npm run build生成一个生成软件包，然后将其上传到S3。假设www.test.com/build /

但是我有一个PHP后端，应该负责提供index.html（来自www.test.com/index.html）

由于S3存储桶和PHP应用程序之间没有任何联系，我不知道如何处理react应用程序中的哈希名称

没有哈希就无法生成构建包，因为我会丢失缓存破坏器。

与React应用程序和后端应用程序一起使用的一些好的做法是什么。在这种情况下是PHP，但是我认为问题应该与托管在不同服务器上的NodeJS后端相同。

我正在使用AWS CodePipeline构建React应用（npm运行构建）和php应用（composer安装）

Answer 1

1。您可能知道这一点，但是只是在确认是否要在不将索引文件托管在（弹性beranstalk）服务器上的情况下执行此操作，为什么不对索引文件使用<iframe>标签。

2。您可以使用php的$html = file_get_contents('http://stackoverflow.com/questions/ask');方法，该方法使用较少的代码和精力，然后卷曲。

1. curl，您已经知道。

Answer 2

PHP不需要了解带有或不带有哈希的JS文件。您的PHP服务器将仅提供index.html文件。您的index.html文件包含入口点javascript文件。

<script type="text/javascript" src="/js/vendor.bundle.js"></script>
<script type="text/javascript" src="/js/index.js"></script>

当您的PHP服务器提供index.html文件时，它将在客户端的浏览器上使用供应商和索引文件（或您的文件名）通过块加载必要的react和其他js代码。

如果需要使用带有哈希值的vendor.bundle.js和index.js怎么办？

以下模块将为您提供帮助。

模块1：https://www.npmjs.com/package/webpack-manifest-plugin 该模块将帮助您跟踪生成的哈希文件。

模块2：https://www.npmjs.com/package/html-replace-webpack-plugin 使用此模块，您可以将入口点文件替换为从模块1获得的哈希文件名。