在my_site.com:8000上的引导格式渲染,而不是在my_site.com上

问题描述 投票:0回答:1

我有一个利用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服务引用等等,但在我认为在我的NginX配置中成功实现了proxy_pass到端口8000后,无法弄清楚指定端口8000的区别。

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

NginX容器来自Docker hub上的官方NginX映像

MySQL容器来自Docker hub上的官方MariaDB映像

其他容器是基于Ubuntu 18.10映像构建的。我只是在这些上下载了Python,nano,requirements.txt等。

块1 - NginX的conf.d文件

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以使用指定的引导程序格式化格式化html。

docker nginx flask bootstrap-4 gunicorn
1个回答
1
投票

假设形成这个片段

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

你的css文件是听到的。这个块是我猜的是创建问题,因为nginx服务将尝试在其容器目录中找到该文件,但这是从您的Web容器提供的。尝试从nginx conf文件中删除该块。此外,如果可能,请避免绑定不需要的代码卷,如nginx和MySQL。

© www.soinside.com 2019 - 2024. All rights reserved.