Question 227988 in Nginx Question posted in
The official documentation can be found here.

Nginx location return 404 for vue js app with path param

I am bit confuse about Nginx and vue js router.

I have the following uri:

  1. / -> home page
  2. /ads -> display a list
  3. /ad -> create form
  4. /add/$id -> dispaly an ad in full view

Runing the app whitout nginx is working fine for all uri.

Now working with nginx and docker compose I only get the 3 first but the last one give me a 404 and I do not get why.

Here the nginx conf:

events { }

    http {
    
      map $http_upgrade $connection_upgrade {
          default upgrade;
          ''      close;
        }
    
      server {
        listen 80;
        server_name localhost;
        return 301 https://localhost$request_uri;
             }
    
       server {
        listen 443 ssl;
        server_name localhost;
    
        ssl_certificate /etc/nginx/cert.pem;
        ssl_certificate_key /etc/nginx/key.pem;
    
        access_log /dev/stdout;
        error_log /dev/stderr warn;
    
        location / {
                include /etc/nginx/api_proxy.conf;
                proxy_pass http://frontend:8080/;
           }
    
        location /ads {
              include /etc/nginx/api_proxy.conf;
              proxy_pass http://frontend:8080/;
          }
    
          location /ad {
              include /etc/nginx/api_proxy.conf;
              proxy_pass http://frontend:8080/;
          }
    
    
        location /back {
           rewrite ^/back(.*)$ $1 break;
           include /etc/nginx/api_proxy.conf;
           proxy_pass http://backend:8081/;
        }
    
       }
    }

And the vue js router:

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

const routes = [
  {
    path: '/',
    component: () => import('@/layouts/default/Default.vue'),
    children: [
        {
            path: '',
            name: 'Home',
            // route level code-splitting
            // this generates a separate chunk (about.[hash].js) for this route
            // which is lazy-loaded when the route is visited.
            component: () => import(/* webpackChunkName: "home" */ '@/views/Home.vue'),
        },
        {
            path: 'ads',
            name: 'Advertisements',
            component: () => import(/* webpackChunkName: "home" */ '@/views/AdsList.vue'),
        },
        {
            path: 'ad/:id',
            name: 'AdvertisementView',
            component: () => import(`@/views/AdFullView.vue`),
        }
        ,
        {
            path: 'ad',
            name: 'CreateAdvertisementView',
            component: () => import(`@/views/CreateAd.vue`),
        }
    ],
  },
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
})

export default router

Thx for any help.

Tags:

2

Answers


  1. 0

    In your code the 4th path is not /add/$id instead /ad/:id:

            {
            path: 'ad/:id',
            name: 'AdvertisementView',
            component: () => import(`@/views/AdFullView.vue`),
        },

    Also in your nginx configuration you have the following:

            location / {
                include /etc/nginx/api_proxy.conf;
                proxy_pass http://frontend:8080/;
           }
    
        location /ads {   # block can be deleted
              include /etc/nginx/api_proxy.conf;
              proxy_pass http://frontend:8080/;
          }
    
          location /ad {   # block can be deleted
              include /etc/nginx/api_proxy.conf;
              proxy_pass http://frontend:8080/;
          }

    You should be able to delete those 2 blocks safely, because the first location block is including both scenarios.

    Login or Signup to reply.
  2. 0

    Are you using vue-cli ? If yes then, you can follow the official vue-cli docs about deploying vue app with nginx and docker here.

    Here’s the official vue-cli guide for nginx:

    user  nginx;
worker_processes  1;
error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;
events {
  worker_connections  1024;
}
http {
  include       /etc/nginx/mime.types;
  default_type  application/octet-stream;
  log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                    '$status $body_bytes_sent "$http_referer" '
                    '"$http_user_agent" "$http_x_forwarded_for"';
  access_log  /var/log/nginx/access.log  main;
  sendfile        on;
  keepalive_timeout  65;
  server {
    listen       80;
    server_name  localhost;
    location / {
      root   /app;
      index  index.html;
      try_files $uri $uri/ /index.html;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
      root   /usr/share/nginx/html;
    }
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search