reactjs - React/webpack - 如何在一台服务器上托管 React 应用程序并在另一台服务器上托管图像/字体？

Question

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

例如，我想在以下位置托管我的 React 应用程序:
http://kamilski.com/#/

然后从以下位置提供我的静态 Assets (图像和字体):
http://camel.assets.s3.com/ ***

我不知道如何配置我的 create-react-app 或 Webpack 来做到这一点。我知道 PUBLIC_URL 可用，但这仍然迫使我在同一台服务器上运行 React 应用程序和 Assets 。

Answer 1

这还不错 - 我用我的几个应用程序做了类似的事情。
首先，使用 S3 存储桶将您想要的 Assets 放到 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 存储桶，这可能有点麻烦。不过，这些链接应该可以帮助您朝着正确的方向前进!

https://coderwall.com/p/ub8zug/serving-web-fonts-via-aws-s3-and-cloudfront

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