Question

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

一个例子，我想在以下位置托管我的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 Bucket的设置，便可能会有一个名为“ 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桶，这可能有点麻烦。这些链接应该可以帮助您朝正确的方向前进！

Answer 2

您尝试使用webpack-s3-plugin之类的插件

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

因此，您必须退出CRA或使用某种react-app-rewired或rescripts。