Cannot get images working - using Nginx Proxy Manager

[danielwerner86]

Issue

Hi!

I'm kind of new at this and am trying to get Tandoor working with Nginx Proxy Manager, and I cannot for the life of me understand how I need to configure the reverse proxy.

I've set 8080:8080 for Tandoor, and configured NPM to listen on the default 80, 81 and 443 ports. I also added this volume (not sure if it's needed?): /docker/tandoor/mediafiles:/media:ro

Then I've configured a new proxy host with this config:

Domain Names: recipes.myrealdomain.com
Scheme: http
Forward hostname/IP: my server IP
Forward Port: 8080

Everything works so far, I can reach the site but images get 404. I assume there's some mismatch with the folders but after a lot of googling I still don't understand what I'm doing wrong.

I tried adding this under "Custom locations":

Define location: /media/
Scheme: http
Forward hostname/IP: my server IP
Forward Port: 8080
Advanced parameters: root /docker/tandoor/mediafiles/; (I've tried both with and without anything there, tried alias /mediafiles/, nothing works)

I really appreciate an ELI5 here - how should I configure? :) Thank you!

Tandoor Version

1.5.19

OS Version

22.04.4 LTS

Setup

Docker / Docker-Compose

Reverse Proxy

Nginx Proxy Manager (NPM)

Other

No response

Environment file

# random secret key, use for example `base64 /dev/urandom | head -c50` to generate one
SECRET_KEY=Redacted

# allowed hosts (see documentation), should be set to your hostname(s) but might be * (default) for some proxies/provid># #ALLOWED_HOSTS=recipes.mydomain.com

# add only a database password if you want to run with the default postgres, otherwise change settings accordingly
DB_ENGINE=django.db.backends.postgresql
POSTGRES_HOST=tandoor-db
POSTGRES_DB=djangodb
POSTGRES_PORT=5432
POSTGRES_USER=djangouser
POSTGRES_PASSWORD=Redacted

DEBUG=0

Docker-Compose file

services:
  db:
    image: postgres:16-alpine
    container_name: tandoor-db
    hostname: tandoor-db
    volumes:
      - /docker/tandoor/db:/var/lib/postgresql/data
    env_file:
      - stack.env
    restart: always

  tandoor:
    image: vabene1111/recipes
    container_name: tandoor-web
    hostname: tandoor
    volumes:
      - /docker/tandoor/staticfiles:/opt/recipes/staticfiles
      - /docker/tandoor/mediafiles:/opt/recipes/mediafiles
    env_file:
      - stack.env
    ports:
      - 8080:8080
    depends_on:
      - db
    restart: always

Relevant logs

::ffff:192.168.16.1 - - [08/Oct/2024:21:47:41 +0200] "GET /media/recipes/1785aad8-b89c-4c37-9bcb-c389a60b2be8_1.jpg HTTP/1.1" 404 22549 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36 Edg/129.0.0.0"

[pscriptos]

# Serve mediafiles directly using gunicorn. Basically everyone recommends not doing this. Please use any of the examples
# provided that include an additional nxginx container to handle media file serving.
# If you know what you are doing turn this back on (1) to serve media files using djangos serve() method.
# when unset: 1 (true) - this is temporary until an appropriate amount of time has passed for everyone to migrate
GUNICORN_MEDIA=1

[danielwerner86]

# Serve mediafiles directly using gunicorn. Basically everyone recommends not doing this. Please use any of the examples
# provided that include an additional nxginx container to handle media file serving.
# If you know what you are doing turn this back on (1) to serve media files using djangos serve() method.
# when unset: 1 (true) - this is temporary until an appropriate amount of time has passed for everyone to migrate
GUNICORN_MEDIA=1

Thank you but I am using a separate Nginx container (in the form of Nginx Proxy Manager). I just don't understand how to configure it - nothing works. How do I configure the location? And what should it point to? And do I need to map any volumes to NPM?

Would appreciate an example config for this. :)

[pscriptos]

Like you, I also use an ‘external’ reverse proxy in the network.
I had the same problem as you this morning.
I have in the ‘.env’ file

GUNICORN_MEDIA=1

in the ‘.env’ file.
Here's what I read about it:
The switch GUNICORN_MEDIA=0 in the .env file is responsible for whether Gunicorn (the application server for Django) delivers the media files (e.g. images) directly or not. By default, this should be set to 0, which means that Gunicorn is not responsible for delivering media files.

It is recommended to use a separate web server such as Nginx to deliver the static and media files, as Gunicorn is not optimised for this task and this can lead to performance problems or errors such as the 404 you described.

Option 1: Set up Nginx as a proxy for media files It is best to use Nginx to deliver the media files correctly. You can define a separate block for the media files in your Nginx setup.
I think this refers to NGINX as a container that runs together with Recips.

Option 2: Have Gunicorn deliver media files (not recommended)
If you don't feel like configuring Nginx, you can temporarily have Gunicorn deliver the media files. To do this, set GUNICORN_MEDIA=1 in the .env file

However, this is not recommended because, as already mentioned, it can lead to poorer performance and possible security risks.

I myself have now set it to 1 and it currently works.
In the long run I will have a look at the NGINX config. But now I'm of the opinion that I'm already using one and don't want to configure a second one.