How to Deploy Fullstack with Nginx on Digital Ocean

How to Deploy Fullstack with Nginx on Digital Ocean

How to Deploy Fullstack with Nginx on Digital Ocean. .Hi folks, Let’s deploy your full-stack application around the world using Digital Ocean .

Hi folks, Let’s deploy your full-stack application around the world using Digital Ocean .

I am going to present a simple step-by-step guide to deploy a full-stack(VUE+ NODE) on Digital Ocean. We will be mostly focusing on Nginx. It’s very simple with Nginx. This guide is very much similar for React developers.

This guide assumes that you have your Digital Ocean server running.

If you don’t have a Digital Ocean server ready**, **then click here to setup your Digital Ocean Server: Initial Server Setup with Ubuntu 16.04

I have my full-stack application ready in my local machine.

About My Application:

Frontend: Vue.js, Backend: Node.js

My Node.js server is running on port 3000. and the Vue application is running on port 8080.

Vue.js application makes a GET request on _http:localhost:3000/users?id=1_to get the details about user 1.

Upload your frontend and backend source code to github repository. In case you need help check this : Adding an existing project to GitHub .

Login to your server:

We will be using root user. I recommend you to add a sudo user and try things with that user. HOW TO CREATE SUDO USER ?

ssh [email protected]_DROPLET_IP
cd /home

We are working inside /home because Nginx will not have permissions to access files in root folder.

Preparation:

We need to set up a few things before we move to the next steps.

1: Node and NPM

2: Git

3: PM2

4: Nginx

and install them if you don’t have already.

Install Node and NPM:

Run the following command:

curl -sL [https://deb.nodesource.com/setup_5.x](https://deb.nodesource.com/setup_5.x "https://deb.nodesource.com/setup_5.x") | sudo -E bash -
sudo apt-get install -y nodejs

Install Git:

sudo apt-get install git

Install PM2:

npm i -g pm2

What is PM2?

PM2 is a production process manager for Node.js applications (with a built-in load balancer). Simply, allows you to keep applications alive forever.

Install Nginx:

sudo apt-get install nginx -y

What is NGINX?
Nginx is open source high-performance HTTP Server. It is one of the most popoular web server because it is know for it’s stability, high performance, simple configuration.

Step 1: Setting up the project

1.1 Setting up Node.js project

Clone your backend project from GitHub.

git clone https://github.com/harshittpandey/backend-app

Go inside the folder and install dependencies.

cd backend-app && npm install

1.2 Setting up Vue.js project

Clone your frontend project from Github.

git clone https://github.com/harshittpandey/frontend-app

Go inside the folder and install the required dependencies.

cd frontend-app && npm install

Let’s bundle our code for production using this command.

npm run build
Step 2: Hosting Application

Step 2.1 Hosting node.js application using PM2

Before hosting your node.js application let’s check if the API is working fine.

I am running my app using npm start because I am using express-generator. You can run node app.js also.

cd backend-app && npm start

If It’s working fine then move to the next step.

It’s time to use our process management tool (PM2).

cd backend-app
pm2 start npm --name "app" -- start

If you’re using node app.js. then do,

pm2 start app.js

Now, pm2 will keep your application alive.

2.2 Deploying Vue.js application using Nginx

As we have already donenpm run build .

We just need to configure NGINX.

cd /etc/nginx/sites-available/
nano default

Cut out all lines with Ctrl+K. and copy this code there with your IP Address.

server {
        server_name YOUR_DROPLET_IP;
        listen 80;
 
        error_page 404 /index.html;
        location ~ ^/(api|images)/ {
         proxy_pass http://localhost:3000;
         proxy_http_version 1.1;
        }
        location / {
         alias /home/frontend-app/dist/; 
        }
}

What am I doing here ?

server_name will be your dropletIP for which it will listen for requests.

then I am checking

If there is any match for /api or /img in the request, then forward the request to localhost:3000/ where our node.js server is running.

Otherwise map the url to the file(index.html) located at /home/frontend-app/dist/

Step 3: Test and Reload Nginx

3.1 First of all, check if the configurations are valid.

sudo nginx -t

Check if the test is successful.

3.2 Let’s reload Nginx
sudo systemctl restart nginx

Now It’s time to verify if our server is working or not.

Perfect, It’s working fine. NGINX is handling all the request i.e.

1: forwarding request to localhost:3000 that belongs to server like /api or /image .

2: mapping URL that belongs to vue app.

I hope that this step by step guide was easy to understand. In case you have any issue please comment.

Nginx Commands - Every Developer Should Know

Nginx Commands - Every Developer Should Know

In this guide, we will go over the most important and frequently used Nginx commands, including starting, stopping, and restarting Nginx.

Nginx pronounced “engine x” is a free, open-source, high-performance HTTP and reverse proxy server responsible for handling the load of some of the largest sites on the Internet. It can be used as a standalone web server, and as a reverse prox for Apache and other web servers.

If you are a developer or system administrator, chances are that you’re dealing with Nginx on a regular basis.

In this guide, we will go over the most important and frequently used Nginx commands, including starting, stopping, and restarting Nginx.

Before You Begin

We’re assuming that you are logged in as root or user with sudo privileges. The commands in uide this gshould work on any modern Linux distribution like Ubuntu 18.04 and CentOS 8 and Debian 10.

Starting Nginx

Starting Nginx is pretty simple. Just run the following command:

sudo systemctl start nginx

On success, the command doesn’t produce any output.

If you are running a Linux distribution without systemd to start Nginx type:

sudo service start nginx

Instead of manually starting the Nginx service, it is recommended to set it to start on system boot:

sudo systemctl enable nginx
Stopping Nginx

Stopping Nginx quickly shuts down all Nginx worker processes even if there are open connections.

To stop Nginx, run one of the following commands:

sudo systemctl stop nginx
sudo service stop nginx
Restarting Nginx

The restart option is a quick way of stopping and then starting the Nginx server.

Use one of the following commands to perform an Nginx restart:

sudo systemctl restart nginx
sudo service restart nginx

This is the command that you will probably use the most frequently.

Reloading Nginx

You need to reload or restart Nginx whenever you make changes to its configuration.

The reload command loads the new configuration, starts new worker processes with the new configuration, and gracefully shuts down old worker processes.

To reload Nginx, use one of the following commands:

sudo systemctl reload nginx
sudo service reload nginx
Testing Nginx Configuration

Whenever you make changes to the Nginx server’s configuration file, it is a good idea to test the configuration before restarting or reloading the service.

Use the following command to test the Nginx configuration for any syntax or system errors:

sudo nginx -t

The output will look like below:

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

If there are any errors, the command prints a detailed message.

Viewing Nginx Status

To check the status of the Nginx service, use the following command:

sudo systemctl status nginx

The output will look something like this:

nginx.service - A high performance web server and a reverse proxy server
   Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset: enabled)
   Active: active (running) since Sun 2019-04-21 13:57:01 PDT; 5min ago
     Docs: man:nginx(8)
  Process: 4491 ExecStop=/sbin/start-stop-daemon --quiet --stop --retry QUIT/5 --pidfile /run/nginx.pid (code=exited, status=0/SUCCESS)
  Process: 4502 ExecStart=/usr/sbin/nginx -g daemon on; master_process on; (code=exited, status=0/SUCCESS)
  Process: 4492 ExecStartPre=/usr/sbin/nginx -t -q -g daemon on; master_process on; (code=exited, status=0/SUCCESS)
 Main PID: 4504 (nginx)
    Tasks: 3 (limit: 2319)
   CGroup: /system.slice/nginx.service
           |-4504 nginx: master process /usr/sbin/nginx -g daemon on; master_process on;
           |-4516 nginx: worker process
           `-4517 nginx: worker process
Checking Nginx Version

Sometimes you may need to know the version of your Nginx so you can debug an issue or determine whether a certain feature is available.

You can check your Nginx version by running:

sudo nginx -v
nginx version: nginx/1.14.0 (Ubuntu)

The -V option displays the Nginx version along with the configure option.

sudo nginx -V
Conclusion

In this guide, we have shown you some of the most essential Nginx commands

I hope this tutorial will surely help and you if you liked this tutorial, please consider sharing it with others. Thank you!

Making a Game in VueJS using Vuex | VueJS Tutorial

Making a Game in VueJS using Vuex | VueJS Tutorial

Today we create a Game in VueJS using Vuex to manage our state. This is an open source community driven game and I would love for you to get involved. We explore the game loop, upgrades, levelling and much more

Today we create a Game in VueJS using Vuex to manage our state. This is an open source community driven game and I would love for you to get involved. We explore the game loop, upgrades, levelling and much more. We looking into VueJS lifecycle methods as well as Vuex mutations, getters and state.

A Javascript Project

Day 15 #31Days31Videos

Build a Product Card Parallax using VueJS VueJS Tutorial for beginners

Build a Product Card Parallax using VueJS VueJS Tutorial for beginners

Learn how to use VueJS to create parallax product cards. We use VueJS Components, directives and hooks to create a modern designed product card that uses the event listener ‘mousemove’ to implement a parallax effect to the elements on the VueJS Product card

Learn how to use VueJS to create parallax product cards. We use VueJS Components, directives and hooks to create a modern designed product card that uses the event listener ‘mousemove’ to implement a parallax effect to the elements on the VueJS Product card.

A Javascript Project

Day 8 #31Days31Videos

Source Code: https://github.com/TylerPottsDev/vue-product-card-parallax