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>© 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