Unable to Access Server Images When Hosting Node.js Application on Apache with DNS Forwarding

Unable to Access Server Images When Hosting Node.js Application on Apache with DNS Forwarding

I'm running a virtual server with Ubuntu 22.x.x and hosting a Node.js application on an Apache server. I'm attempting to forward DNS to this application. However, when DNS forwarding is set up, clients are unable to access images served from the server

Steps Taken:

• Configured VirtualHost on Apache server and the Node.js application is running.
• Properly configured DNS forwarding for my domain (e.g., example.com) and updated DNS records.
• When entering the domain (example.com) in the browser, the Node.js application is accessible, but the images are not.

Apache VirtualHost configuration:

<VirtualHost *:80>ServerName ykaan.com.trProxyRequests OffProxyPreserveHost OnProxyVia Full<Proxy *>Require all granted</Proxy>ProxyPass / http://127.0.0.1:5000/ProxyPassReverse / http://127.0.0.1:5000/</VirtualHost>

Node.js App.js

import express from "express";import cors from "cors";import dbConnect from "./db/dbConnect.js";import userRouters from "./routes/userRouters.js";import courseRouters from "./routes/courseRouters.js";import adminRouters from "./routes/adminRouters.js";import categoryRouters from "./routes/categoryRouters.js";import session from "express-session";import connectMongo from "connect-mongodb-session";import authMiddlewares from "./middlewares/authMiddlewares.js";import fileUpload from "express-fileupload";import { dirname, resolve } from "node:path";import { fileURLToPath } from "node:url";import path from "path";import dotenv from "dotenv";import { config } from "dotenv";dotenv.config();const __filename = fileURLToPath(import.meta.url);const __dirname = dirname(__filename);const app = express();// MongoDBStore oluşturulduconst MongoDBStore = connectMongo(session);// Database connectiondbConnect(); // MongoDB veritabanına bağlantıyı oluşturan fonksiyon// Middlewaresapp.use(cors()); // Cross-Origin Resource Sharing (CORS) izinleriapp.use(express.json()); // JSON veri analizi middlewareapp.use(express.urlencoded({ extended: true })); // URL-encoded veri analizi middlewareapp.use(fileUpload());app.use(express.static(path.join(__dirname, "build")));// Session middlewareconst store = new MongoDBStore(                                                                                       {    uri: process.env.DB_URL,    collection: "sessions",  },  (error) => {    if (error) {      console.error("Error connecting to MongoDB for sessions:", error);    }  });app.use(  session({    secret: "my-secret-key", // Session verilerini güvence altına almak için gizli anahtar    resave: false,    saveUninitialized: true,    store: store, // MongoDBStore kullanarak session verilerini depolama    cookie: {      secure: false,      httpOnly: true,      maxAge: 24 * 60 * 60 * 1000, // 24 saat    },  }));// Routesapp.use("/api/admin",  authMiddlewares.isLoggedIn,  authMiddlewares.isAdmin,  adminRouters);app.use("/api/users", userRouters);app.use("/api/courses", courseRouters);app.use("/api/categories", categoryRouters);app.get("*", (req, res) => {  res.sendFile(path.join(__dirname, "build", "index.html"));});app.get("/public/uploads/:file", (req, res) => {  const filePath = resolve(__dirname, "public", "uploads", req.params.file);  res.sendFile(filePath, {    maxAge: 24 * 60 * 60 * 1000 * 30,  });});app.listen(5000, () => {  console.log("Server is running on port 5000");});

Client side image urlhttp://ykaan.com.tr/public/uploads/image_react.webp

DNS A and CNAME configurationenter image description here

Environment InformationNode version : 18.19.1Apache version : 2.4.52

Tried:

• Configuring the Apache VirtualHost to serve a Node.js application.
• Setting up DNS forwarding for the domain.
• Ensuring that the Node.js application is accessible through the domain after DNS forwarding.

Expectation:

After configuring the Apache VirtualHost and setting up DNS forwarding, I expected the Node.js application to be accessible via the domain name and for all resources, including images, to be loaded correctly. Specifically, when accessing the domain in a web browser, I expected the images served by the Node.js application to be displayed without any errors. However, despite the application being accessible, the images are not loading, and I'm encountering the mentioned error.