Set up & deploy Nuxt.js Web Application on Ubuntu 22.04 LTS

Preparation of environment

I assume that your droplet is ready and you are logged in your server by your SSH and. I also assume that all of the commands in the next part of this guide you will run as a no-root user. Then we are ready to go.

First of all make sure you update all of your package.

sudo apt update && sudo apt upgrade -y 

Then we have to install node js and npm by

sudo apt install nodejs npm

Check your node js version by

node -v

If you haven't latest version, you can upgrade via

sudo npm cache clean -f
sudo npm install -g n
sudo n stable

Or if you want install latest version you can run sudo n latest instead of sudo n stable

If you prefer yarn instead of npm you can install it via

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt update 
sudo apt install yarn

The command above will also install Node.js . If you installed Node trough nvm, skip the Node.js installation with:

sudo apt install --no-install-recommends yarn

Check yarn version

yarn --version

Then we have to bring our nuxt application into our server. So there is possible two ways. We can clone our project from github or we can direct copy our project to our server via terminal. I will show you those two different option. You can skip this section, if you want.

From Github

git clone <your repo link>

If you use ssh key for authentication in your github account. You have to generate a ssh key and have to add your github account.

Generate ssh key by this command

ssh-keygen 

You can display your ssh key by this command

cat /home/<your host name>/.ssh/id_rsa.pub

or you can see a line something like this Your public key has been saved in /home/sium/.ssh/id_rsa.pub. Just copy the line add cat command at infront of the line. And finally add this line in your github account.

Using secure copy

scp -r /path/to/your/local/project/* your-user-name@<droplet-ip-here>:~/your-project-name/

I hope now you can able to bring your project into your server.

Now go to your project directory where package-lock.json file exist and install all the dependency and build command by

npm install 
npm run build

Now we need more automation. So that our application no need to start every time.
We’ll use PM2 — a node.js process manager. Install it:

sudo npm install pm2 -g

pm2 start npm -- start 

Now we have to install nginx.

sudo apt install nginx

Next we will create a basic configuration for one project, but in the future you can duplicate it and run a lot of different node.js applications and domains on one droplet.

sudo nano /etc/nginx/sites-available/your-domain-name.com

In this file put the following content (remember to change “your-domain-name.com” phrase to your real domain name)

server {
    listen 80;
    listen [::]:80;
    index index.html;
    server_name domain.com www.domain.com;

    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;

        # Add these lines
        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;

        # Add timeout settings
        proxy_read_timeout 60s;
        proxy_connect_timeout 60s;
        proxy_send_timeout 60s;
    }

    # Add error log for this specific site
    error_log /var/log/nginx/video.livemcq.com.error.log;
    access_log /var/log/nginx/video.livemcq.com.access.log;
}

Now all of the incoming traffic to your-domain.com on default http 80 port will be redirected to localhost:3000.

And link our new config file to the sites available directory:

sudo ln -sf /etc/nginx/sites-available/your-domain-name.com /etc/nginx/sites-enabled/your-domain-name.com

Finally we can check if our nginx file doesn't have any error by:

sudo nginx -t
sudo systemctl restart nginx

And finally now we can see our NUXT application to our desire domain. But it's not secure. Let's secure it by lets encrypt.

sudo apt install python3-certbot-nginx

Before encrypt make sure in your dns settings in digital ocean or whatever you have registered all those record like this.

sudo certbot --nginx -d your-domain-name.com -d www.your-domain-name.com

Select option 2 when it asked for do you want redirect blah blah blah.
Then finally run

sudo certbot renew --dry-run

Voila!!!!!!! we did it......