DEV Community

Cover image for Set up & deploy Nuxt.js Web Application on Ubuntu 22.04 LTS
sium_hossain
sium_hossain

Posted on • Updated on

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 


Enter fullscreen mode Exit fullscreen mode

Then we have to install node js and npm by



sudo apt install nodejs npm


Enter fullscreen mode Exit fullscreen mode

Check your node js version by



node -v


Enter fullscreen mode Exit fullscreen mode

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



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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

Check yarn version



yarn --version


Enter fullscreen mode Exit fullscreen mode

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>


Enter fullscreen mode Exit fullscreen mode

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 


Enter fullscreen mode Exit fullscreen mode

You can display your ssh key by this command



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


Enter fullscreen mode Exit fullscreen mode

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/


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode


pm2 start npm -- start 


Enter fullscreen mode Exit fullscreen mode

Now we have to install nginx.



sudo apt install nginx


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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 your-domain-name.com www.your-domain-name.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;
    }
}


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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



sudo nginx -t
sudo systemctl restart nginx


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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

dns settings image in digital ocean



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


Enter fullscreen mode Exit fullscreen mode

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



sudo certbot renew --dry-run


Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)