Mini-Project: Deploying JavaScript Application with Nginx

4 min readAug 3, 2020

Well, today my mood is very supportive right now for writing, so I use this mood as fully as possible. Because the arising of this mood cannot be planned or made up, even very unusually appear.

Nearly the same as the previous article, this time I’ll deploy a simple JavaScript application with Nginx.

Node.js

Node.js is an open-source, cross-platform, JavaScript runtime environment that executes JavaScript code outside a web browser. If you don’t have it before, I’ll provide how to install it later.

NPM

NPM is a package manager for the JavaScript programming language. It is the default package manager for the JavaScript runtime environment Node.js. It consists of a command-line client, also called npm, and an online database of public and paid-for private packages called the npm registry. Node Package Manager also provided when you install Node.js.

Nginx

Nginx is a web server that can also be used as a reverse proxy, load balancer, mail proxy, and HTTP cache. It’s easy to install that only using this clean line.

# apt install nginx

Check the version of it just to make sure…

# nginx -v
nginx version: nginx/1.18.0 (Ubuntu)

To make sure again for you that have a trust issue, you can check on your web by submitting your VM’s IP. By default, Nginx running on port 80, but you can change to another port if you have another service that runs on port 80.

Step 1 — Setting Up Environment

- Add latest Node.js repository

# curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -

- Install the service

# apt install nodejs

- Check the version

# node -v
v14.7.0
# npm -v
6.14.7

- Install some packages

Express Generator is an application generator tool to quickly create an application skeleton.

PM2 is an advanced process manager for production Node.js applications. Load balancer, logs facility, startup script, microservice management, at a glance.

# npm install express-generator pm2 -g

We install those packages globally on our system, not isolated.

Step 2 — Create the Application

- Generate the application

# express node-app

- Install the application

Go to the project directory and install all dependencies needed by the app.

# cd node-app
# npm install

- Start the application

# DEBUG=node-app:* npm start

- Check the application

By default, the express application will run on port 3000.

Step 2 — Setting Up Node Manager

- Check start command script

Display the content of package.json using cat command.

# cat package.json

As you can see, start under the scripts block line contains a command that is used by Node.js to start the express application. This command will use with the pm2 process manager.

{
  "name": "node-app",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "express": "~4.16.1",
    "http-errors": "~1.6.3",
    "jade": "~1.11.0",
    "morgan": "~1.9.1"
  }
}

- Run the application

Run the express application with the pm2

# pm2 start ./bin/www

Now, our Node.js application running on background and managed by pm2.

Step 2 — Configure Nginx

- Create a configuration file

Configure Nginx to pass web requests to that socket by making some small additions to its configuration file.

# nano /etc/nginx/sites-available/node-app

Create a configuration file named node-app within the /etc/nginx/sites-availabledirectory. Open up a server block and tell Nginx to listen on the default port 80.

Add a location block that matches every request. Within this block, we’ll include the proxy_params file that specifies some general proxying parameters that need to be set. We’ll then pass the requests to the socket we defined using the proxy_pass directive.

server {
 listen 80;
 listen [::]:80;location / {
 include proxy_params;
 proxy_pass http://127.0.0.1:3000;
 }
}

- Enable the configuration

To enable the Nginx server block configuration we’ve just created, link the file to the sites-enabled directory.

# ln -s /etc/nginx/sites-available/node-app /etc/nginx/sites-enabled

- Test the configuration syntax

Test for in case there are syntax errors.

# nginx -t

- Restart the service

If the test does not indicate any issues, we can restart the Nginx process to read the new config.

# systemctl restart nginx

- Check the service

You should now be able to go to your VM’s IP in your web browser and see your app running.