使用 CDN 和 heroku 进行通用反应渲染

Posted 2023-02-22

【中文标题】使用 CDN 和 heroku 进行通用反应渲染

【英文标题】：Universal react rendering with a CDN and heroku

【发布时间】：2016-11-07 16:13:14

【问题描述】：

尝试设置一个服务器端（通用、同构）渲染的 React 应用程序，该应用程序通过 CircleCI 部署，使用 Heroku 作为 node/express 应用程序，Cloudfront 作为 CDN。

我在概念化这将如何工作时遇到了一些麻烦。除了一些部分之外，流程似乎非常简单。一旦我们将构建的资产部署到像 CloudFront 这样的 CDN，我们如何将它们连接到我们在 Heroku 上的 index.html 文件？ （此索引文件已构建并从 Heroku 节点应用程序提供，作为服务器端渲染的基础）。但我希望它包含指向 CDN 资产的链接，而不是 Heroku 构建的资产。 （CircleCi 运行 webpack，Heroku 部署后也运行）

以前有人遇到过这种情况吗？

【问题讨论】：

这是我用于通用反应应用程序的样板。它部署到 heroku 并且可以使用云前端。它没有使用 index.html 文件，而是部署到 heroku 并且服务器为Html.jsx 组件提供服务。 github.com/MadeInHaus/react-flux-gulp-starter

如果关心如何处理文件、保持版本同步和处理部署，也许我的delivr 模块和相关的 build-* 模块会帮助你。它以可预测的生产就绪方式将您的代码放在 S3 上，然后您可以将 CloudFront 设置为简单的缓存代理。

你发现了吗？你在用 webpack 吗？

【参考方案1】：

您可以使用https://github.com/kossnocorp/assets-webpack-plugin 之类的东西来创建一个 .json 文件，其中包含您构建和散列的 webpack 文件的目录/名称。然后，您可以使用此 .json 文件来确定您的标签在服务器端生成的 html 中的外观。

使用 webpack 构建您的客户端捆绑包，并使用您的散列文件的名称生成一个 .json 文件 构建您的服务器端捆绑包。它读取上面的 .json 文件并将正确的文件名注入到你的 html 中的脚本值中 部署到heroku/上传到cdn