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

Posted 2023-03-03

【中文标题】React/webpack - 如何在一台服务器上托管 React 应用程序，在另一台服务器上托管图像/字体？

【英文标题】：React/webpack - How can I host react app on one server and images/fonts on another server?

【发布时间】：2020-08-27 11:32:02

【问题描述】：

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

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

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

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

【问题讨论】：

这里的PUBLIC_URL 是什么？为什么您认为它可能会有所帮助？

create-react-app.dev/docs/advanced-configuration: Create React App 假定您的应用程序托管在服务 Web 服务器的根目录或 package.json（主页）中指定的子路径。通常，Create React App 会忽略主机名。您可以使用此变量强制将资产逐字引用到您提供的 url（包括主机名）。这在使用 CDN 托管您的应用程序时可能特别有用。

【参考方案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 存储桶，这可能有点困难。这些链接应该可以帮助您朝着正确的方向前进！

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

【参考方案2】：

你有没有尝试使用像webpack-s3-plugin这样的插件

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

当然，您将不得不退出 CRA 或使用某种 react-app-rewired 或 rescripts。