Nuxt•2mo ago

Issues running Nuxt with NuxtConfig on AWS Amplify

I am trying to deploy a simple Nuxt application using NuxtContent in AWS Amplify, but I am struggling to make it work. The application I am trying to run is this template as-is; https://github.com/nuxt-ui-pro/saas The problem seems to be happening in pages that uses NuxtConfig. When navigating to them I get a CloudFront error:

HTTP/2 502 Bad Gateway
Content-Length: 0
Date: Sat, 01 Mar 2025 23:11:16 GMT
X-Amplify-Status: true
X-Cache: Error from cloudfront
Via: 1.1 daf364ea500d73463444a104a180667c.cloudfront.net (CloudFront)
X-Amz-Cf-Pop: MAD56-P3
Alt-Svc: h3=":443"; ma=86400
X-Amz-Cf-Id: 2OMdFwTScGRl9sYQVBhL6uwztK5ijAag0nkxx9z-AkCBLGkZvAMMMA==

HTTP/2 502 Bad Gateway
Content-Length: 0
Date: Sat, 01 Mar 2025 23:11:16 GMT
X-Amplify-Status: true
X-Cache: Error from cloudfront
Via: 1.1 daf364ea500d73463444a104a180667c.cloudfront.net (CloudFront)
X-Amz-Cf-Pop: MAD56-P3
Alt-Svc: h3=":443"; ma=86400
X-Amz-Cf-Id: 2OMdFwTScGRl9sYQVBhL6uwztK5ijAag0nkxx9z-AkCBLGkZvAMMMA==

Looking into the server side logs I see:

2025-03-02T00:51:03.376Z   [nuxt] [request error] [unhandled] [500] ENOENT: no such file or directory, open '/static/api/content/docs/database.sql/index...
2025-03-02T00:51:03.390Z   [nuxt] [request error] [unhandled] [500] ENOENT: no such file or directory, open '/static/api/content/docs/database.sql/index...
2025-03-02T00:51:03.392Z   Failed to fetch compressed dump FetchError: [GET] "/api/content/docs/database.sql?v=v3.2.0--TZcxwtJCkx": 500
(...)
2025-03-02T00:51:03.413Z   at Zlib.zlibOnError [as onerror] (node:zlib:189:17) {
2025-03-02T00:51:03.413Z     errno: -5,
2025-03-02T00:51:03.413Z     code: 'Z_BUF_ERROR'
2025-03-02T00:51:03.413Z   }
2025-03-02T00:51:03.415Z   [nuxt] [request error] [unhandled] [500] /lib64/libm.so.6: version `GLIBC_2.29' not found (required by /var/task/node_modules/better-sqlite3/build/Release/better_sqlite3.node)
[nuxt] [request error] [unhandled] [500] /lib64/libm.so.6: version `GLIBC_2.29' not found (required by /var/task/node_modules/better-sqlite3/build/Release/better_sqlite3.node)

2025-03-02T00:51:03.376Z   [nuxt] [request error] [unhandled] [500] ENOENT: no such file or directory, open '/static/api/content/docs/database.sql/index...
2025-03-02T00:51:03.390Z   [nuxt] [request error] [unhandled] [500] ENOENT: no such file or directory, open '/static/api/content/docs/database.sql/index...
2025-03-02T00:51:03.392Z   Failed to fetch compressed dump FetchError: [GET] "/api/content/docs/database.sql?v=v3.2.0--TZcxwtJCkx": 500
(...)
2025-03-02T00:51:03.413Z   at Zlib.zlibOnError [as onerror] (node:zlib:189:17) {
2025-03-02T00:51:03.413Z     errno: -5,
2025-03-02T00:51:03.413Z     code: 'Z_BUF_ERROR'
2025-03-02T00:51:03.413Z   }
2025-03-02T00:51:03.415Z   [nuxt] [request error] [unhandled] [500] /lib64/libm.so.6: version `GLIBC_2.29' not found (required by /var/task/node_modules/better-sqlite3/build/Release/better_sqlite3.node)
[nuxt] [request error] [unhandled] [500] /lib64/libm.so.6: version `GLIBC_2.29' not found (required by /var/task/node_modules/better-sqlite3/build/Release/better_sqlite3.node)

It’s a bit frustrating 😭, because I don't see how to troubleshoot this issue. Any idea about what to try?

GitHub

GitHub - nuxt-ui-pro/saas: A SaaS template made with Nuxt UI Pro.

A SaaS template made with Nuxt UI Pro. Contribute to nuxt-ui-pro/saas development by creating an account on GitHub.

8 Replies

kapa.ai•2mo ago

Hi @sakens. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in your question and the knowledge sources available, it appears you're encountering issues deploying a Nuxt application with NuxtContent on AWS Amplify. Let's break down the problem and provide some insights: 1. Database Configuration: The error messages suggest that there's an issue with the database configuration. NuxtContent requires a database, and in a serverless environment like AWS Amplify, you can't use file-based databases like SQLite. Instead, you need to use an external database service. As mentioned in the Serverless Hosting documentation, you should select a database service compatible with serverless environments. Options include PostgreSQL, Cloudflare D1, or LibSQL (Turso). 2. Serverless Environment Considerations: AWS Amplify is a serverless platform, which means each request triggers a fresh instance of your Nuxt server. This "stateless" nature requires special considerations for database usage and file access. 3. GLIBC Version Issue: The error message mentioning "GLIBC_2.29 not found" indicates a compatibility issue with the Node.js version or the underlying system libraries on AWS Amplify. To address these issues, try the following: 1. Update your database configuration in nuxt.config.ts to use a serverless-compatible database. For example, if using PostgreSQL:

export default defineNuxtConfig({
  content: {
    database: {
      type: 'postgres',
      url: process.env.POSTGRES_URL
    }
  }
})

export default defineNuxtConfig({
  content: {
    database: {
      type: 'postgres',
      url: process.env.POSTGRES_URL
    }
  }
})

Make sure to set the POSTGRES_URL environment variable in your AWS Amplify environment. 2. Ensure you're using a Node.js version compatible with AWS Amplify. In your amplify.yml file, specify a supported Node.js version:

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - nvm use 18
        - npm install
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: .output
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - nvm use 18
        - npm install
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: .output
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

3. Consider using Nuxt's built-in support for serverless platforms. As mentioned in the Hosting Providers documentation, you can set a specific preset for your deployment:

export default defineNuxtConfig({
  nitro: {
    preset: 'aws-lambda'
  }
})

export default defineNuxtConfig({
  nitro: {
    preset: 'aws-lambda'
  }
})

4. If you're using SQLite, make sure to configure it to use the /tmp directory, which is the only writable directory in AWS Lambda environments:

export default defineNuxtConfig({
  content: {
    database: {
      type: 'sqlite',
      filename: '/tmp/contents.sqlite'
    }
  }
})

export default defineNuxtConfig({
  content: {
    database: {
      type: 'sqlite',
      filename: '/tmp/contents.sqlite'
    }
  }
})

5. Consider optimizing your application with pre-rendering for better performance in a serverless environment. You can use the routeRules option to pre-render specific pages:

export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true }
  }
})

export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true }
  }
})

If these steps don't resolve your issue, you may need to further investigate the specific requirements and limitations of AWS Amplify for Nuxt applications. It might be helpful to consult AWS Amplify's documentation or support channels for more specific guidance on deploying Nuxt applications with NuxtContent. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@591683760076881952> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

sakensOP•2mo ago

@kapa.ai Okay, Let me try to prerender. Is this setup correct?

  routeRules: {
    '/': { prerender: true },
    '/docs': { redirect: '/docs/getting-started', prerender: false }
  },


  nitro: {
    prerender: {
      routes: [
        '/',
        '/docs'
      ],
      ignore: ["/api"],
      crawlLinks: true
    }
  },

  routeRules: {
    '/': { prerender: true },
    '/docs': { redirect: '/docs/getting-started', prerender: false }
  },


  nitro: {
    prerender: {
      routes: [
        '/',
        '/docs'
      ],
      ignore: ["/api"],
      crawlLinks: true
    }
  },

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Your configuration is on the right track, but there are a few inconsistencies and potential improvements we can make. Let's break it down: 1. In your routeRules, you have:

routeRules: {
  '/': { prerender: true },
  '/docs': { redirect: '/docs/getting-started', prerender: false }
},

routeRules: {
  '/': { prerender: true },
  '/docs': { redirect: '/docs/getting-started', prerender: false }
},

This is correct for the root route ('/'), but there's an issue with the '/docs' route. You're setting prerender: false while also adding a redirect. In this case, the prerender: false is unnecessary because redirects are handled at runtime and don't need to be prerendered. 2. In your nitro configuration:

nitro: {
  prerender: {
    routes: [
      '/',
      '/docs'
    ],
    ignore: ["/api"],
    crawlLinks: true
  }
},

nitro: {
  prerender: {
    routes: [
      '/',
      '/docs'
    ],
    ignore: ["/api"],
    crawlLinks: true
  }
},

Here, you're explicitly adding '/docs' to the routes to be prerendered, which contradicts the routeRules where you set it to redirect. Also, since you're using crawlLinks: true, you don't need to specify '/' in the routes array as it will be crawled automatically. Here's an improved version of your configuration:

export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },
    '/docs': { redirect: '/docs/getting-started' },
    '/api/**': { prerender: false }
  },

  nitro: {
    prerender: {
      crawlLinks: true,
      routes: ['/docs/getting-started'],
      ignore: ['/api/**']
    }
  },
})

export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },
    '/docs': { redirect: '/docs/getting-started' },
    '/api/**': { prerender: false }
  },

  nitro: {
    prerender: {
      crawlLinks: true,
      routes: ['/docs/getting-started'],
      ignore: ['/api/**']
    }
  },
})

This configuration: 1. Prerenders the root route ('/'). 2. Sets up a redirect for '/docs' to '/docs/getting-started'. 3. Explicitly prevents prerendering of API routes. 4. Uses crawlLinks: true to automatically discover and prerender linked pages. 5. Adds '/docs/getting-started' to the initial routes to be prerendered, ensuring it's included even if not linked from the homepage. 6. Uses a wildcard ('/**') in the ignore array to exclude all API routes from prerendering. This setup should give you a good starting point for prerendering your Nuxt application. Remember that the exact configuration might need adjustments based on your specific application structure and requirements. For more detailed information on prerendering and route rules, you can refer to the Nuxt documentation on prerendering and route rules. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@591683760076881952> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

sakensOP•2mo ago

@kapa.ai I am using the config you shared and I face a different issue, even running localy if I use the aws-amplify nitro preset. When I load a page that has a NuxtContent content I see this error: Cannot find static asset /_nuxt/builds/meta/578be365-7bf8-429f-9328-9427a3d3c531.json [GET] "/_nuxt/builds/meta/578be365-7bf8-429f-9328-9427a3d3c531.json": 404 Cannot find static asset /_nuxt/builds/meta/578be365-7bf8-429f-9328-9427a3d3c531.json I inspected the artefact and there is a file within /_nuxt/builds/meta/, but it's not one in the request. BTW, If I use the default nitro preset it works fine, but as I want to reproduce the AWS Amplify setup I am trying aws-amplify preset.

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the information you've provided and the knowledge sources available, it appears you're encountering an issue specific to the aws-amplify Nitro preset when using NuxtContent. This error suggests that there's a mismatch between the expected and actual build files when using this preset. Let's address this issue: 1. The error you're seeing is related to the manifest file that Nuxt uses to manage its builds. The file 578be365-7bf8-429f-9328-9427a3d3c531.json is dynamically generated during the build process and contains information about the current build. 2. The fact that it works with the default preset but not with aws-amplify preset indicates that there might be some differences in how assets are handled or served in this specific preset. To address this issue, you can try the following: 1. Update your Nuxt configuration to use the aws-lambda preset instead of aws-amplify. This preset is more generic and might work better with NuxtContent. Update your nuxt.config.ts:

   export default defineNuxtConfig({
     nitro: {
       preset: 'aws-lambda'
     }
   })

   export default defineNuxtConfig({
     nitro: {
       preset: 'aws-lambda'
     }
   })

As mentioned in the Hosting Providers documentation, the aws-lambda preset is recommended for AWS deployments. 2. If you specifically need to use the aws-amplify preset, you might need to adjust how static assets are handled. Try adding the following to your nuxt.config.ts:

   export default defineNuxtConfig({
     nitro: {
       preset: 'aws-amplify',
       publicAssets: [
         {
           dir: '.nuxt/dist/client',
           maxAge: 60 * 60 * 24 * 365
         }
       ]
     }
   })

   export default defineNuxtConfig({
     nitro: {
       preset: 'aws-amplify',
       publicAssets: [
         {
           dir: '.nuxt/dist/client',
           maxAge: 60 * 60 * 24 * 365
         }
       ]
     }
   })

This configuration ensures that the client-side build files are properly served as static assets. 3. Make sure you're using the latest versions of Nuxt and NuxtContent, as there might have been fixes for similar issues in recent updates. 4. If the issue persists, you might need to investigate how the aws-amplify preset is handling static assets. You can try to debug this by adding some custom server middleware to log the requested paths:

   export default defineNuxtConfig({
     nitro: {
       preset: 'aws-amplify'
     },
     serverMiddleware: [
       (req, res, next) => {
         console.log('Requested path:', req.url)
         next()
       }
     ]
   })

   export default defineNuxtConfig({
     nitro: {
       preset: 'aws-amplify'
     },
     serverMiddleware: [
       (req, res, next) => {
         console.log('Requested path:', req.url)
         next()
       }
     ]
   })

This will help you understand what paths are being requested and potentially why they're not being found. 5. As a last resort, if you can't get the aws-amplify preset to work correctly with NuxtContent, you might need to consider using a different deployment strategy or hosting provider that's more compatible with your specific setup. Remember, when deploying to AWS Amplify, you might need to make additional configurations in your Amplify settings to ensure all necessary files are included in the deployment and served correctly. If these steps don't resolve the issue, you may need to open an issue in the Nuxt GitHub repository, providing details about your setup, Nuxt version, and the specific error you're encountering. The Nuxt team or community might be able to provide more specific guidance for your use case. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@591683760076881952> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Issues running Nuxt with NuxtConfig on AWS Amplify

Did you find this page helpful?