Set up & deploy Nuxt.js Web Application on Ubuntu 22.04 LTS
Tags: vue, ubuntu, frontend, nuxt
Published: 2022-05-21 11:58:53

## 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.
```bash 
sudo apt update && sudo apt upgrade -y 
```
Then we have to install node js and npm by 
```bash 
sudo apt install nodejs npm
```
Check your node js version by 
```bash 
node -v
```
If you haven't latest version, you can upgrade via 
```bash 
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 
```bash 
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:
```bash 
sudo apt install --no-install-recommends yarn
```
Check yarn version 
```bash 
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 
```bash 
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 
```bash 
ssh-keygen 
```
You can display your ssh key by this command 
```bash 
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 
```bash
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 
```bash 
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:
```bash 
sudo npm install pm2 -g
```
```bash
pm2 start npm -- start 
```
Now we have to install nginx.

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

```bash
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)

```bash
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;
    }
}
```
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:

```bash 
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:
```bash
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.
```bash
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.

![dns settings image in digital ocean](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/homxs89p7wrn89iwvgls.png)
```bash 
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 
```bash 
sudo certbot renew --dry-run
```
Voila!!!!!!! we did it......