NUXT各个dist文件夹什么时候使用，html/.nuxt/dist/html/dist/_nuxt/html/static html/assets？

Question

If I use: Nuxt @ v2.15.8
Environment: production
Rendering: server-side
Target: server

In this case, which of all assets folders does NUXT use? Does NUXT in this case serve the assets from html/.nuxt/dist/ not from html/dist/_nuxt/ or html/static or html/assets? And what is the purpose of each different dist folder?

I can see that all my file names have the same names in html/.nuxt/dist/ as all missing 404 files in chrome dev (example.com/_nuxt/example1234.js), that's why I'm confused.

I now ran /nuxt start --port 3003 but normally pm2 start -- --port 3003. Same issue with both commands: all assets get 404.

To clarify: I only get issues with missing files on the live Ubuntu 20.04 NGINX server, not locally in Windows 11.

I also tried now to set publicPath: 'example.com/cdn', and copied the content in /var/www/example.com/html/.nuxt/dist/client to /var/www/example.com/html/cdn but when I check the server error.log it says: " "/var/www/example.com/html/.nuxt/dist/cdn/85451fa.js" failed (2: No such file...." I even now copied the same files to /var/www/example.com/html/.nuxt/dist/cdn but even after that I get 404 on all assets. I even did sudo chmod -R 755 /var/www/example.com/html/cdn In Chrome it's correct URL example.com/cdn/85451fa.js

So I get 404 in Chrome console on: https://example.com/_nuxt/c4ffa45.js But I can see that the file exists here: /var/www/example.com/html/.nuxt/dist/client/c4ffa45.js so I did: sudo chmod -R 755 /var/www/example.com/html/.nuxt/dist But still 404. So the html of the NUXT start page is served by PM2 but no scripts or images. Any idea why?

So do I use correct folders in NGINX config here if I run the project as Server Side Rendered ssr: true for SEO, and target: server

    server {
    server_name www.example.com;
    # www to non-www for SEO canonical reasons
    return 301 http://example.com$request_uri;
    
        listen 443 ssl http2; # managed by Certbot
        ssl_certificate /etc/letsencrypt/live/www.example.com/fullchain.pem; # managed by Certbot
        ssl_certificate_key /etc/letsencrypt/live/www.example.com/privkey.pem; # managed by Certbot
        include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
        ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
        }
        
    server {
    server_name example.com;
    
    location / {
        proxy_pass http://localhost:3003;
        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;
        }
        
    root /var/www/example.com/html;
    index index.html index.php index.htm index.nginx-debian.html;
    
        # PHP
        ##location ~ \.php$ {
        ##include snippets/fastcgi-php.conf;
        ##fastcgi_pass unix:/run/php/php7.4-fpm.sock;
        ##}
    
    location = /favicon.ico {
        log_not_found off; access_log off;
    }
    
    location = /robots.txt {
        log_not_found off; access_log off; allow all;
    }
    
    location /_nuxt/ {
        alias /var/www/example.com/html/.nuxt/dist/client/;
    }
    
    location ~* \.(ico|css|js|gif|jpeg|jpg|png|woff|ttf|otf|svg|woff2|webp)$ {
        rewrite ^/_nuxt(/.*) $1 break;
        root /var/www/example.com/html/.nuxt/dist/client;
        expires 24h;
        add_header Cache-Control private;
    }
    
    location ~* \.(ico|css|js|gif|jpeg|jpg|png|woff|ttf|otf|svg|woff2|webp)$ {
        root /var/www/example.com/html/static;
        expires 24h;
        add_header Cache-Control private;
    }
    
        # (For WordPress permalinks)
        #location / {
        #try_files $uri $uri/ /index.php$is_args$args;
        #}
    
        listen 443 ssl http2; # managed by Certbot
        ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem; # managed by Certbot
        ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem; # managed by Certbot
        include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
        ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
    
    }
    server {
        server_name test.example.com;
        # ssl_* directives here
        root /var/www/example.com/test;
        index index.php index.html index.htm index.nginx-debian.html;
        # PHP
        location ~ \.php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_pass unix:/run/php/php7.4-fpm.sock;
        } location = /favicon.ico {
        log_not_found off; access_log off;
        } location = /robots.txt {
        log_not_found off; access_log off; allow all;
        }
        location ~* \.(ico|css|js|gif|jpeg|jpg|png|woff|ttf|otf|svg|woff2|webp)$ {
        expires 24h;
        add_header Cache-Control private;
        }
        # (For WordPress permalinks)
        location / {
        try_files $uri $uri/ /index.php$is_args$args;
        }
    
        listen 443 ssl; # managed by Certbot
        ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem; # managed by Certbot
        ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem; # managed by Certbot
        include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
        ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
    
        } 
    
    server {
        if ($host = example.com) {
            return 301 https://$host$request_uri;
        } # managed by Certbot
    
    listen 80;
    server_name example.com;
        return 404; # managed by Certbot
    
    }
    server {
        if ($host = test.example.com) {
            return 301 https://$host$request_uri;
        } # managed by Certbot
    
    listen 80;
    server_name test.example.com;
        return 404; # managed by Certbot
    
    
    }

My ecosystem.config.js looks like below:

    module.exports = {
        apps: [
          {
            name: 'app',
            exec_mode: 'cluster',
            instances: 'max', // Or a number of instances
            script: './node_modules/nuxt/bin/nuxt.js',
        cwd: '/var/www/example.com/html',
            args: 'start',
            env: {
              NODE_ENV: "production",
              PORT: 3003,
            },
          }
        ]
      } 

To run I use:

yarn nuxt build

pm2 start -- --port 3003

Answer 1

It finally works!

This is what I did:

sudo ufw allow 3003

pm2 stop nuxtAppName

pm2 start -- --port 3003

You might also need to do:

pm2 delete nuxtAppName

pm2 save

yarn nuxt generate

cd /var/www/example.com/nuxtAppDir

pm2 start ecosystem.config.js -- --port 3003

I would still like to know the different purposes of all the different directories because I now always need to manually copy assets from /var/www/example.com/release1/.nuxt/dist/client to /var/www/example.com/release1/dist/_nuxt on every new deploy