树莓派Nginx部署Flet天气应用：静态资源加载失败求助

1. 检查assets目录权限与路径有效性 #

• 确保assets目录及所有文件的权限允许Web服务进程读取：

  sudo chown -R www-data:www-data /path/to/your/app/assets
  sudo chmod -R 755 /path/to/your/app/assets
  

• 验证文件路径：直接在树莓派上执行ls /path/to/your/app/assets，确认目标静态资源存在，且路径无大小写错误（Linux系统路径区分大小写）。

2. 修正Systemd服务的工作目录 #

检查systemd配置，确保服务从应用根目录启动，否则Flet无法识别相对路径的assets：

[Service]
WorkingDirectory=/path/to/your/app  # 必须是包含assets的根目录
ExecStart=/path/to/your/venv/bin/python main.py
User=pi  # 或www-data，确保用户有权限读取assets
Restart=always

修改后重启服务：

sudo systemctl daemon-reload
sudo systemctl restart your-app-service

3. 调整Nginx静态资源匹配规则 #

之前的配置无效大概率是路径映射或匹配优先级问题，替换为如下配置：

server {
    listen 80;
    server_name your-domain-or-ip;

    # 优先匹配assets请求，直接返回本地文件
    location /assets/ {
        alias /path/to/your/app/assets/;  # 末尾斜杠必须与location的斜杠对应
        expires 30d;
        add_header Cache-Control "public, max-age=2592000";
    }

    # 其余请求转发给Flet应用
    location / {
        proxy_pass http://127.0.0.1:8550;  # 替换为你的Flet监听端口
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

        # 适配Channels的WebSocket连接
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

重启Nginx生效：

sudo nginx -s reload

4. 显式配置Flet的静态资源目录 #

在Flet启动代码中明确指定assets_dir参数，避免路径识别异常：

import flet as ft

def main(page: ft.Page):
    # 示例：引用assets下的图片
    page.add(ft.Image(src="assets/weather_icon.png"))

if __name__ == "__main__":
    ft.app(
        target=main,
        port=8550,
        assets_dir="assets"  # 显式指定静态资源目录
    )

5. 验证静态资源可直接访问 #

重启服务后，直接访问http://your-domain-or-ip/assets/your-image.png：

• 返回403：权限未配置正确，回到步骤1重新设置权限
• 返回404：Nginx的alias路径与实际文件路径不匹配，检查路径拼写
• 返回200但应用内不显示：检查应用中引用的资源路径是否与URL路径一致，排除拼写错误

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