Configure Nginx as a reverse proxy in Nuxt application

In this tutorial, we are going to set up nginx in our Nuxt application. Nginx allows for managing the SSL, load balancing, port forwarding, static file caching, etc.

Importance of using Nginx

Port Mapping: It allows mapping the Nuxt default port 3000 to 80/443 i.e user can access the site using example.com, not example.com:3000
Security: It hides the internal app server
SSL Setup: It handles easy SSL setup for our app

Prerequisites

Ready to use the Nuxt application setup deployed to the server. Here is the full guide on deploying a Nuxt app in an Ubuntu server

Install Nginx

Installing nginx is straight forward to ubuntu server

bash

sudo apt update
sudo apt install nginx

Configure Nginx

Create a configuration file

Navigate to the nginx directory:

bash

cd /etc/nginx/sites-available

Create a config file

bash

sudo vm nuxt-app

Here, give your file name instead of nuxt-app, like csbyte.com or csbyte

Add the following configuration:

bash

server {
    listen 80;
    server_name yourdomain.com www.yourdomain.com;

    location / {
        # This points to your Nuxt Nitro server
        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;
    }
}

Now save the file, press Esc and use the following command:

bash

:wq!

Enable and test status

The config file needs to create a symbolic link to be used by nginx. Use the following command:

bash

sudo ln -s /etc/nginx/sites-available/my-nuxt-app /etc/nginx/sites-enabled/

bash

sudo nginx -t

The successful output will look like this:

bash

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

Reload Nginx

bash

sudo systemctl restart nginx

Now, if you open your domain, you can see the Nuxt app running.

Set up SSL (HTTPS)

For SSL setup, we are using certbort

Install Certbort:

bash

sudo apt install python3-certbot-nginx

Run the domain to connect to HTTPS

bash

sudo certbot --nginx -d yourdomain.com

This will automatically update your previously created nginx config file with SSL certificates and set up a redirect from HTTP to HTTPS.

You can verify that the config file looks like this:

bash

        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/your-domain.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/your-domain.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 = your-domain.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    listen 80;
    server_name your-domain.com;
    return 404; # managed by Certbot


}

Nginx Commands

Syntax check:

bash

sudo nginx -t

Check the Nginx service status:

bash

sudo systemctl status nginx

Apply the changes:

bash

sudo systemctl reload nginx

Restart Nginx:

bash

sudo systemctl restart nginx

View the error logs:

bash

sudo tail -f /var/log/nginx/error.log

View the user access/request logs:

bash

sudo tail -f /var/log/nginx/access.log

We had set up our Nuxt app to open with our domain with a fully secure HTTPS