reactjs 如何使AWS Amplify访问我的React应用程序的公共目录

xmd2e60i  于 2023-01-30  发布在  React
关注(0)|答案(1)|浏览(148)

我在AWS Amplify上部署了我的React应用程序。问题是它不能访问公共文件夹中的源代码(例如,图像,模型)。我听说我可以在AWS Amplify上添加重写和重定向规则,但我不知道如何制定规则。
这是我的文件夹布局:

AWS Amplify中的规则:

我该怎么定规矩?有人能帮我吗?

ggazkfy8

ggazkfy81#

对不起,这是一个"猎枪"的答案排序,但我怀疑其中之一应该推动你前进。
这个问题可能与你的构建工具有关,而不是Amplify。在我的vite spa中,我把favicon.svg和logo.svg放在我的/src目录中。在我的public目录中,唯一的东西是一个在电子邮件html中引用的图像--为此,我似乎硬编码了一个完全限定的路径。
我有一个旧的CRA SPA,我看到这样的事情:

<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

您可能需要通过manifest.json公开文件

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

重写/重定向可能不是图片不起作用的原因,但如果你在主页上导航时一切看起来都正常,但如果你重新加载或深度链接就坏了--这就是重写规则会有所帮助的地方。
文档位于this page上。从文档中:
单页Web应用程序重定向(SPA)
大多数SPA框架支持HTML5历史记录。pushState()在不触发服务器请求的情况下更改浏览器位置。这适用于从根目录开始的用户(或/index.html),但对于直接导航到任何其他页的用户则失败。下面的示例使用正则表达式为index.html中的所有文件设置200重写,除了正则表达式中指定的特定文件扩展名。
来源地址:

</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json)$)([^.]+$)/>

目标地址:

/index.html

类型:

200 (Rewrite)

相关问题