i cant connect the backend mysql and the front end nodejs on my ec2

1

i am using an unbuntu server on AWS EC2 and on the same instance i am hosting my web app(nodejs) and MySQL as the backend. i cant register a user i keep getting the error : (The requested URL was not found on this server.)

the setup on the server is like

/home/ubuntu/application
│
├── index.html
├── register.html
├── style.css
│
└── server
    ├── server.js
    ├── package.json
    ├── package-lock.json
    └── node_modules

---index.html---

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Home page</title>
    <link rel="stylesheet" href="style.css">  
  </head>
  <body>

    <nav>
      <div class="brand">Team 5</div>
      <form class="search-form">
        <input type="text" placeholder="Search...">
        <button type="submit">Search</button>
      </form>
      <ul class="menu">
          <li><a class="nav-item" href="#">Home</a>Home</li>
          <li><a class="nav-item" href="">Explore</a>Explore</li>
          <li><a class="nav-item" href="register.html">Register</a></li>
          <li><a class="nav-item" href="#">Login</a>Login</li>
          
      </ul>
    </nav>

    <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="#">Link 3</a>
      </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="/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');

const app = express();
const port = 3006;

const connection = mysql.createConnection({
  host: 'EC2 private IP',
  user: 'ubuntu',
  password: 'password',
  database: 'WebApp',
  port: '3306',
});


connection.connect((err) => {
  if (err) {
    console.error('Error connecting to MySQL:', err);
    return;
  }
  console.log('Connected to MySQL');
});

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')));

// Your route handlers come after this


app.post('/register', (req, res) => {
  const { fullName, title, agency, email, telephone, password, passwordConfirm } = req.body;

  if (password !== passwordConfirm) {
    return res.send('Passwords do not match');
  }

  bcrypt.hash(password, 10, (err, hashedPassword) => {
    if (err) {
      console.error('Error hashing password:', err);
      return res.send('Error hashing password');
    }

    const userData = {
      full_name: fullName,
      title,
      agency,
      email,
      telephone,
      password: hashedPassword,
    };

    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');
      }

      res.redirect('/index.html');
    });
  });
});

// Handle root URL ('/')
app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'application', 'index.html'));
});

// Handle GET request for /register.html
app.get('/register.html', (req, res) => {
  res.sendFile(path.join(__dirname, '../', 'register.html'));
});

/*
// Handle GET request for /index.html
app.get('/index.html', (req, res) => {
  res.sendFile(path.join(__dirname, '../', 'index.html'));
});
*/

const server = http.createServer(app);

server.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

i tried the code on my local machine and i was able to populate the users table in Mysql. i slightly modified the code to work on the ec2 after testing it on local machine.

i checked if i can connect to the ec2 instance from MySQL Workbench db on my workstation and it was successful. i also checked if i can ssh into the server from the terminal that was also successful. security group: inbound

- IPv4	SSH	TCP	22	0.0.0.0/0	–

– IPv4	MYSQL/Aurora	TCP	3306	0.0.0.0/0	–

– IPv4	HTTPS	TCP	443	0.0.0.0/0	–

– IPv4	HTTP	TCP	80	0.0.0.0/0	–

– IPv4	Custom TCP	TCP	3006	0.0.0.0/0

outbound

IPv4	All traffic	All	All

network ACL inbound

1	SSH (22)	TCP (6)	22	73.15.7.194/32	Allow
22	SSH (22)	TCP (6)	22	0.0.0.0/0	Allow
88	MySQL/Aurora (3306)	TCP (6)	3306	0.0.0.0/0	Allow
89	Custom TCP	TCP (6)	1 - 888	0.0.0.0/0	Allow
100	All traffic	All	All	0.0.0.0/0	Allow

outbound

22	SSH (22)	TCP (6)	22	0.0.0.0/0	Allow
88	MySQL/Aurora (3306)	TCP (6)	3306	0.0.0.0/0	Allow
100	All traffic	All	All	0.0.0.0/0	Allow
*	All traffic	All	All	0.0.0.0/0	Deny

i cant figure out what im missing? the document root is set : /var/www/html/application

bobby
asked 7 months ago277 views
1 Answer
0

I am curious to see what happens if you change your form action from

<form action="/register" method="POST">

To

<form action="/register.html" method="POST">

It’s not clear from your question to what point your are receiving the error message and what other settings your website has.

profile picture
EXPERT
answered 6 months ago

You are not logged in. Log in to post an answer.

A good answer clearly answers the question and provides constructive feedback and encourages professional growth in the question asker.

Guidelines for Answering Questions