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
gefragt vor 7 Monaten288 Aufrufe
1 Antwort
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
EXPERTE
beantwortet vor 7 Monaten

Du bist nicht angemeldet. Anmelden um eine Antwort zu veröffentlichen.

Eine gute Antwort beantwortet die Frage klar, gibt konstruktives Feedback und fördert die berufliche Weiterentwicklung des Fragenstellers.

Richtlinien für die Beantwortung von Fragen