Рендеринг форматирования начальной загрузки на my_site.com:8000, а не на my_site.com

Question

У меня есть личный веб-сайт, который использует Flask, NginX, Gunicorn и MySQL. Он работает на отлично, но я портирую его на набор контейнеров Docker (в основном для изучения Docker).

В настоящее время я сталкиваюсь с проблемой, которая, по моему мнению, связана с моей конфигурацией NginX, поскольку я пытаюсь перенаправить трафик на my_site на my_site: 8000 [кодовый блок 1 ниже].

Моя проблема заключается в следующем: я наконец-то получил переадресацию на работу, так как, когда я захожу на my_site.com, он рендерит мой HTML (предположительно, через пересылку на незащищенный порт Gunicorn 8000). Но он не форматирует его, используя форматирование bootstrap4. Однако мой терминал показывает ответ 200 для поиска файла main.css. Странно то, что когда я захожу на my_site: 8000, он правильно форматирует мои страницы!

Кто-нибудь из вас имеет представление о том, что может быть моей путаницей? Я дважды проверил свои порты, ссылки на мои службы докеров и т. Д., Но не могу понять, в чем состоит различие в указании этого порта 8000, после того, что я считаю успешной реализацией proxy_pass для порта 8000 в моей конфигурации NginX.

Содержимое моего файла docker-compose.yml показано ниже в блоке кода 2

Контейнер NginX взят из официального образа NginX на Docker-хабе

Контейнер MySQL взят из официального образа MariaDB на Docker-хабе

Другие контейнеры построены на изображениях Ubuntu 18.10. Я просто скачал на них Python, nano, needs.txt и т. Д.

Блок 1 - файл conf.d для NginX

events { }

http {

    upstream upstream-web {
        server jonathanolson.us;
    }

    server {
        listen 80;
        server_name gunicornservice;

        location /static {
            alias /NHL-Project/flasksite/static;
        }

        location / {
            proxy_pass http://gunicornservice:8000;
            # include /etc/nginx/proxy_params;
            proxy_redirect off;
            proxy_set_header   Host $host;
            proxy_set_header   X-Real-IP $remote_addr;
            proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header   X-Forwarded-Host $server_name;
        }
    }
}

Блок 2 - docker-compose.yml

version: '3.7'
networks:
  default:
    external:
      name: nhlflasknetwork
services:
  db:
    restart: always
    image: jonathanguy/mymariadb
    ports:
      - "3306:3306"
    volumes:
      - type: bind
        source: /home/jonathan/NHL-Project
        target: /NHL-Project
      - type: volume
        source: mynhldb
        target: /var/lib/mysql
      - type: volume
        source: myConfig
        target: /etc/mySecrets # Here, we will have the file /etc/mySecrets/config.py
    environment:
      - MYSQL_USER_FILE=/etc/mySecrets/mysql_user_file
      - MYSQL_PASSWORD_FILE=/etc/mySecrets/mysql_user_password_file
  web:
    restart: always
    image: jonathanguy/myflask
    ports:
      - "5000:5000"
    volumes:
      - type: bind
        source: /home/jonathan/NHL-Project
        target: /NHL-Project
      - type: volume
        source: myConfig
        target: /etc/mySecrets # Here, we will have the file /etc/mySecrets/config.py
    environment:
      - MYSQL_ROOT_PASSWORD_FILE=/etc/mySecrets/mysql_root_password_file
      - MYSQL_USER_FILE=/etc/mySecrets/mysql_user_file
      - MYSQL_PASSWORD_FILE=/etc/mySecrets/mysql_user_password_file
    depends_on:
      - db # Tells docker that "web" can start once "db" is started and running
    command: bash -c "python3 NHL-Project/flaskrun.py"
  server:
    build: ./myNginx
    depends_on:
      - web
    volumes:
      - type: bind # TODO -- Make this a volume mount for production
        source: /home/jonathan/NHL-Project/flasksite/templates
        target: /usr/share/nginx/html
      - type: bind # TODO -- Make this a volume mount for production
        source: /home/jonathan/NHL-Project/flasksite/static/favicon.ico
        target: /usr/share/nginx/html/favicon.ico
      - type: bind
        source: /home/jonathan/NHL-Project/conf/conf.d
        target: /etc/nginx/nginx.conf
    ports:
     - "80:80"
    environment:
     - NGINX_PORT=80
    command: /bin/bash -c "chown -R nginx /usr/share/nginx/html && exec nginx -g 'daemon off;'"
  gunicornservice:
    image: jonathanguy/mygunicorn
    depends_on:
      - server
    volumes:
      - type: bind
        source: /home/jonathan/NHL-Project
        target: /NHL-Project
      - type: volume
        source: myConfig
        target: /etc/mySecrets
    ports:
      - "8000:8000"
    command: /bin/bash -c "gunicorn -w 5 flaskrun:app -b 0.0.0.0:8000"
    working_dir: /NHL-Project
volumes:
  mynhldb:
    external: true
  myConfig:
    external: true
  myCode:
    external: true

Я ожидаю, что мой полный сайт будет правильно отображен и отформатирован при посещении my_site.com

Учитывая мою (успешную?) Реализацию proxy_pass в конфигурации NginX, я получаю весь HTML и удачный поиск файла main.css.

Мне все еще нужно посетить my_site.com:8000, чтобы отформатировать HTML, используя указанное форматирование начальной загрузки.

Answer 1

Предположим, из этого фрагмента

location /static { alias /NHL-Project/flasksite/static; }

Ваши CSS-файлы размещены на слух. Этот блок, как я полагаю, создает проблему, поскольку служба nginx будет пытаться найти файл в своей директории контейнера, но это будет выполняться из вашего веб-контейнера. Попробуйте удалить этот блок из файла конфигурации nginx. Также, если возможно, избегайте связывания томов кода, где это не требуется, таких как nginx и MySQL.