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......

Discussion (0)