Nuxt•3w ago

Weird dynamic routing issue when behind proxy or deployed to ECS

Hi, I have a project with only had a single nested dynamic route, such as: pages/[route1]/[route2]/index.vue. My page is working fine, however when behind a reverse proxy or deployed to ECS I am seeing an error in the console for [route1]/false. Has anyone come across this before and know a fix? When I run it through localhost without the reverse proxy, I don't get this error.

3 Replies

kapa.ai•3w ago

Hi @TheHornyDonut. 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 knowledge sources provided, I don't have enough specific information to directly address your issue with the dynamic routing behind a reverse proxy or when deployed to ECS. However, I can provide some relevant information and suggestions that might help you troubleshoot the problem. 1. HMR and Proxy Issues: There have been some issues reported with HMR (Hot Module Replacement) when Nuxt is behind a reverse proxy. As mentioned in the Nuxt GitHub issue #29049, there were problems with the HMR protocol when using a reverse proxy. While this might not be directly related to your routing issue, it's worth considering if you're experiencing any HMR-related problems. 2. CDN Proxy Configuration: If you're using a CDN like Cloudflare, make sure you have the correct settings. As mentioned in the Nuxt deployment documentation, certain CDN settings can cause issues with Nuxt applications. Ensure that options like Rocket Loader™, Mirage, and Email Address Obfuscation are disabled if you're using Cloudflare. 3. Deployment Presets: When deploying to different environments, Nuxt offers various presets. As stated in the Nuxt deployment documentation, you can explicitly set the desired preset in your nuxt.config.ts file. For example:

export default defineNuxtConfig({
  nitro: {
    preset: 'node-server'
  }
})

export default defineNuxtConfig({
  nitro: {
    preset: 'node-server'
  }
})

You might want to check if using a specific preset resolves your issue. 4. Base URL Configuration: If you're deploying to a subdirectory, ensure that you've correctly set the baseURL in your Nuxt configuration. This was mentioned in a Stack Overflow answer about deploying Nuxt 3 with Apache2 in a subdirectory:

export default defineNuxtConfig({
   app: {
       baseURL: "/app"
   },
})

export default defineNuxtConfig({
   app: {
       baseURL: "/app"
   },
})

5. Debugging: To better understand what's happening, you might want to add some debugging logs in your route handling code or in your nuxt.config.ts file. This could help you identify at which point the [route1]/false error is occurring. Given the limited information about your specific setup and the exact error message, it's difficult to pinpoint the exact cause of your issue. If the problem persists, you might want to create a minimal reproduction of the issue and seek help on the Nuxt GitHub issues page or the Nuxt Discord community. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

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

TheHornyDonutOP•3w ago

@L422Y it's likely configuration, but can't figure it out, a colleague has the same issue on a different nuxt app. The AWS setup is Route53, ECS, ELB and Cloudfront - if there's anything that can be a gotcha in any of those that you know about Can live with it being there when using the nginx reverse proxy because that only for local development but it's a bit of a problem when deployed because it's slowing the page down by 300ms The app also only has the single page and no routing to other pages, so there's nothing in my code that could be trying to route to /false Nginx is literally just a reverse proxy so that different apps can fit together locally, it's actually got nothing to do with the nuxt app and it's not used in the production environment The reverse proxy is just nginx running on a docker container which is proxying different localhost apps My colleague should be joining the thread shortly, he's a lot better at explaining things than me Apologies if it came across wrong, I wasn't trying to say you didn't know what it was Managed to find the issue an external was throwing an error on the client side and this for some reason was cause Nuxt to attempt redirect

Gaming

Programming

Weird dynamic routing issue when behind proxy or deployed to ECS

Did you find this page helpful?