AWS Amplify image not loading

[JhumanJ]

Hello 👋

I just deployed a Nuxt app on AWS Amplify, and none of the images are working. The url generated look like https://migrate-to-nuxt.d3dst9bgfdukbw.amplifyapp.com/_amplify/image?url=/img/pages/welcome/product-cover.jpg&w=1536&q=100 which when visited redirects to https://migrate-to-nuxt.d3dst9bgfdukbw.amplifyapp.com/?url=/img/pages/welcome/product-cover.jpg&w=1536&q=100 which shows the website index page. The code for this app is available here (in the client folder).

Potential source of issues?

• The fact that we deploy a nuxt app in a subfolder (client)
• The rewrite rules?

Also, since we have SVG images it would be great if we could add support for it (this issue).

Any help appreciated 🙏

[mauerbac]

Sorry to hear that.

Could you try removing this rule and letting me know?

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

[JhumanJ]

Then I get a 502 error (check here) -probably because of the 404 above

I also tried this one:

[
    {
        "source": "/<*>",
        "target": "/index.html",
        "status": "200",
        "condition": null
    }
]

But it doesn't help either

[Narrator]

Hi @JhumanJ :wave:

Can you please clarify the following the points?:

• Are you deploying a fully static site? i.e. Does your app have any SSR pages?
• Did you initially create the app only using Vue as a dependency and later migrated to using nuxt?

[JhumanJ]

Hey!

• No, it's using SSR
• Yes exactly, we're in the process of migrating, but we re-created a nuxt app from scratch and moved over our existing code

[Narrator]

Thanks for the additional information!

I was able to pull your function logs and here's what I see:

[nuxt] [request error] [unhandled] [500] ENOENT: no such file or directory, open '/static/index.html'

It seems like your SSR function trying to serve the index.html from the static folder in the build output. All files in the static folder are served from our static storage primitive and the SSR functions will not directly have access to these resources during runtime.

I'm inspecting your build artifacts to investigate further!

[JhumanJ]

Awesome thank you!

[JhumanJ]

I just did some more testing, you're right the SSR functions doens't appear to be running (user isn't pre-fetched on server side when logged in). I'll keep digging

[JhumanJ]

I just built with the amplify preset locally and obtained these files. I'm not sure if the error about the static folder happened when I messed up with the re-write rules or of it's always like this.

The generated deploy manifest looks like this:

{
  "version": 1,
  "routes": [
    {
      "path": "/_nuxt/builds/meta/*",
      "target": {
        "kind": "Static",
        "cacheControl": "public, max-age=31536000, immutable"
      }
    },
    {
      "path": "/_nuxt/builds/*",
      "target": {
        "kind": "Static",
        "cacheControl": "public, max-age=1, immutable"
      }
    },
    {
      "path": "/_nuxt/*",
      "target": {
        "kind": "Static",
        "cacheControl": "public, max-age=31536000, immutable"
      }
    },
    {
      "path": "/*.*",
      "target": {
        "kind": "Static"
      },
      "fallback": {
        "kind": "Compute",
        "src": "default"
      }
    },
    {
      "path": "/*",
      "target": {
        "kind": "Compute",
        "src": "default"
      }
    }
  ],
  "computeResources": [
    {
      "name": "default",
      "entrypoint": "server.js",
      "runtime": "nodejs18.x"
    }
  ],
  "framework": {
    "name": "nuxt",
    "version": "3.9.0"
  }
}

Edit: We can see that this manifest has the path "path": "/*.*",, which used along with our rewrite rules, trigger the route index.html for all routes and therefore server the static file instead of the compute function I believe

[JhumanJ]

I believe we shouldn't be using re-write rules when deploying with SSR. I tried removing both of them, and then got this erorr again. I'm getting pretty sure that somehow the nuxt SSR on Amplify doesn't support subdirectories (or I misconfigured it somehow)

| 2024-01-06T11:41:39.051+01:00 | Listening on http://localhost:3000 (AWS Amplify Hosting) 
| 2024-01-06T11:41:39.059+01:00 | START RequestId: 18cf87b6-d29a-45dd-ba0b-6f89756131dc Version: $LATEST
| 2024-01-06T11:41:39.073+01:00 | [nuxt] [request error] [unhandled] [500] ENOENT: no such file or directory, open '/static/index.html'

[JhumanJ]

Some progress:

• I disabled pre-rendering for all pages that were pre-rendered. Now images do work (expect the SVG logo, which takes us back to this issue). I tried adding image: {dangerouslyAllowSVG: true} to Nuxt config, but I think it's not supported by the provider
• This means that pre-rendering is not compatible with the utilization of NuxtImage/Image optimization usage? There are other issues appearing, but this could be due to our code

[JhumanJ]

More progress:

• To "fix" the svg issue, add this to nuxt.config.ts:

  export default defineNuxtConfig({
  nitro: {
      awsAmplify: {
          imageSettings: {
              dangerouslyAllowSVG: true
          }
      }
  }
  })

Since this is working, I'm going to close this issue. Pre-rendering still not allowed though...

[JasonLandbridge]

The fix to normal images not loading is to hard-code the provider to the default IPX provider

export default defineNuxtConfig({
  image: {
    provider: 'ipx',
  },
});