Nginx+HTTPS部署多Flask应用静态文件404故障排查

你的静态文件404和HTTPS配置无关，是两处配置错误共同导致的：

• Flask侧未配置子路径挂载前缀，模板中url_for('static', filename='styles.css')默认生成的资源路径是/static/styles.css，完全匹配不到你在Nginx中写的/app-one/static/、/app-two/static/规则，请求不会走到Nginx静态文件逻辑，要么被转发到Flask应用（无对应路由返回404），要么直接匹配不到规则返回404。
• Nginx的alias指令写法不规范，映射的本地路径末尾没有加斜杠，就算路径匹配正确，Nginx拼接文件路径时会把URI直接接在路径后面，例如请求/app-one/static/styles.css会被映射到/home/pi/flask_test/app_one/staticstyles.css，自然找不到对应文件。

1. 调整Flask应用配置 #

给每个Flask应用配置对应的子路径参数，让模板生成正确的带前缀的静态资源路径。
以app-one的main.py为例，修改后代码如下：

# main.py
from flask import Flask, render_template

app = Flask(__name__)
# 标记应用挂载的子路径根目录
app.config['APPLICATION_ROOT'] = '/app-one'
# 指定静态文件的URL前缀，和Nginx静态规则对应
app.config['STATIC_URL_PATH'] = '/app-one/static'

@app.route('/')
def index():
    return render_template('index.html')

if __name__ == '__main__':
    app.run()

app-two的配置做对应修改，把前缀值替换为/app-two即可，修改完成后重启两个Flask应用。此时查看页面源码，CSS引用路径会变为/app-one/static/styles.css、/app-two/static/styles.css，可以正确匹配Nginx的静态规则。

2. 修正Nginx配置 #

首先修正静态规则的alias路径，末尾必须补充斜杠，另外给反向代理块补上常用的透传头，避免Flask获取请求信息异常：

map $http_upgrade $connection_upgrade {
    default upgrade;
    ''      close;
}

server {
    listen 80 default_server;
    listen [::]:80 default_server;
    server_name example.com;
    return 301 https://example.com$request_uri;
}

server {
    listen 443 ssl;
    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;
    ssl_protocols TLSv1.2 TLSv1.3;

    ssl_ciphers SECRET_STUFF;
    ssl_prefer_server_ciphers On;
    ssl_session_cache shared:SSL:128m;
    add_header Strict-Transport-Security "max-age=31557600; includeSubDomains";
    ssl_stapling on;
    ssl_stapling_verify on;

    location /app-one/ {
        proxy_pass http://127.0.0.1:9001/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $connection_upgrade;
        # 补充缺失的代理透传头
        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;
    }

    location /app-one/static/ {
        # alias路径末尾必须加斜杠
        alias /home/pi/flask_test/app_one/static/;
        # 可选配置：静态文件缓存，提升加载速度
        expires 30d;
        add_header Cache-Control "public, no-transform";
    }

    location /app-two/ {
        proxy_pass http://127.0.0.1:9002/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $connection_upgrade;
        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;
    }

    location /app-two/static/ {
        alias /home/pi/flask_test/app_two/static/;
        expires 30d;
        add_header Cache-Control "public, no-transform";
    }
}

1. 执行nginx -t检查配置语法，确认没有报错
2. 执行nginx -s reload重载Nginx配置
3. 浏览器按Ctrl+F5硬刷新页面清除缓存，即可看到CSS样式正常加载，静态文件返回200状态码

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