React/webpack - 如何在一台服务器上托管 React 应用程序并在另一台服务器上托管 images/fonts？

Question

出于商业原因，我必须在一个域上托管我的 React 应用程序并从另一个域（即 S3）提供 images/fonts。不确定如何配置应用程序来执行此操作？

例如，我想将我的 React 应用托管在： http://kamilski.com/#/

然后从以下位置提供我的静态资产（图像和字体）： http://camel.assets.s3.com/***

我不知道如何配置我的 create-react-app 或 Webpack 来执行此操作。我知道 PUBLIC_URL 可用，但这仍然迫使我运行同一台服务器上的 React 应用程序和资产。

Answer 1

这还不错 - 我对我的几个应用程序做了类似的事情。首先，使用 S3 存储桶将您想要的资产放到 S3 上。

这里有一个很好的 youtube 视频（这是关于从你的 React 应用程序上传的，但 AWS 设置在某些方面是相似的）：https://www.youtube.com/watch?v=cDj4LPTLR3o

因此，一旦您设置了 aws 存储桶，您可能会有一个名为 "site_images" 的存储桶。届时，您可以像处理任何其他图像一样从 S3 获取这些图像：

https://camel.assets.s3.amazonaws.com/images/SOME-IMAGE-ON-AWS

您将通过您的 css 文件以类似的方式加载字体，最有可能的是：

@fontface {
  font-family: 'My Awesome Font';
  src: url('https://camel.assets.s3.amazonaws.com/fonts/SOME-FONT-ON-AWS')
}

具体如何操作取决于您的配置。您需要为 CORS 调整我们的 aws 存储桶，这可能有点麻烦。这些链接应该可以帮助您朝着正确的方向前进！

Amazon S3 CORS (Cross-Origin Resource Sharing) and Firefox cross-domain font loading

Answer 2

您是否尝试使用 webpack-s3-plugin

等插件

您可以为您需要的所有资产定义规则。

当然你必须退出 CRA 或使用某种 react-app-rewired 或 rescripts。

React/webpack - How can I host react app on one server and images/fonts on another server?