如何让 AWS Amplify 访问我的 React App 的公共目录

Question

I deployed my React App on AWS Amplify. The problem is it doesn't access the sources in Public folder(eg images, models). I heard I can add rules to Rewrite and Redirect on AWS Amplify, but I have no idea how to make the rule.

This is my folder layout:

The rules in AWS Amplify:

How do I make the rules? Could someone help me out?

Answer 1

Sorry, this is sort of a 'shotgun' answer, but I suspect one of these should move you forward.

This issue may have more to do with your build tools than Amplify. In my vite spa, I put my favicon.svg, logo.svg in my /src directory. The only thing in my public dir is an image referenced in an email html - and for that it seems I hardcoded a fully qualified path.

I have an old CRA SPA, and I see things like this:

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

And you may need to expose files via 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"
}

Rewrites/redirects probably aren't the reason images aren't working. But if everything appears to work as long as you nav from your homepage, but breaks if you reload or deep link - that's where the rewrite rules will help.

The doc is on this page . From the doc:

Redirects for single page web apps (SPA)

Most SPA frameworks support HTML5 history.pushState() to change browser location without triggering a server request. This works for users who begin their journey from the root (or /index.html), but fails for users who navigate directly to any other page. Using regular expressions, the following example sets up a 200 rewrite for all files to index.html, except for the specific file extensions specified in the regular expression.

Source address:

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

Target address:

/index.html

Type:

200 (Rewrite)