我在AWS Amplify上部署了我的React应用程序。问题是它不能访问公共文件夹中的源代码(例如,图像,模型)。我听说我可以在AWS Amplify上添加重写和重定向规则,但我不知道如何制定规则。这是我的文件夹布局:
AWS Amplify中的规则:
我该怎么定规矩?有人能帮我吗?
ggazkfy81#
对不起,这是一个"猎枪"的答案排序,但我怀疑其中之一应该推动你前进。这个问题可能与你的构建工具有关,而不是Amplify。在我的vite spa中,我把favicon.svg和logo.svg放在我的/src目录中。在我的public目录中,唯一的东西是一个在电子邮件html中引用的图像--为此,我似乎硬编码了一个完全限定的路径。我有一个旧的CRA SPA,我看到这样的事情:
vite
/src
public
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
您可能需要通过manifest.json公开文件
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)
1条答案
按热度按时间ggazkfy81#
对不起,这是一个"猎枪"的答案排序,但我怀疑其中之一应该推动你前进。
这个问题可能与你的构建工具有关,而不是Amplify。在我的
vite
spa中,我把favicon.svg和logo.svg放在我的/src
目录中。在我的public
目录中,唯一的东西是一个在电子邮件html中引用的图像--为此,我似乎硬编码了一个完全限定的路径。我有一个旧的CRA SPA,我看到这样的事情:
您可能需要通过
manifest.json
公开文件重写/重定向可能不是图片不起作用的原因,但如果你在主页上导航时一切看起来都正常,但如果你重新加载或深度链接就坏了--这就是重写规则会有所帮助的地方。
文档位于this page上。从文档中:
单页Web应用程序重定向(SPA)
大多数SPA框架支持HTML5历史记录。pushState()在不触发服务器请求的情况下更改浏览器位置。这适用于从根目录开始的用户(或/index.html),但对于直接导航到任何其他页的用户则失败。下面的示例使用正则表达式为index.html中的所有文件设置200重写,除了正则表达式中指定的特定文件扩展名。
来源地址:
目标地址:
类型: