CODEWITHSUNDEEP
nginxnuxt.js
Larstton
Larstton

Reputation: 174

Nginx + Nuxt website not redirecting to 404

I have a website developed using Laravel + Nuxt. I am using Nginx to run the website. On nuxt generate + nuxt start I am redirected to 404 but on live website I am getting infinte Loading: https://flowerqueen.ro/aiusdhiusadfisadiufh. Played around a lot with config file and checked other answers on stack, nothing helps :(

This is my nginx config:

 map $sent_http_content_type $expires {
               default                       on;
        text/html                  epoch;
        text/css                   max;
        application/javascript     max;
        ~image/                    max;
    }
        
 server {
        # redirect all HTTP to HTTPS
        listen 80;
        expires $expires;
        index index.php index.html;
        server_name flowerqueen.ro www.flowerqueen.ro;
        
        return 301 https://flowerqueen.ro$request_uri;
      }
        
        
server {
        listen 443 ssl;
        
        server_name flowerqueen.ro www.flowerqueen.ro;
        
        #ssl    on;
        ssl_certificate    /etc/ssl/certificate.crt;
        ssl_certificate_key    /etc/ssl/private.key;
        
        index index.php index.html;
        error_page 404 /404.html;
        # expires $expires;
        
        
        
        location / {
        proxy_pass http://localhost:4000;
        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;
        proxy_cache cache;
        proxy_cache_key $host$uri$is_args$args;
        proxy_cache_valid 200 301 302 12h;
        #               try_files $uri $uri/ /404.html;
        #        add_header X-Proxy-Cache $upstream_cache_status;
        }
        location ^~ /images {
        proxy_cache cache;
        proxy_cache_valid 200 301 302 12h;
   }
        
}

Nuxt:

    ssr: true,
    target: 'static',
    server: {
      port: 4000,
      host: 'localhost',
    },

Upvotes: 1

Views: 2182

Answers (2)

Rohit Nair
Rohit Nair

Reputation: 688

I faced this same issue and none of the above solutions worked for me :/

I solved this issue by adding error_page 404 /200.html; inside the server { ... } block

The reason being that in Nuxt 200.html is the default entry point that needs to be routed to from nginx for each use-case.

Here's the whole nginx config file content

server {
        server_name yourdomain.com www.yourdomain.com;
        root /var/www/html/yourdomain.com;
        index index.html index.htm index.nginx-debian.html;
        error_page 404 /200.html;
        location / {
        }

}

Hope this solves it for other struggling with this exact same problem!

Happy coding! :)

Upvotes: 2

Larstton
Larstton

Reputation: 174

Finally solved the issue, google will be happy now. The problem was here:

  generate: {
     fallback: '404.html',

I had the page 404.vue under /pages directory but this was not working.

Changing and moving 404.vue to 404/index.vue and changing the config to:

  generate: {
       fallback: '404/index.html',

Solved the issue for me.

Also I have removed all unnecessary code from 404 page.

Thank you all for the help :)

Upvotes: 2

Related Questions