I am trying to deploy a Nuxt3 app on AWS Amplify using routeRules to assign different rendering modes to different pages. The build process succeeds, but in my cloudwatch logs, it always gives the error:

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

// https://nuxt.com/docs/api/configuration/nuxt-config

export default defineNuxtConfig({
ssr: true,
routeRules: {

// Homepage pre-rendered at build time
'/': { prerender: true },
'/ads': { prerender: true },
'/websites': { ssr: true },
'/branding': { prerender: true },
'/contact': { prerender: true },
'/terms': { prerender: true },
'/privacy': { prerender: true },
// Blog posts page generated on demand, revalidates in background, cached on CDN for 1 hour (3600 seconds)
'/blog': { ssr: true },
// Blog post page generated on demand once until next deployment, cached on CDN
'/blog/**': { prerender: true },
// Portfolio Item page generated on demand once until next deployment, cached on CDN
'/portfolioItem/**': { prerender: true },

},
devtools: { enabled: true },
app: {

pageTransition: {
  name: 'fade', // Use 'fade' as the transition name or choose your own
  mode: 'out-in' // Ensure the new page fades in only after the old page fades out
}

},

css: ['~/css/Transitions/Fade.css'],
modules: ['@nuxtjs/google-fonts', "@nuxt/image"],

googleFonts: {

families: {
  Roboto: [400, 700],
  Manrope: true,
  'Bebas Neue': true,
  Poppins: [400, 700], // Added Poppins with specific weights
},
download: true, // Optional: Downloads fonts to serve them locally
display: 'swap'

},

nitro: {

prerender: {
  routes: ['/'],
  crawlLinks: true, // Automatically discover links to prerender
},
// preset: 'node-server', // Use the default Nitro preset for Node.js environments
// output: {
//   dir: '.output', // Specify the default Nitro output directory
//   publicDir: '.output/public', // Specify the public assets directory
// },
preset: 'aws-amplify', // Necessary for Amplify ONLY WHEN USING THEIR BACKEND SERVICES. WITH OWN SERVER, JUST USE NORMAL .output/public and .output/server
output: {
  dir: '.amplify-hosting', // Expected by Amplify
  publicDir: '.amplify-hosting/static', // Subdirectory for public assets
},
awsAmplify: {
  imageSettings: {
    dangerouslyAllowSVG: true
  }
},
// compressPublicAssets: true, // This enables compression for public assets
// middleware: ['~/server/middleware/compression.js'], // Add custom middleware for compression

},

ignore: process.env.NODE_ENV === 'production'
? [

  'pages/blog/editBlogs.vue', 
  'pages/portfolioItem/editPortfolio.vue',
]

: [],

runtimeConfig: {

// Public keys that are exposed to the client
  DB_URI: process.env.DB_URI,
  
public: {
  // DB_URI: process.env.DB_URI,
}

},
compatibilityDate: '2024-07-10',
})

Above is my nuxt.config file and below is my .yml file for building the app in AWS Amplify:

version: 1

backend:
phases:

preBuild:
  commands:
    - npm ci
build:
  commands:
    - npm run build

artifacts:

baseDirectory: .amplify-hosting
files:
  - "**/*"

frontend:
phases:

build:
  commands:
    - npm run build

artifacts:

baseDirectory: .amplify-hosting
files:
  - "**/*"

Note that running npm run build on the project and running it with this code makes the app run perfectly with no warnings or errors anywhere:
node .amplify-hosting/compute/default/server.js

When downloading the build artifacts, the index.html file is in .amplify-hosting/static/index.html where it should be, so I'm not sure why it won't detect it.

I've tried probably 50 different variations of the .yml file, changing the base directory of the frontend and backend to .amplify-hosting/static and .amplify-hosting/compute respectively, adding and taking away anything I could think of, using custom headers, rewrites, etc. Basically too many .yml file variations to include here.

I've also tried the commented out "output" with node-server as the preset to try and use .output instead of .amplify-hosting. This took me down a rabbit hole of trying to generate a deploy-manifest.json file locally and pushing it with my project since the build fails without this file. The deploy-manifest.json file is somehow incorrect when building it locally though, so using the aws-amplify preset seems to be the only viable route.

I've looked through Amplify documentation and have been trying to resolve this with AWS Support and rebuilt the project near 200 times and still cannot resolve this. Does anyone have a working project with dynamic routeRules?

Tag:-

Add a new comment.