i have setup a nodejs and mysql stack on the same ec2 instance. Ive checked the connection to the server via the public ip dns from workbench on my workstation with no problems. I also ssh into the ec2 server from the terminal with no problem. I have two simple html pages (index and register page) and then a subfolder for the server file (server.js) to connect the database in MySQL. I tried to check if i can register a user on the registration page and redirect back to the home page, but i was unsuccessful i get an error (Not Found
The requested URL was not found on this server.)
then i added a virtualhost :
GNU nano 6.2 /etc/apache2/sites-available/web-app.conf <VirtualHost *:80>
ServerName <here i put my public ipv4 dns.compute.amazonaws.com>
DocumentRoot /home/ubuntu/application
ProxyPreserveHost On
ProxyPass / http://localhost:3006/
ProxyPassReverse / http://localhost:3006/
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>
and i tried to register a user and then i got the error:
cannot get /
i am simply trying to connect the frontend to mysql db on the same ubuntu ec2 instance.
----index.html----
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
background-color: black;
}
- {
box-sizing: border-box;
}
/* Add padding to containers */
.container {
padding: 16px;
background-color: white;
}
/* Full-width input fields */
input[type=text], input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
input[type=text]:focus, input[type=password]:focus {
background-color: #ddd;
outline: none;
}
/* Overwrite default styles of hr */
hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
/* Set a style for the submit button */
.registerbtn {
background-color: #04AA6D;
color: white;
padding: 16px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
.registerbtn:hover {
opacity: 1;
}
/* Add a blue text color to links */
a {
color: dodgerblue;
}
/* Set a grey background color and center the text of the "sign in" section */
.signin {
background-color: #f1f1f1;
text-align: center;
}
/* Dropdown menu styles */
.dropbtn {
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<body style="background-color:white;">
<h2>webapp</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="register.html">Register</a> <!-- Added link to Register -->
</div>
</div>
</body>
</html>
----register.html----
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Registration Form</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
background-color: black;
}
* {
box-sizing: border-box;
}
/* Add padding to containers */
.container {
padding: 16px;
background-color: white;
}
/* Full-width input fields */
input[type=text], input[type=password], input[type=email], input[type=tel] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=tel]:focus {
background-color: #ddd;
outline: none;
}
/* Overwrite default styles of hr */
hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
/* Set a style for the submit button */
.registerbtn {
background-color: #04AA6D;
color: white;
padding: 16px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
.registerbtn:hover {
opacity: 1;
}
/* Add a blue text color to links */
a {
color: dodgerblue;
}
/* Set a grey background color and center the text of the "sign in" section */
.signin {
background-color: #f1f1f1;
text-align: center;
}
/* Add your custom CSS styles here */
#message {
color: red;
}
</style>
</head>
<body>
<form action="public IPv4/dns/register" method="POST">
<div class="container">
<h1>Register</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="fullName"><b>Full Name:</b></label><br>
<input type="text" placeholder="Enter Full Name" name="fullName" id="fullName" required><br>
<label for="title"><b>Title:</b></label><br>
<input type="text" placeholder="Enter Title" name="title" id="title" required><br>
<label for="agency"><b>Agency:</b></label><br>
<input type="text" placeholder="Enter Agency" name="agency" id="agency" required><br>
<label for="email"><b>Email:</b></label><br>
<input type="email" placeholder="Enter Email" name="email" id="email" required><br>
<label for="telephone"><b>Telephone:</b></label><br>
<input type="tel" placeholder="Enter Telephone" name="telephone" id="telephone" required><br>
<label for="password"><b>Password:</b></label><br>
<input type="password" placeholder="Enter Password" name="password" id="password" required><br>
<label for="passwordConfirm"><b>Confirm Password:</b></label><br>
<input type="password" placeholder="Confirm Password" name="passwordConfirm" id="passwordConfirm" required><br>
<div id="message"></div>
<button type="submit" class="registerbtn">Register</button>
</div>
</form>
</body>
</html>
----server.js----
const http = require('http');
const mysql = require('mysql2');
const express = require('express');
const bcrypt = require('bcrypt');
const bodyParser = require('body-parser');
const path = require('path'); // Import the 'path' module
const app = express();
const port = 3006;
// Create a MySQL connection
const connection = mysql.createConnection({
host: 'private ipv4',
user: 'ubuntu',
password: 'webapp',
database: 'WebApp',
port: '3306',
});
connection.connect((err) => {
if (err) {
console.error('Error connecting to MySQL:', err);
return;
}
console.log('Connected to MySQL');
});
// Middleware for parsing JSON and form data
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
// Serve static files from the 'application' directory
app.use(express.static(path.join(__dirname, 'application')));
// Route to handle registration form
app.post('/register', (req, res) => {
const { fullName, title, agency, email, telephone, password, passwordConfirm } = req.body;
// Check if passwords match
if (password !== passwordConfirm) {
return res.send('Passwords do not match');
}
// Hash the password before storing it in the database
bcrypt.hash(password, 10, (err, hashedPassword) => {
if (err) {
console.error('Error hashing password:', err);
return res.send('Error hashing password');
}
// Insert user data into the database
const userData = {
full_name: fullName,
title,
agency,
email,
telephone,
password: hashedPassword, // Store the hashed password
};
connection.query('INSERT INTO users SET ?', userData, (err, results) => {
if (err) {
console.error('Error inserting user data:', err);
return res.send('Error inserting user data');
}
// Redirect to the home page after successful registration
res.redirect('<public IPv4/dns>/index.html');
});
});
});
// Start the server
const server = http.createServer(app);
server.listen(port, () => {
console.log(Server running on port ${port}
);
});
---file strcture----
/home/ubuntu/application/
/home/ubuntu/application/server :
when i : curl http://localhost:3006/register curl http://localhost:3006/register.html curl http://localhost:3006/index.html curl http://localhost:3006/index i get : CANNOT GET