DEV Community: King Isaac Nsengiyunva

Deploy a NodeJS Restful application with Docker using Nginx as the proxy-server( Ubuntu )

King Isaac Nsengiyunva — Sun, 07 Aug 2022 21:30:00 +0000

Lately, as a move towards efficient continuous integration and continuous development( CI/CD ), I have been dockerizing all my applications and running these applications inside containers using Docker. NodeJS turned out to be a hard nut to crack...but alas it's finally cracked. This is how i managed to dockerize and run a NodeJS RESTFUL app at long last.

Navigate to your preferred file system and create a directory and then change into the created directory.
$ mkdir <foldername> && cd <foldername>
Create a new nodejs app using npm or yarn by running:
$ npm init <application name>
Add your app dependencies such as Express:
$ npm install express --save
You should now have a package.json file, the node_modules folders and maybe some lock files. Create the main file this command under your app directory terminal window / shell by running: $ touch <filename>.js
5.Edit the package.json file. Add this if not existent under the scripts defintion and save the file.

"scripts": {
"start": "node <mainfile>"
}

To dockerize the app; add the following files from the terminal under the app directory file system. $ touch Dockerfile $ touch docker-compose.yml
Open and Edit the Dockerfile with the following contents.

# obtain the node image
FROM node
# change to the working directory
WORKDIR <directory_name>
#move the package file to the current working directory
COPY package*.json ./
# install the depedencies
RUN npm install
COPY . .
# run the app
CMD [ "node", <mainfile> ]

Make a new directory inside the app folder to handle the nginx configuration, cd into the folder and create a new nginx conf file. mkdir nginx && cd nginx && touch default.conf
Edit the default conf file with these contents; environment name and port should be obtained and defined in the docker-compose.yml file.

http {
 upstream backend {
   server <environment_name: port>
 }
 server {
  location / {
    proxy_pass http://backend;
  } 
 }
}

Edit the docker-compose.yml with these contents.

versions: '3',
services:
  nginx_server:
    image: nginx #image of the nginx
    volumes: 
     - './nginx/default.conf:/etc/nginx/nginx.conf'
    ports:
     - '8000:80'
  #define the node app container
  app:
   container_name: <container name>
   build:
    context: .
    dockerfile: Dockerfile #name of the dockerfile we created
  ports:
   - '3000:80' #docker container port = 3000, host port= 80
  environment:
   - APPID=3000

Deploy a python django and reactJS restful app with gunicorn, supervisor and nginx on a linux ubuntu server.

King Isaac Nsengiyunva — Tue, 05 Jul 2022 13:11:25 +0000

The task is to deploy a decoupled Application with 2 seperate services that communicate with each other using API. The frontend app written with ReactJS - a popular Javascript library - and a backend app that handles the database written in Python using the Django restframework library. The 2 apps are also hosted on the github server repository.
The React app communicates with the Django/ Server over REST HTTP methods such as POST, GET, PUT, PATCH, DELETE etc.

Step 1: staging the apps on the server

Git clone your django app on the Ubuntu server e.g. $ git clone https://github.com/<your username>/<your git repo>
Git clone your reactJS app too. You should have 2 folders listed on the server with all the files.

Step 2: Manual compile and prepare the reactJS frontend.

$ cd into your reactJS frontend folder by typing. cd <frontend folder name>
$ yarn install or $ npm install to add dependencies and packages to your app. if yarn or node is not installed on the ubuntu server, make sure you install these libraries first.
$ yarn run build to transpile the final static and bundled files.
Your frontend app will now include a build folder with the static and bundled files.

Step 3: Staging and Preparing the Django app

Create a new virtual environment for the django app by running python3 m venv <virtual env name>
Activate the virtual environment by running: source <virtual env name>/bin/activate
Install all dependencies for the django app by running: pip install -r requirements.txt
Install Gunicorn if not already installed by running: pip install gunicorn

Step 4: Create a Gunicorn shell script to execute the django app

Change user to root by logging as root user.
Create a gunicorn shell script preferably in the same folder as the django app e.g. gunicorn.sh.
An example draft template of this gunicorn script should look like this:

#!/bin/bash
NAME="<service name>" #name of the service to be run by supervisor
DJANGODIR=<path/to/django app>
USER=<user e.g. root> #you can see your user name by running command whoami
GROUP=<usergroup e.g. root>
NUM_WORKERS=<number of workers e.g. 2>
TIMEOUT=<e.g 500>
DJANGO_SETTINGS_MODULE=<app.settings<the django settings file>>
DJANGO_WSGI_MODULE=<app.wsgi< the wsgi file>>
PORT=<8500>
LOCAL_IP=<127.0.0.1>

echo "Starting $NAME as `whoami`"

cd $DJANGODIR
source <path/to/virtualenv/bin/activate> #run the virtual environment
export DJANGO_SETTINGS_MODULE=$DJANGO_SETTINGS_MODULE #set the global variable to the settings file
export PYTHONPATH=$DJANGODIR:$PYTHONPATH #set your django app directory as python path

exec <path/to/virtualenv/bin/gunicorn ${DJANGO_WSGI_MODULE} >
--name $NAME \
--workers $NUM_WORKERS \
--timeout $TIMEOUT \
--user=$USER --group=$GROUP \
--pythonpath=<path/to/virtualenv/bin \
--log-level=debug \
--bind=$LOCAL_IP:PORT \
--logo-file=-

Run the gunicorn shell script by executing ./gunicorn.sh

Step 5: Configure the Supervisor

Supervisor in this case scenario is responsible for running the django service. Before you proceed, make sure the supervisor library /package is correctly installed on the Ubuntu VPS.
check the current service list by running $ sudo supervisorctl status This will display a list of service names available.
Add a New Service as set in the gunicorn.sh script above by navigating to $ cd /etc/supervisor/conf.d. Then create your service conf file e.g sudo nano <name.conf>
To update the supervisor list. Run supervisorctl reread. This command will make your configuration changes available.

Step 6: Add Nginx to serve the applications

Nginx will serve both our applications on the default port 80. Make sure the nginx library or package is installed on the Ubuntu machine.
Navigate to the nginx folders as: $ cd /etc/nginx/sites-available and create a new conf file for your application configuration.
Create a conf file as <sudo nano name.conf>
Add a server block as shown below:

server {

        server_name <name/your preferred domain name>;

        proxy_read_timeout 300;
        proxy_connect_timeout 300;
        proxy_send_timeout 300;


        location / {
            root /path/to/react/frontend/build;
        }
        location /api/v1 {
            proxy_pass http://<localhost>:<port name configured in gunicorn shell script >;
        }
}

The server block above shows includes 2 location directives.
The root folder directive serves the reactjs build folder that includes the index.html file.
The location directive <server name/ap1/v1> will serve the django rest server using a proxy pass address.

Happy Coding!

Working with JavaScript: Coding Challenge 1

King Isaac Nsengiyunva — Thu, 20 Feb 2020 15:20:25 +0000

Given a coding challenge; it can be done in any language of your choice. I chose to use Javascript and came up with a nice cool working algorithm.
I wanted to share this with everyone so that we can learn, share, and improve the algorithm.
Challenge: You have an array of random numbers; Create a function that will accept an input and output values for each of the following tasks.

If an input is parsed to the function, check if the the input exists in the array and return that input value.
[ 5,9, 10, 12, 24 ] //if 5 is parsed to the function, return 5
If an input parsed to the function exceeds the largest value in the array, return the current largest value in the array.
[ 12,53, 59, 250, 150 ] //if user parses a value of 500, return the largest value in array which is 250
if an input parsed is not present in the array but lies between any of the array element values, then return the minimum value in the array closest to the parsed input. e.g.
Given an array as shown below:
[ 50, 23, 69, 75, 20, 150 , 34 ] //if the user parses the value of 70, 70 lies between 69 and 75, and so we return the closest minimum value = 69
If the input parsed to the function is less than the smallest value among all the array element values, then return a message.
[ 4, 10, 8, 12, 24 ] //if the input parsed value = 2, then return a message "value is not available"

These are the main tasks for the algorithm. I have created a sandbox for my JavaScript; you can follow and the link and view the code and console for the results here

However, here is my solution explained; The given array is initialized as follows. I create a function called fnCheckValue


 var arr = [ 2, 8, 10, 12, 148, 24, 150, 74, 6, 45, 34, 850 ];
function fnCheckValue( input ) {

}

First, i check if the input is a number and is not an string/ or any other data type.


  if(parseFloat(input) > 0) {
  //proceed with code
  }

I then sort the array numbers from lowest to largest, then i store the largest value in the array. I also have an empty array for the dynamic values.


 var sortedArray = arr.sort( (a, b) => a - b  );
 var largestValue = sortedArray[sortedArray.length - 1];
 var smallestValue = sortedArray[0];
 let newArray = [];

I then check if the parsed input exists in the array. for this, i use the javaScript function indexOf(arrayElement) explained here
This returns the first index at which the element is within an array. if the element does not exist in the array, the result is -1.
if the value exists in the array, we return that value and stop execution.


  var doesValueExists = sortedArray.indexOf(input);
  if(doesValueExists === -1 ){
   //value does not exist in the array
  }

At the stage, we have fulfilled one condition. Next we check if the value exceeds the largest value in the array.
Also if the input is less than the smallest value in the array, we return the message accordingly.


   if(doesValueExists === -1 ){
     if(input > largestValue ){
       return largestValue;
     }
     if( input < smallestValue){
       return 'not available';
    }

if the input lies between a range of values between the array elements, we need to check the entire array and obtain the minimum value closest to the input value.


 sortedArray.forEach( (value) => {
  if( value > input ){
   newArray.push(value);
  }
 });

We then sort this new array from ascending to descending. The first element in the array will be the lowest and the minimum value.
We then go and find the index of this value in the original sorted array.


 //sort this new array and obtain the first element
 let minValue = newArray.sort( (a,b) => a - b )[0];

 let minValueIndex = sortedArray.indexOf( minValue );

Now since we know the index of this minimum value, we can go ahead and get its neighbour and return this.


  return sortedArray[minValueIndex-1];

And that's our little cool function that works, to run the application just by invoking the function with a parameter.


 console.log('value is ',fnCheckValue(2));

That's it. Feel free to suggest improvements and workarounds, and maybe even tests. There is something cool i re-learned today, its called time complexity. The amount of time it takes for the algorithm to execute, we can also improve
the time complexity of this little algorithm.

Thanks alot devs.

Lets learn, lets share, lets code.