部署Flask应用时NGINX显示原始CSS代码未渲染问题求助

在虚拟机的Docker容器中部署Flask应用，使用Nginx托管静态文件，但启动所有服务后访问应用，浏览器仅显示原始CSS代码，未进行样式渲染。

我的Nginx配置： #

listen       80;
listen  [::]:80;
server_name  localhost;

#access_log  /var/log/nginx/host.access.log  main;

location / {
    root   /usr/share/nginx/html;
    index  main.css;
    include  /etc/nginx/mime.types;
}

我的docker-compose.yml： #

services:
  app:
    build: .
    ports:
      - 5000

  nginx:
    build:
      context: ./nginx
    volumes:
      - ./nginx/default.conf:/etc/nginx/conf.d/default.conf
    depends_on:
      - app
    ports:
      - "80:80"

问题原因及修复方案 #

1. 错误将CSS设为默认索引文件
   你把index指令设置为main.css，导致访问根路径时Nginx直接返回该CSS文件作为默认页面，浏览器会以纯文本形式展示。需将默认索引改为Flask应用的入口HTML文件（如index.html），或配置Nginx反向代理到Flask服务。

2. 添加反向代理配置转发动态请求
   当前配置仅处理静态文件，未将动态请求转发到Flask容器。修改Nginx配置，区分静态文件与动态请求：

   修改后的Nginx配置：

   listen       80;
   listen  [::]:80;
   server_name  localhost;
   
   # 处理静态文件请求
   location /static/ {
       root   /usr/share/nginx/html;
       include  /etc/nginx/mime.types;
   }
   
   # 反向代理Flask动态请求
   location / {
       proxy_pass http://app:5000;
       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-Proto $scheme;
   }
   

3. 确认静态文件路径与引用正确

   • 确保CSS文件存放在Nginx容器的/usr/share/nginx/html/static/目录（对应上述配置的/static/路径），或调整root和location匹配实际路径。
   • Flask模板中引用静态文件时使用正确路径，例如：<link rel="stylesheet" href="/static/main.css">。

4. 验证MIME类型配置
   虽然已包含mime.types，但确认Nginx能正确识别CSS的MIME类型（text/css）。默认mime.types已包含该配置，路径正确无需额外修改。

内容的提问来源于stack exchange，提问作者rgo1991