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