NGINX Static Files Over Https? - django

Question

I have the following docker-compose set up that is working for displaying pictures when deployed locally and without https:
NGINX:
events{
}
http{
server {
listen 80;
server_name localhost;
root /usr/share/nginx/html;
location / {
proxy_pass http://frontend:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "";
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
}
docker-compose:
frontend:
build:
context: ../../
restart: always
volumes:
- '../../:/app'
- '/app/node_modules'
ports:
- "3000:3000"
depends_on:
- "backend"
environment:
- CHOKIDAR_USEPOLLING=true
stdin_open: true
tty: true
nginx:
build:
context: ../../nginx
restart: always
ports:
- "80:80"
- "443:443"
volumes:
- volume1:/usr/share/nginx/html
links:
- "backend"
- "db"
- "frontend"
frontend:
<img
onError={()=>{
console.log("inside the onError function")
setImgError(true)
}}
src={"http://localhost:9000/static/"+comment.file_name}
className='commentimage'
/>
This is not working when using https. Which is to say - / and /api/ work as expected but not /images/.
events{
}
http{
server {
listen 80;
server_name localhost lightchan.org www.lightchan.org;
root /usr/share/nginx/html;
location /.well-known/acme-challenge/ {
root /var/www/certbot;
}
return 301 https://lightchan.org$request_uri;
}
server {
listen 443 default_server ssl http2;
listen [::]:443 ssl http2;
server_name localhost lightchan.org www.lightchan.org;
#ssl_certificate /etc/nginx/ssl/live/lightchan.org/fullchain.pem;
#ssl_certificate_key /etc/nginx/ssl/live/lightchan.org/privkey.pem;
ssl_certificate /etc/letsencrypt/live/lightchan.org/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/lightchan.org/privkey.pem;
location / {
proxy_pass http://frontend:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
location ^~ /api/ {
rewrite ^/api/(.*)$ /$1 break;
proxy_pass http://backend:8000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
location ^~ /images/ {
rewrite ^/images/(.*)$ /$1 break;
proxy_pass https://164.92.157.124/static/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
}
My docker-compose:
frontend:
build:
context: ../../
restart: always
volumes:
- '../../:/app'
- '/app/node_modules'
ports:
- "3000:3000"
depends_on:
- "backend"
environment:
- CHOKIDAR_USEPOLLING=true
stdin_open: true
tty: true
links:
- 'backend'
nginx:
build:
context: ../../nginx
restart: always
ports:
- "80:80"
- "443:443"
volumes:
- volume1:/usr/share/nginx/html
- varwwwcertbot:/var/www/certbot
- certbotconf:/etc/letsencrypt
links:
- "backend"
- "db"
- "frontend"
certbot:
image: certbot/certbot:latest
volumes:
- varwwwcertbot:/var/www/certbot
- certbotconf:/etc/letsencrypt
My frontend in this case I don't know how to reference. I have
<img
onError={()=>{
console.log("inside the onError function")
setImgError(true)
}}
src={"https://nginx:80/images/"+comment.file_name}
className='commentimage'
/>
Which doesn't look right. I've docker execed into the running nginx container and double checked that the image that I want to display exists in the static directory (which it does). If I attempt to navigate to <DNS>/images/<image.extension> I'm routed back through my frontend application. I've attempted to replace the line
proxy_pass https://164.92.157.124/static/;
with
proxy_pass https://backend:3000/static/;
but that will route through my Django application for static files and I want NGINX to serve them just as a folder.
I've also attempted to rewrite the /images/ block like this:
location ^~ /images/ {
root /usr/share/nginx/html/static;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
But that didn't work either, and I'm not positive that I'm allowed to rewrite the root for a server block when I redirect using https. In this instance, <DNS>/image/<image.ext> 404's rather than routing to the frontend again.
From reading other Stack Overflow posts people have mentioned that the ^~ signifier takes precedence over absolute routes so I would expect /images/ would be replaced first over /. So I don't understand why this is not true in the first two instances.
Routing to the backend, the IP address of the host, and the NGINX root are the three options that I can think of for the block content.
Any ideas?