Блог

Я борюсь с заменой http-сервера npm в качестве статического файлового сервера на NGINX при переходе с локальной настройки на докеризированную.

Моя настройка заключается в следующем:

Я создал приложение, используя Flask Gunicorn Vue.js THREE.js . Текстуры для THREE.js объекты загружаются в формате JPG через http-сервер npm:

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

Локально все работает просто отлично. Далее я хочу поместить все в один контейнер Docker. Поэтому я попытался заменить http-сервер npm на NGINX, но не смог настроить его должным образом. Обратите внимание, что я не собираюсь использовать NGINX в качестве обратного прокси.

Мои статические файлы (JPG) в контейнере находятся в /app /static /textures/. Контейнерная установка работает, за исключением загрузки статических файлов (JPG).

Вот мои связанные источники:

Dockerfile

 # BASE IMAGE
FROM nginx:latest AS base

ENV DEBIAN_FRONTEND=noninteractive

RUN apt-get update amp;amp; 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"]
  

Разделы из 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 amp;amp; 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/;
    }
}
  

Как мне изменить TEXTURES и параметры default.conf, чтобы заставить NGINX обслуживать мои файлы jpg?

Большое спасибо!

Существует недопонимание в том, как использовать многоступенчатую сборку и как использовать docker. В этом случае я бы посоветовал вам разделить ваш файл Dockerfile и сгенерировать несколько контейнеров.

Проблемы в вашем Dockerfile:

• CMD на этапе разработки никогда не используется (если вы не используете идентификатор изображения, полученный в процессе сборки, но я думаю, что это маловероятно);
• изображение nginx не используется (вы переопределяете команду nginx и используете gunicorn3 вместо этого)

Лично я бы отделил nginx материал от gunicorn и использовал docker-compose.yml . например

nginx.dockerfile

 FROM nginx:alpine

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

COPY --chown=www-data ./static /app
  

В конфигурации nginx я бы настроил обратный прокси для другого контейнера (в данном случае api ):

 server {
    listen       80;
    server_name  localhost;

    charset utf-8;

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

    location /api {
        proxy_pass  http://api;
    }
}
  

В контейнере api будет материал gunicorn. Я не буду писать это здесь и, наконец, я бы использовал docker-compose для привязки контейнеров:

 version: "3"
services: 
  api:
    build:
      context: .
      dockerfile: gunicorn.dockerfile
    image: myapi:latest
  frontend:
    build:
      context: app
      dockerfile: nginx.dockerfile
    image: mycustomnginx:latest
    ports:
      - 80:80
    depends_on: api
  

Очевидно, что этот материал не работает из коробки. Это всего лишь пример, и он требует некоторой работы, прежде чем его можно будет использовать должным образом.