Bootstrap 在 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 时，它确实正确地格式化了我的页面！

你们中有人知道我搞错了什么吗？我已经仔细检查了我的端口公开、我的 docker 服务引用等，但在我认为 proxy_pass 成功实施之后无法弄清楚指定端口 8000 的区别是什么我的 NginX 配置中的端口 8000。

我的docker-compose.yml文件内容如下代码块2

NginX 容器来自 Docker hub

上的官方 NginX 镜像

MySQL 容器来自 Docker hub

上的官方 MariaDB 镜像

其他容器基于 Ubuntu 18.10 映像构建。我只是在这些上下载了Python、nano、requirements.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

鉴于我（成功？）在 NginX 配置中实现了 proxy_pass，我得到了所有 HTML 并成功找到了 main.css 文件。

我仍然需要访问 my_site.com:8000 才能使用指定的 bootstrap 格式对 html 进行格式化。

Answer 1

假设形成这个片段

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

您的 css 文件已被放置。我猜这个块是造成问题的原因，因为 nginx 服务将尝试在其容器目录中查找该文件，但这是从您的 Web 容器提供的。尝试从 nginx conf 文件中删除该块。另外，如果可能的话，避免在不需要的地方绑定代码量，比如 nginx 和 MySQL.

Bootstrap 在 my_site.com:8000 上格式化渲染，而不是在 my_site.com 上渲染

Bootstrap Formatting Rendering on my_site.com:8000, not on my_site.com

nginx

flask

gunicorn

docker

bootstrap-4