Node application api host nginx using Reverse Proxy

Node Installation

sudo apt update

sudo apt install curl

curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -

sudo apt install nodejs

node -v

npm -v

Nginx Installation

sudo apt update
sudo apt install nginx
sudo systemctl start nginx
sudo systemctl status nginx
sudo systemctl enable nginx

Nginx Reverse proxy

 sudo mv /etc/nginx/sites-available/default /etc/nginx/sites-available/default.orginal
 sudo vi /etc/nginx/sites-available/default

Edit File

  server {
    listen 80;
    listen [::]:80;

    server_name pay.venketraman.com;

    root /var/www/html;
    index index.html index.htm index.nginx-debian.html;

    location /payment {
        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_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_cache_bypass $http_upgrade;

        proxy_read_timeout 300;
        proxy_connect_timeout 300;
        proxy_send_timeout 300;
    }

    location / {
        try_files $uri $uri/ =404;
    }

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /usr/share/nginx/html;
    }
}

create index.html file in /var/www/html/


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My E-Commerce Site</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }
        header {
            background-color: #2874f0;
            color: white;
            padding: 10px 20px;
            text-align: center;
        }
        nav {
            display: flex;
            justify-content: center;
            gap: 20px;
            padding: 10px 0;
        }
        nav a {
            color: white;
            text-decoration: none;
            font-weight: bold;
        }
        .container {
            width: 90%;
            margin: 20px auto;
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }
        .product {
            background-color: white;
            border: 1px solid #ddd;
            border-radius: 8px;
            overflow: hidden;
            width: calc(33.333% - 20px);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .product img {
            width: 100%;
            height: auto;
        }
        .product-details {
            padding: 15px;
            text-align: center;
        }
        .product-details h3 {
            margin: 0;
            font-size: 1.2em;
        }
        .product-details p {
            color: #888;
            font-size: 0.9em;
        }
        .product-details .price {
            color: #2874f0;
            font-size: 1.1em;
            margin: 10px 0;
        }
        .product-details .button {
            background-color: #2874f0;
            color: white;
            padding: 10px;
            text-decoration: none;
            border-radius: 4px;
            display: inline-block;
        }
        footer {
            background-color: #2874f0;
            color: white;
            text-align: center;
            padding: 10px 20px;
            position: fixed;
            width: 100%;
            bottom: 0;
        }
    </style>
</head>
<body>
    <header>
        <h1>My E-Commerce Site</h1>
        <nav>
            <a href="#">Home</a>
            <a href="#">Products</a>
            <a href="#">About Us</a>
            <a href="#">Contact</a>
        </nav>
    </header>

    <div class="container">
        <div class="product">
            <img src="https://via.placeholder.com/300x200" alt="Product 1">
            <div class="product-details">
                <h3>Product 1</h3>
                <p>Description of Product 1</p>
                <div class="price">$19.99</div>
                <a href="/payment" class="button">Buy Now</a>
            </div>
        </div>
        <div class="product">
            <img src="https://via.placeholder.com/300x200" alt="Product 2">
            <div class="product-details">
                <h3>Product 2</h3>
                <p>Description of Product 2</p>
                <div class="price">$29.99</div>
                <a href="/payment" class="button">Buy Now</a>
            </div>
        </div>
        <div class="product">
            <img src="https://via.placeholder.com/300x200" alt="Product 3">
            <div class="product-details">
                <h3>Product 3</h3>
                <p>Description of Product 3</p>
                <div class="price">$39.99</div>
                <a href="/payment" class="button">Buy Now</a>
            </div>
        </div>
    </div>

    <footer>
        <p>&copy; 2024 My E-Commerce Site. All rights reserved.</p>
    </footer>
</body>
</html>

Create Folder Payment inside create folder public.inside public folder create payment.html.back to payment folder create server.js

add the below code in payment.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Payment Page</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 50px;
        }
        .container {
            max-width: 500px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        input[type="text"], input[type="number"] {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        button {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Payment Page</h1>
        <form>
            <label for="name">Name:</label><br>
            <input type="text" id="name" name="name" required><br>
            <label for="amount">Amount:</label><br>
            <input type="number" id="amount" name="amount" required><br><br>
            <button type="submit">Pay Now</button>
        </form>
    </div>
</body>
</html>

Add the below code in server.js file

var http = require('http');
var fs = require('fs');
var path = require('path');

http.createServer(function (req, res) {
  if (req.url === '/payment') {
    fs.readFile(path.join(__dirname, 'public', 'payment.html'), function(err, data) {
      if (err) {
        res.writeHead(500, {'Content-Type': 'text/plain'});
        res.end('500 - Internal Server Error');
      } else {
        res.writeHead(200, {'Content-Type': 'text/html'});
        res.end(data);
      }
    });
  } else {
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('SHIVAM welcomes you... here after all is good.');
  }
}).listen(3000, "127.0.0.1");

console.log('Server running at http://127.0.0.1:3000/');

now run

node server.js

Did you find this article valuable?

Support Venketraman by becoming a sponsor. Any amount is appreciated!