Ошибка 404 при обслуживании файлов за пределами общедоступного каталога в Next.js 14 ⇐ Apache

[Anonymous]

Я создаю приложение Next.js 14, работающее в контейнере Docker, куда пользователи могут загружать изображения. Эти изображения хранятся за пределами общей папки в папке «Сервер/загрузки» (общие доступны через Samba на моем домашнем сервере), и мне нужно, чтобы они были немедленно доступны во время выполнения без необходимости пересборки приложения. Я использую Apache в качестве обратного прокси-сервера для обслуживания изображений, но при попытке доступа к ним я получаю ошибку 404, хотя вижу, что изображение успешно загружено в правильную папку.
Путь загрузки изображения:

Код: Выделить всё

// Set the base upload directory on the server-side
const baseUploadPath = path.join(__dirname, "../uploads");

if (!fs.existsSync(baseUploadPath)) {
fs.mkdirSync(baseUploadPath, { recursive: true });
}

// Multer storage setup for image uploads
const storage = multer.diskStorage({
destination: (req, file, cb) => {
const userUploadPath = path.join(baseUploadPath, req.user.id.toString()); // Create user-specific folder
if (!fs.existsSync(userUploadPath)) {
fs.mkdirSync(userUploadPath, { recursive: true });
}
cb(null, userUploadPath); // Save to user-specific folder
},
filename: (req, file, cb) => {
cb(null, Date.now() + "-" + file.originalname); // Unique filename
},
});

const upload = multer({ storage });

// Create a new spot (Protected Route)
router.post("/", authMiddleware, upload.single("image"), async (req, res) => {
try {
const { spotName, description, location } = req.body;

// Ensure location exists and split into latitude and longitude
if (!location) {
return res.status(400).json({
message:
"Location is required and should be in 'latitude, longitude' format.",
});
}

const [latitude, longitude] = location
.split(",")
.map((coord) => parseFloat(coord.trim()));

if (isNaN(latitude) || isNaN(longitude)) {
return res.status(400).json({
message: "Invalid coordinates format.  Use 'latitude, longitude'.",
});
}

// Generate the relative path for the image (e.g., /uploads/userId/image.jpg)
const imagePath = req.file
? `/uploads/${req.user.id}/${req.file.filename}`
: null;

// Create the new spot
const newSpot = await Spot.create({
spotName,
description,
location,
latitude,
longitude,
image: imagePath,
userId: req.user.id, // Authenticated user ID
});

res.status(201).json(newSpot);
} catch (error) {
res.status(500).json({ message: "Failed to add the spot" });
}
});

Вот мой файл конфигурации apache2:

Код: Выделить всё

ServerName caligo.site
ServerAlias www.caligo.site

ProxyPreserveHost On

# Update all backend routes to include /api prefix
ProxyPass "/api/auth" "http://localhost:3001/api/auth"
ProxyPassReverse "/api/auth" "http://localhost:3001/api/auth"

ProxyPass "/api/comments" "http://localhost:3001/api/comments"
ProxyPassReverse "/api/comments" "http://localhost:3001/api/comments"

ProxyPass "/api/spots" "http://localhost:3001/api/spots"
ProxyPassReverse "/api/spots" "http://localhost:3001/api/spots"

ProxyPass "/api/users" "http://localhost:3001/api/users"
ProxyPassReverse "/api/users" "http://localhost:3001/api/users"

# Serve the uploads directory directly
Alias "/uploads" "/home/sambauser/shared_folder/web servers/CaliGo/Server/uploads"

Options Indexes FollowSymLinks
AllowOverride None
Require all granted


EnableMMAP off

# Route all other paths to frontend on port 3000
ProxyPass "/" "http://localhost:3000/"
ProxyPassReverse "/" "http://localhost:3000/"

Проблемы:

• Загруженные изображения недоступны по маршруту /uploads, что приводит к ошибке 404.< /li>
  Файлы хранятся на моем домашнем сервере с использованием Samba для совместного использования файлов, а сервер Apache настроен для их обслуживания.

Вот мой Dockerfile в папке моего клиента:

Код: Выделить всё

# Dockerfile for Next.js frontend
# Use the official Node.js image
FROM node:18-alpine

# Set the working directory
WORKDIR /app

# Set environment variable for production
ENV NODE_ENV=production

# Copy package.json and package-lock.json
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of the application code
COPY . .

# Build the Next.js app
RUN npm run build

# Expose the port Next.js runs on
EXPOSE 3000

# Start the Next.js app
CMD ["npm", "start"]

А вот мой серверный файл Docker:

Код: Выделить всё

# Dockerfile for Node.js backend
FROM node:18-alpine

# Install dependencies for bcrypt on Alpine
RUN apk add --no-cache python3 make g++

WORKDIR /app

COPY package*.json ./
RUN npm install

COPY .  .

# Expose the backend port
EXPOSE 3001

# Wait for MySQL to be available, then start the server
CMD /bin/sh -c "while ! nc -z mysql 3306; do echo 'Waiting for MySQL...'; sleep 3; done && node server.js"

Наконец, вот мой файл для создания докера:

Код: Выделить всё

version: "3.8"

services:
frontend:
build:
context: ./client
dockerfile: Dockerfile
ports:
- "3000:3000"
env_file:
- .env  # Use .env for environment variables
depends_on:
- backend
volumes:
- ./client/public:/app/public  # Map the frontend public folder for static assets

mysql:
image: mysql:8.0
environment:
MYSQL_DATABASE: db
MYSQL_ROOT_PASSWORD: password
volumes:
- mysql_data:/var/lib/mysql  # Persistent storage for MySQL database
ports:
- "3307:3306"

backend:
build:
context: ./Server
dockerfile: Dockerfile
ports:
- "3001:3001"
env_file:
- .env  # Use .env for environment variables
volumes:
- ./Server/uploads:/app/uploads  # Persistent storage for uploaded images in backend
depends_on:
- mysql

volumes:
mysql_data:  # Persistent storage for MySQL data

Что я пробовал:

• Убедиться, что права доступа к файлам в каталоге загрузок правильные.
  Тестирование маршрута с прямым доступом к изображениям вне контейнера, что также приводит к ошибке 404.

Дополнительная информация :

• Приложение работает на домашнем сервере с использованием Samba для совместного использования файлов.
• Apache настроен как обратный прокси-сервер для обслуживания внешнего и внутреннего интерфейса.
• Изображения хранятся вне общей папки Next.js, но загружаются в каталог загрузок сервера, который доступен через Samba.

Подробнее здесь: https://stackoverflow.com/questions/792 ... next-js-14