AWS Lambda deployment not serving files from public/_nuxt folder

Environment

---

• Operating System: Darwin
• Node Version: v14.19.0
• Nuxt Version: 3.0.0-27447229.20f3171
• Package Manager: yarn@1.22.17
• Bundler: Vite
• User Config: -
• Runtime Modules: -
• Build Modules: -

---

Reproduction

• Create a new project using npx nuxi init nuxt3-app
• Install the necessary dependencies
• Build using the nitro lambda preset (export NITRO_PRESET=lambda)
• Create a AWS Lambda function with the build output files
• Connect API Gateway with the Lambda function

Describe the bug

The deployed function will not serve anything from the /_nuxt path. Either it will return the default welcome page or the 404 error page if you setup pages.

Additional context

No response

Logs

No response

[bros4president]

We faced the same issue today and after many hours looking for the culprit, we found that the ‘aws-lambda’ nitro preset does not support serving static files. This is probably by design, because AWS API Gateway does not support serving binary files by default, as far as I know.

We propose two fixes:

One fix is very simple, just need to extend the ‘aws-lambda’ preset in nuxt.config.js enabling the serveStatic option.

export default {
  nitro: {
    preset: 'aws-lambda',
    serveStatic: true
  }
}

Then, if using API Gateway, you’ll likely have to enable binary file serving. Our project is build using Serverless Framework, so we just used serverless-apigw-binary plugin.

We found this option by digging into the source code of the ‘node-server’ preset. You can also find the preset definition for ‘aws-lambda’ in case you want to define your own ‘aws-lambda-static’ or something.

If you don’t include this option, Nitro will not include a handler for static file routes, which will be handled by regular Vue Router handler. Which is the reason you get 404 (it is not that the server can’t find the files).

---

A (maybe better) second solution is to not serve static files through lambda, because it’s slower and more expensive compared to dedicated static file serving such a CDN. What you do in this case is to not include the serveStatic: true config and define your cndUrl in nuxt.config.js:

export default {
  nitro: {
    preset: 'aws-lambda',
  },
  app: {
    cndUrl: 'https://your-static-host.com/',
  }
}

cndUrl was previously known as publicPath in Nuxt 2

In this case, you have to upload the content of .output/public/ into https://your-static-host.com/. When using Serverless Framework, this would mean a manual process, but you could also automate it with serverless-finch (S3 Bucket) or serverless-lift (S3 + CloudFront Distribution) 👍🏻👍🏻👍🏻

---

We found the documentation lacking with regards to serving static files through lambda and Nitro config, so if any of this information is of help, we’d be happy to add it to the docs 🙂

[uncle-samm]

@uncle-samm It may not necessarily be exactly what everyone needs (as it’s highly opinionated by using SST to build the infrastructure), but it’s a 100% working-out-of-the-box repo… to the best of my knowledge. 🙂

Yes, I’ll have to look into that but I do see a lot of advantages using SST. It’s still relatively new for me, am used to Docker. However this seems like a logical next step for me