Hello,
I am a rookie when it comes to server configuration but I am trying to build my first server that can host my website. I thought that it would be a good idea to practice on a virtual machine before building out the real thing and buying the domain name. My virtual machine is using Ubuntu server 22.04.
My website is a personal website with a blog that I created with react app. It also has a backend that was put together with node.js, express and mysql. The mysql database stores users, passwords, posts and photos which the frontend pulls from.
On my ubuntu server I installed apache2 and mysql-server along with yarn, nodejs and anything else that was required on my way to building it. The frontend’s landing page loads fine when I type the server’s ip address (which I will replace with <server_ipaddress> in the code) into the browser but when I try to log in which requires a password, the frontend can’t find the URL stored on the backend. I have been trying to figure it out for a week but nothing seems to work.
Here is my VirtualHost code:
<VirtualHost *:80>
ServerName <server_ipaddress>
DocumentRoot /home/matt/website/client/mjna
<Directory /home/matt/website/client/mjna>
Options Indexes FollowSymLinks
AllowOverride None
Require all granted
</Directory>
</VirtualHost>
<VirtualHost *:80>
ServerName <server_ipaddress>
DocumentRoot /home/matt/website/api
<Directory /home/matt/website/api>
Options Indexes FollowSymLinks
AllowOverride None
Require all granted
</Directory>
ProxyPreserveHost On
ProxyPass / http://<server_ipaddress>:8800/
ProxyPassReverse / http://<server_ipaddress>:8800/
</VirtualHost>
My frontend’s code related to the login page is this:
const authLogin = async(inputs) =>{
const res = await axios.post("/api/auth/login", inputs);
setCurrentUser(res.data);
And my backend’s index.js file has this:
const app = express()
app.use("/api/auth", authRoutes)
app.listen(8800, ()=>{
console.log("Connected")
})
As you can see I am using middleware with the auth.js file in my routes folder looking like this:
const router = express.Router();
router.post("/login", login)
export default router
And my auth.js file in my controller folder looking like this:
export const login = (req, res) => {
const q = "SELECT * FROM user WHERE password = ?"
db.query(q, [req.body.password], (err, data)=>{
if (err) return res.json(err);
if(data.length === 0) return res.status(404).json("Wrong Password");
const token = jwt.sign({id:data[0].id}, "jwtkey");
res.cookie("access_token", token, {
httpOnly:true,
}).status(200).json(data[0].uid);
});
}
When I enter the password on the website I get this error in the browser’s console:
POST http://<server_ipaddress>/api/auth/login 404 (Not Found)
And on the website this error pops up:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN"> <html><head> <title>404 Not Found</title> </head><body> <h1>Not Found</h1> <p>The requested URL was not found on this server.</p> <hr> <address>Apache/2.4.52 (Ubuntu) Server at <server_ipaddress> Port 80</address> </body></html>
Apache’s error log doesn’t produce any errors but the apache other_vhosts_access.log produces this error:
"POST /api/auth/login HTTP/1.1" 404 491 "<server_ipaddress>/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36"
Now I’ve checked the backend server typing in <server_ipaddress>:8800 into a browser and I get my dummy html to show that it’s working. There are no firewall issues as I have disabled it. As I understand it, maybe I’m wrong, but it seems like the frontend can’t find the router 8800. Perhaps I have something wrong with my virtualhost code but I have troubleshooted many different possibilities and nothing seems to fix this 404 error. I’m sure the error is simple as I am relatively new with server configuration but I would greatly appreciate if someone could tell me what I have wrong as I feel so close to the finish line of completing this project which has been long in the making.
Thanks,
Matt
