Vue Router with Nginx Proxy Manager resulting in 404 not found error

[Luispinto26]

I have a Vue.js 3 application with Vue Router 4 for client-side routing. The application is running in a docker container on AWS EC2 instance, and using Nginx Proxy Manager for reverse proxy management in a Docker container too.

When trying to access the URL https://www.myurl.pt/cancel-appointment, the server returns a 404 not found error. The expected behavior is for the Nginx server to properly route the request to my Vue app's index.html so that Vue Router can handle the route.

The Nginx Proxy Manager container is set up to handle proxy hosts with the correct reverse proxy configurations. I have updated the location / block in my proxy host config file to include the 'try_files' directive:

`location / {
    try_files $uri $uri/ /index.html;
}`

However, the issue persists.

I have followed recommended steps to troubleshoot the issue, including:

• Clearing the browser cache and using incognito/private browsing windows.
• Ensuring that my browser is requesting the latest version of my application after making changes.
• Restarting the container and reloading the Nginx service.

My Vue Router is configured using history mode and works as expected in my local development environment. I only experience this issue when accessing the live site hosted on AWS.

This is my stack of containers running on my server:
[Docker containers Setup][1]

Vue Router Config:

import { createRouter, createWebHistory } from 'vue-router'

 import Home from '@/views/Home.vue'
 import CancelAppointment from '@/views/CancelAppointment.vue'
 
 const routes = [
     {
       path: '/',
       name: 'Home',
       component: Home
     },
     {
       path: '/cancel-appointment',
       name: 'Cancel',
       component: CancelAppointment,
       props: (route) => ({ appointmentId: route.query.appointmentId }),
     }
   ]
   
   const router = createRouter({
     history: createWebHistory(),
     routes
   })
 
 export default router

My vue app DOCKERFILE:

# build stage
  FROM node:14-alpine as build-stage
  WORKDIR /app
  COPY package*.json ./
  RUN npm install
  COPY . .
  RUN npm run build
  
  # production stage
  FROM nginx:stable-alpine as production-stage
  COPY --from=build-stage /app/dist /usr/share/nginx/html
  COPY ./nginx/default.conf /etc/nginx/nginx.conf
  EXPOSE 80
  CMD ["nginx", "-g", "daemon off;"]

I'm seeking help in mitigating this 404 not found error issue and ensuring that my Vue Router works correctly with Nginx Proxy Manager.

[jc21]

I think you may be misinterpreting the functionality of this project. Your location example is for nginx servers that are serving files directly from disk on the s1ame nginx instance. This project is a proxy, not a local-file-web-server. The 404 is due to trying to find a file that doesn't exist inside the NPM docker container.

You say

The application is served using Nginx Proxy Manager in a Docker container

this seems to imply that your app and NPM are in the same docker container somehow, which is not how this is going to work. You should bring up your app in another container on the same or another host and proxy to it.

[Luispinto26]

Yes, I explained myself badly, I've edited the post for better understanding.

[miclgael]

@Luispinto26 did you ever find a solution?

[Luispinto26]

Yes, I eventually solved it, my default.conf file was misconfigured. I can send you what I have if you want to take a look.

[miclgael]

All good, I found a fix for my needs. I think it turned out to be unrelated to your issue. 😅 Thank you for the reply though!

[Bald-M]

@Luispinto26 Sir, can you please send me the configuration file? My email is [email protected]. Thank you so much!