Errors when publishing my nuxtjs website on SSR mo

问题:

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 (latest to date). Also, if testing with a demo template from NuxtJS, it works perfectly with the exact same server configuration.

By the way, the server is a debian 8, with all packages up to date.

Thanks in advance for any hint.

Edit: If of any use, the error log:

2018/02/14 19:12:54 [error] 12981#12981: *239930 open() "/var/www/mywebsite/site/_nuxt/pages/spot/_slug.e57cc2e78d8e0b160fe7.js" failed (2: No such file or directory), client: xxx.xxx.xxx.xxx., server: www.mywebsite.com, request: "GET /_nuxt/pages/spot/_slug.e57cc2e78d8e0b160fe7.js HTTP/2.0", host: "www.mywebsite.com", referrer: "https://www.mywebsite.com/"
2018/02/14 19:12:57 [error] 12981#12981: *239930 open() "/var/www/mywebsite/site/_nuxt/manifest.3a7efd91c5f63f114507.js" failed (2: No such file or directory), client: xxx.xxx.xxx.xxx, server: www.mywebsite.com, request: "GET /_nuxt/manifest.3a7efd91c5f63f114507.js HTTP/2.0", host: "www.mywebsite.com", referrer: "https://www.mywebsite.com/"
2018/02/14 19:12:57 [error] 12981#12981: *239930 open() "/var/www/mywebsite/site/_nuxt/vendor.7519259bf7bdf608079e.js" failed (2: No such file or directory), client: xxx.xxx.xxx.xxx, server: www.mywebsite.com, request: "GET /_nuxt/vendor.7519259bf7bdf608079e.js HTTP/2.0", host: "www.mywebsite.com", referrer: "https://www.mywebsite.com/"
2018/02/14 19:12:57 [error] 12981#12981: *239930 open() "/var/www/mywebsite/site/_nuxt/app.a5cb9356f53306f973dc.js" failed (2: No such file or directory), client: xxx.xxx.xxx.xxx, server: www.mywebsite.com, request: "GET /_nuxt/app.a5cb9356f53306f973dc.js HTTP/2.0", host: "www.mywebsite.com", referrer: "https://www.mywebsite.com/"

Again, it’s working perfectly fine with other nuxt projects, with a similar configuration. Indeed it can’t find these files in this folder, as they’re not in it — which is perfectly normal. It’s up to the app to get the routes to these files, which it usually does pretty well, with the same directory output (as I said, it’s supposed not to be in a _nuxt folder).

Thanks.

回答1:

This was tagged with nginx, so, here's the nginx way of solving the problem.

After the troubleshooting through the comments, you report receiving the following in your error_log:

2018/02/14 19:12:57 [error] 12981#12981: *239930 open() "/var/www/mywebsite/site/_nuxt/manifest.3a7efd91c5f63f114507.js" failed (2: No such file or directory), client: xxx.xxx.xxx.xxx, server: www.mywebsite.com, request: "GET /_nuxt/manifest.3a7efd91c5f63f114507.js HTTP/2.0", host: "www.mywebsite.com", referrer: "https://www.mywebsite.com/"

Subsequently, running find / -type f -name manifest.3a7efd91c5f63f114507.js, or similar, results in the corresponding file being located in /var/www/mywebsite/site/.nuxt/dist.

As such, your nginx configuration is wrong, because you make it look for these things in the incorrect folder — your config has root /var/www/mywebsite/site/; instead.

The proper way would may be to use a prefix-based location together with the alias directive:

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

However, if /_nuxt/ has stuff that may have to be proxy_pass'ed to the upstream, and you want to continue using the pcre-based location you already have had in your original config, then an alternative solution like below is also an option (otherwise, you obviously would have to remove it as redundant, to make sure that the prior prefix-based location works, see http://nginx.org/r/location):

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