Nuxt not serving 404 but nginix is - nginx

Question

I've just uploaded my nuxt.js site with pre-rendered HTML in universal mode, However the server is serving the 404 errors as I'm getting the server with "An error occurred" from nginix.
I'm using Docker with nginix server.
How can I get my server to let nuxt.js handle the routing and serve the errors?

Answer 1

Its good to use a reverse proxy before your application, here i show you my nginx nuxt configuration.
In my case the configuration is under /etc/nginx/sites-available/default.
server {
server_name homepage.com www.homepage.com;
listen 443 ssl http2;
ssl on;
ssl_certificate /etc/letsencrypt/live/homepage.at/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/homepage.at/privkey.pem;
location / {
proxy_pass http://localhost:3000;
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;
}
location ~* \.(png|jpg|jpeg|ico)$ {
root /root/AutoProjekt/static;
expires 1y;
add_header Cache-Control "public, no-transform";
}
}
server {
server_name homepage.com www.homepage.com;
listen 80;
return 301 https://$host$request_uri;
}
On the top define your website name.
The port for HTTPS is 443 so you need to listen to it.
You can get the two certificates easely wih https://certbot.eff.org/ just follow the instruction.
At location you tell nginx where your nuxt projekt is in my case its at /
Important here is to pass the client to your application with is running in my case at port 3000.
The next location isnt necessary its optional. In my application i can upload images and the problem witch i have is that my images doesnt have a Cache-Control header that signals the browser to cache it. However its not essential for you here.
And the last one you listen to the port 80 witch is HTTP. There you redirect your incoming request to HTTPS.
After making changes always test for syntax errors with nginx -t and if its ok then restart your nginx with systemctl restart nginx
I also suggest to use pm2 https://www.npmjs.com/package/pm2
npm i pm2 -g
Its a production process manager that handles all your node.js processes. The problem witch you get if you just start the application with npm start is that your application stop to work if you close for examply PuTTy.
Usually you start the application with npm start but with pm2 you can start it like this:
pm2 start npm --name MyCoolApp -- start
You should see now your app with status online. To stop it type in pm2 stop MyCoolApp and for run obviously pm2 start MyCoolApp