nginx - Nuxt routing failing to create sub-route on build

Question

To display a product, I want to use this structure for the link:

/collections/:slug/:id

So far, I have created this folder structure:

 collections/
     _category/
        _id.vue
   _slug.vue
   index.vue

_slug.vue and index.vue are in collections folder.

On local everything runs fine but when I make npm run dist and pushing to live, when trying to access:

/collections/_category or /collections/_category/_id

it gives not found.

What changes should I make to make it working?

One more thing to mention is the fact that when accessing a product from home page, everything is working fine and the product is displayed but when I am trying to refresh that page, I am getting 404 notfound, ngnix. Could it be an ngnix problem? Nginx config:

server {
    listen 80 default_server;
    listen [::]:80 default_server;

    root /var/www/{link_to_the_project}/dist;

    server_name {mydomainname}.ro;

    location / {
            try_files $uri $uri/ /index.php?$query_string;
    }

    location ~ .php$ {
            include snippets/fastcgi-php.conf;
    }

    location ~ /.ht {
            deny all;
    }
}

question from:https://stackoverflow.com/questions/65833437/nuxt-routing-failing-to-create-sub-route-on-build

Answer 1

After I have made it working, I don't even know how it was working before....

The way it worked for me:

Commited and pushed to the server all the files from the project. Connected via ssh to the server and on server run: npm install

After installing npm I have modifed my nginx config to this:

 server {
    listen 80;
    server_name {mydomain}.ro;

    location / {
            proxy_pass http://127.0.0.1:3000;//run `npm run start` in project for ip
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
    }
 }

Installed pm2:

 npm install pm2 -g

and run:

 pm2 start npm -- start

Now everything is working perfectly.