Nuxt.js: 404 errors on dist files in SSR mode

[EmmanuelBeziat]

Hi,

I have some issues while trying to publish a nuxtjs site. Usually, I was using the generate command, but for this one I need to go full SSR, so I'm going for nuxt start..

But after building and starting the app, it's a mess. The build goes perfectly in the console, and the application start. The problem is when I try to access the site, it loads partially, but I got all these errors in the browser:

manifest.3a7efd91c5f63f114507.js
Failed to load resource: the server responded with a status of 404 ()
vendor.7519259bf7bdf608079e.js
Failed to load resource: the server responded with a status of 404 ()
app.a5cb9356f53306f973dc.js
Failed to load resource: the server responded with a status of 404 ()
default.1f3ad14df16ee86595af.js
Failed to load resource: the server responded with a status of 404 ()
index.260dc65b69022a31ad58.js
Failed to load resource: the server responded with a status of 404 ()
/_nuxt/pages/spot/_slug.e57cc2e78d8e0b160fe7.js
Failed to load resource: the server responded with a status of 404 ()
manifest.3a7efd91c5f63f114507.js
Failed to load resource: the server responded with a status of 404 ()
default.1f3ad14df16ee86595af.js
Failed to load resource: the server responded with a status of 404 ()
index.260dc65b69022a31ad58.js
Failed to load resource: the server responded with a status of 404 ()
vendor.7519259bf7bdf608079e.js
Failed to load resource: the server responded with a status of 404 ()
app.a5cb9356f53306f973dc.js
Failed to load resource: the server responded with a status of 404 ()

Nothing seems wrong during the build. When I use nuxt start, I get this:

$ nuxt start
  nuxt:axios BaseURL: http://localhost:3042/api (Browser: /api) +0ms

 OPEN  http://localhost:3042

Here's my server conf file:

# Site global
server {
    listen 443 ssl http2;
    server_name www.mywebsite.com;
    access_log  off;

    location = /robots.txt  { access_log off; log_not_found off; }
    location = /favicon.ico { access_log off; log_not_found off; }
    location / {
        proxy_pass http://127.0.0.1:3042/;
        include /etc/nginx/conf.d/proxy.conf;
        root /var/www/mywebsite/site;
        add_header Access-Control-Allow-Origin *;
    }

    location ~* ^.+.(jpg|jpeg|gif|css|png|js|ico|txt|srt|swf)$ {
        root /var/www/mywebsite/site/;
        expires 30d;
    }

    ssl_certificate /etc/letsencrypt/live/www.mywebsite.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/www.mywebsite.com/privkey.pem;
}

# Redirection
server {
    listen 80;
    server_name mywebsite.com www.mywebsite.com;

    location / {
        return 301 https://www.mywebsite.com$request_uri;
    }
}

And my nuxt config file:

const pkg = require('./package')

module.exports = {
    mode: 'universal',

    loading: { color: '#bb2b4d' },

    router: {
        linkActiveClass: '-active',
        base: '/'
    },

    css: ['@/assets/icons/css/icons.css', '@/assets/snickles/snickles.css'],

    plugins: ['~plugins/vue-filters.js', '~plugins/vue-modal.js'],

    minify: {
        removeEmptyAttributes: false,
        collapseWhitespace: true,
        conservativeCollapse: true,
        collapseBooleanAttributes: true,
        removeTagWhitespace: false,
        removeStyleLinkTypeAttributes: true
    },

    modules: [

        '@nuxtjs/axios'
    ],

    axios: {

    },

    env: {
        api: {
            spots: `https://rest.mywebsite.com/spots`
        }
    },

    proxy: {
    },

    build: {
        extend(config, ctx) {
            // Run ESLint on save
            if (ctx.isDev && ctx.isClient) {
                config.module.rules.push({
                    enforce: 'pre',
                    test: /\.(js|vue)$/,
                    loader: 'eslint-loader',
                    exclude: /(node_modules)/
                })
            }
        }
    },

    postcss: [require('autoprefixer')],

    vendor: ['moment', 'vue-js-modal']
}

Did I forget anything?

The most strange part is that it works perfectly well when I do the same on my own pc and not on my server. I checked the npm and node versions, they are the same.

Thanks in advance for any hint.

_{This question is available on Nuxt.js community (#c2423)}

[EmmanuelBeziat]

Hum, hello? 😄

Just to say, I tried with a fresh demo from nuxt (create nuxt-app), and it just worked. So the server is okay, it’s just my app that messes up.
But it's perfectly okay in local, an not on the server…

I have no idea where to search. I’ll probably end up re-doing everything part by part and testing each time, to understand where it's going wrong, but if anyone can save me this huge work by telling me where I should start…

In case, here's the repository

Thanks!

[liuhuanhui]

mee to，Excuse me, have you solved it

[EmmanuelBeziat]

@liuhuanhui yes, with a bit of Nginx.

location /_nuxt/ {
    alias /var/www/mywebsite/.nuxt/dist/;
}

location ~* ^.+.(jpg|jpeg|gif|css|png|js|ico|txt|srt|swf|woff|woff2)$ {
    rewrite ^/_nuxt(/.*) $1 break;
    root /var/www/mywebsite/.nuxt/dist;
    expires 30d;
}

[Kimel1]

@EmmanuelBeziat thank you for share

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.