How to set up NGINX to serve JPGs to Vue.js frontend in a Docker container

I struggle with replacing npm’s http-server as a static file server with NGINX when moving from a local setup to a dockerized one.

My setup is as follows:

I built an app using Flask + Gunicorn + Vue.js + THREE.js. Textures for THREE.js objects are loaded as jpg via npm’s http-server:

http-server . -p 8000 –cors=http://localhost:8080/

Everything works just fine locally. Next I want to put everything into a single Docker container. I therefore tried to replace npm’s http-server with NGINX but cannot configure it properly. Note that I do not intend to use NGINX as a reverse proxy.

My static files (jpgs) in the container lie under /app/static/textures/. The containerized setup is working except for the loading of static files (jpgs).

Here are my related sources:

Dockerfile

# BASE IMAGE
FROM nginx:latest AS base

ENV DEBIAN_FRONTEND=noninteractive

RUN apt-get update && apt-get install -y 
                        wget 
                        git 
                        unzip 
                        nano 
                        python3 
                        python3-pip 
                        build-essential 
                        cmake

# install python packages
COPY ./app/requirements.txt /app/requirements.txt
RUN pip3 install -r /app/requirements.txt

# set environment variable
ENV PYTHONDONTWRITEBYTECODE 1

# copy sources
COPY ./app /app
COPY ./client/dist /app/dist
COPY ./data /app/data

# configure nginx
COPY ./nginx/nginx.conf /etc/nginx/
COPY ./nginx/default.conf /etc/nginx/conf.d/

WORKDIR /app


# DEVELOPMENT IMAGE
FROM base AS dev

RUN pip3 install ptvsd

ENV LC_ALL=C.UTF-8
ENV LANG=C.UTF-8

ENV FLASK_ENV=development
ENV FLASK_DEBUG=True
ENV FLASK_APP="/app/app.py"

CMD ["python3", "-m", "ptvsd", "--host", "0.0.0.0", "--port", "5678", "--wait", "--multiprocess", "-m", "flask", "run", "-h", "0.0.0.0", "-p", "5000", "--no-reload", "--no-debugger"]


# PRODUCTION IMAGE
FROM base AS production

RUN apt-get install gunicorn3 -y

EXPOSE 80

CMD ["gunicorn3", "--bind", "0.0.0.0:80", "--workers", "2", "--timeout", "60", "wsgi:app"]

Sections from Main.vue

...
...

<script>
import axios from 'axios';
import * as THREE from 'three';

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

const TEXTURES = 'http://localhost:8000/src/assets/textures/';

...
...

const frontTexture = specs.texture.image;

if (frontTexture !== null && frontTexture !== '') {
  const loader = new THREE.TextureLoader();
  loader.crossOrigin = '';

  frontMaterial = new THREE.MeshPhongMaterial({
    map: loader.load(TEXTURES + frontTexture),
    transparent: true,
  });
} 

...
...

nginx.conf

user             nginx;
worker_processes 1;
error_log        /var/log/nginx/error.log warn;
pid              /var/run/nginx.pid;

events {
  worker_connections 1024;
}

http {
  include /etc/nginx/mime.types;

  default_type text/html;
  log_format   main  '$remote_addr - $remote_user [$time_local] "$request" '
                     '$status $body_bytes_sent "$http_referer" '
                     '"$http_user_agent" "$http_x_forwarded_for"';
  access_log   /var/log/nginx/access.log main;
  sendfile     on;
  tcp_nopush   on;
  tcp_nodelay  on;

   keepalive_timeout 65;

   include /etc/nginx/conf.d/*.conf;
}

default.conf

server {
    listen       80;
    server_name  localhost;

    charset utf-8;

    location ~* .(js|jpg|png|css)$ {
        root /app/static/;
    }
}

How do I have to change TEXTURES and the parameters of default.conf in order to get NGINX serve my jpgs?

Thanks alot!

Source: Docker Questions