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

Question

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.tr
ProxyRequests Off
ProxyPreserveHost On
ProxyVia 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şturuldu
const MongoDBStore = connectMongo(session);

// Database connection
dbConnect(); // MongoDB veritabanına bağlantıyı oluşturan fonksiyon

// Middlewares
app.use(cors()); // Cross-Origin Resource Sharing (CORS) izinleri
app.use(express.json()); // JSON veri analizi middleware
app.use(express.urlencoded({ extended: true })); // URL-encoded veri analizi middleware
app.use(fileUpload());
app.use(express.static(path.join(__dirname, "build")));

// Session middleware
const 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
    },
  })
);

// Routes
app.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 url http://ykaan.com.tr/public/uploads/image_react.webp

DNS A and CNAME configuration enter image description here

Environment Information Node version : 18.19.1 Apache 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.