Step By Step Deploying of Nuxt.js SSR App in Digital Ocean Droplet from Gitlab

shape
shape
shape
shape
shape
shape
shape
shape
Step By Step  Deploying of Nuxt.js SSR App in Digital Ocean Droplet from Gitlab

In this tutorial i will take you through, the process of installing Nuxt.js in an already configured digital ocean server. We shall be using the Nginx Server and linux.

Accessing your droplet via SSH

ssh username@ip_address

//for my instance ssh root@178.45.375.49

You might be prompted for a password if you are using password authentication.

Clone your project from Gitlab/ Github Repository

Cloning is the process of downloading your project from the gitlab repo, to clone a project use the following command

git clone <repository path>

You can clone using HTTPS or SSH, cloning using HTTPS will prompt for authentication details each time you pull or push.

  • HTTPS: 

           git clone https://gitlab.com/gitlab-org/gitlab.git

  • SSH: 

          git clone git@gitlab.com:gitlab-org/gitlab.git

After cloning your project you need to move  into the project, suppose your project is called orders 

$         cd orders

 

Install Node and NPM

You need to install nodejs and npm, run the command below

//run the command below if you are using debian based system(Ubuntu, Debain)

$     sudo apt-get install nodejs npm

for RHEL based system (centos, Red Hat)

$     yum install nodejs npm

when prompted if you are sure type  y to proceed

 

Configuring Nginx Server

Having presumed we have a Nginx server installed, we need to configure it for our Nuxt application to Run, For VestaCp my Nginx configuration is in /home/levis/conf/web/domain_name.nginx.ssl.conf, the path might vary according to your installation. Locate the following block of code within 

location / {

}

and replace the whole of it with 

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;

    }

Check if you Nginx has any error after saving using the command

$                   sudo nginx -t

 

if it is correctly configured you will see 

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok  

  nginx: configuration file /etc/nginx/nginx.conf test is successful

After Changing Nginx Configuration you need to Restart it for the changes to take effect, restart using the following command

#        systemctl restart nginx

 

Configuring Nuxt

Create an Environment File using Vim

#        vim .env

press i to enter insert mode, type 

NODE_ENV=production

press : (fullcolon) to enter last line mode and press wq  to save and quit

Run the following Commands

 #           npm install
 #           npm run build
#            npm install nuxt

Install PM2

PM2 is a production process manager for Node.js applications with a built-in load balancer. 

It allows you to keep applications alive forever, to reload them without downtime and to facilitate common system admin tasks

to install it run the following command

 #      sudo npm install pm2 -g

run the following command to start it

#    pm2 start npm -- start

 

Your application will be up and running, if you have made changes to your local copy, you can push it to the server and rerun 

npm run build 

this will rebuild your application with the latest changes

Leave a Reply

Your email address will not be published. Required fields are marked *