Deploying a Nuxt SSR App to VPS

Hi there, in this article, I will show you how to host your nuxt.js ssr app on vultr.com vps server. I wouldn’t like to bore you with loads of explanation, rather let’s go through a quick step-by-step approach to going live with your ssr application.

NB:
1) I assume you already have created a nuxt.js ssr application on you local machine.
2) the article wont capture the process of creating a vps server on vultr.com or vps service provider.

Setting up your VPS server (Ubuntu 21.04 x64)

Ssh into your server eg. “ssh root@192.248.132.3”

ssh host_name@ip_address

Install nodejs and npm

apt-get install nodejs npm
----> run node -v and npm -v to confirm installation was successfully

Install nginx on your server

apt install nginx

Configure nginx to serve your project files

cd /etc/nginx/sites-available
touch my_project  
----> can be any name of your choice
vi my_project     
----> you could use nano or any other editor

Enter the configuration below in the “my_project” config file

server {
    listen 80;
    listen [::]:80;
    index index.html;
    server_name 192.248.132.3; #replace this with your server ip
    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 your config file to the nginx enabled sites by creating a symbolic link of the config file to /etc/nginx/sites-enabled and start the nginx server

ln -s /etc/nginx/sites-available/my_project /etc/nginx/sites-enabled/
nginx -t   
----> to make sure your nginx config was rightly configured
service nginx restart

Create a html container (/var/www/html) to house your project files. Note that these folders may already exist. If so, then skip this step.

cd /var
mkdir www
cd www
mkdir html          
----> your nuxt project goes here

Upload and Serve Nuxt Application

Open your project in a new terminal. Don’t close your ssh terminal yet.

cd /local_path_to_your_project

Delete the “.nuxt”, “node_modules”, and “dist” folders from your project.

rm -r .nuxt node_modules dist

Transfer your local project files in to the “html” folder on your server.

scp -r your-project {{server_host}}@{{server_ip}}:/var/www/html/
----> you will be prompted to enter your server's password
----> "your-project": the name of your project folder as it is on your local machine
----> "server_host": the username you use to sign in to your server
----> "server_ip": your server's IP Address

Confirm your project is now available in the “/var/www/html” folder on your server. If it is, You can now install all project dependencies and start your nuxt app

cd /var/www/html/your_project
npm install
npm run build
npm run start

Enter your server IP address in your browser to load your application which confirms your application is now live.
Sadly, you realise that your app is no more available after you close the terminal or exit the “npm run start” command.

Here’s a fix!
You need to tell the server to run your application on the background. To do that, you will need to use PM2

Setting up PM2

If you have your application still running, quit it.

Install pm2 globally on your server

npm install pm2 -g

Finally, start your application with pm2

pm2 start npm -- start

You’re all set!!! Your app runs even when you quit the ssh or exit the terminal.