在Vercel部署Flask星标徽章应用遭遇404错误求助

问题概述 #

在Vercel部署了一款用于生成GitHub仓库星标数量SVG徽章的Flask应用，访问时出现404错误，无法正常生成目标徽章（如Microsoft/VsCode仓库的星标徽章）。

项目文件详情 #

main.py（存放于dynamicBadges目录） #

import requests
from flask import Flask, Response

app = Flask(__name__, template_folder='dynamicBadges/templateFiles', static_folder='dynamicBadges/staticFiles')

# VARIANT 1 ----------------------------------------------------------------
variant_1 = ['#B02E26', '#974800', '#8E7500', '3F6900', '#4B6700', '#00696A', '#4B53B9', '#006493', '#8A33B8', '#9E2A99', '#99405E', '#1B1B1B']
on_variant_1 = '#FFF'

# VARIANT 2 ----------------------------------------------------------------
variant_2 = ['#FFB4AA', '#FFB689', '#E9C327', '#92DA35', '#AFD364', '#4CDADB', '#BEC2FF', '#8DCDFF', '#E8B3FF', '#FFABF1', '#FFB1C5', '#C6C6C6']
on_variant_2 = ['#690004', '#512400', '#3B2F00', '#1F3700', '#253600', '#003737', '#181F89', '#00344F', '#500075', '#5C005A', '#5E1130', '#303030']

# VARIANT 3 ----------------------------------------------------------------
variant_3 = ['#FFDAD5', '#FFDBC7', '#FFE177', '#ACF850', '#CAF07D', '#6FF6F7', '#E0E0FF', '#CAE6FF', '#F6D9FF', '#FFD7F4', '#FFD9E1', '#E2E2E2']
on_variant_3 = ['#410001', '#311300', '#231B00', '#102000', '#141F00', '#002020', '#00036B', '#001E30', '#310049', '#380037', '#3F001B', '#1B1B1B']

@app.route('/badge/stars/<style>/<variant>/<username>/<repo>')
def github_stars_badge(style, variant, username, repo):
    url = f'https://api.github.com/repos/{username}/{repo}'
    headers = {'Accept': 'application/vnd.github.v3+json'}
    r = requests.get(url, headers=headers)
    if r.ok:
        index = int(style) - 1

        if variant == '1':
            background = variant_1[index]
            foreground = on_variant_1
        if variant == '2':
            background = variant_2[index]
            foreground = on_variant_2[index]
        if variant == '3':
            background = variant_3[index]
            foreground = on_variant_3[index]

        data = r.json()
        stars = data['stargazers_count']

        if len(str(stars)) == 1:
            width = 20 + 68
        elif len(str(stars)) == 2:
            width = 2 * 16 + 68
        elif len(str(stars)) == 3:
            width = 3 * 14 + 68
        elif len(str(stars)) == 4:
            width = 4 * 13 + 68
        else:
            width = len(str(stars)) * 13 + 68
        
        svg = f'<svg xmlns="http://www.w3.org/2000/svg" width="{width}" height="30" fill="{background}" rx="15"><path d="M40 0h4v20h-4z" fill="#4c1"/><rect rx="15" width="{width}" height="30" fill="{background}"/><text x="11" y="22" fill="{foreground}" font-size="20" font-family="Product Sans">Stars : {stars}</text></svg>'
        return Response(svg, mimetype='image/svg+xml')
    else:
        return 'Error', r.status_code

vercel.json（存放于项目根目录） #

{
    "version": 2,
    "builds": [
    {
        "src": "dynamicBadges",
        "use": "@vercel/python",
        "config": {
        "maxLambdaSize": "15mb"
        }
    }
    ],
    "routes": [
    {
        "src": "/badge/stars/(.*)/(.*)/(.*)/(.*)",
        "dest": "dynamicBadges/main.py"
    }
    ]
}

requirements.txt（存放于项目根目录） #

Flask==2.3.2

错误排查与修复方案 #

1. 修正vercel.json配置 #

Vercel的Python构建器需要明确指定Flask应用的入口文件而非目录，同时路由的dest路径需添加前缀/：

{
    "version": 2,
    "builds": [
        {
            "src": "dynamicBadges/main.py",
            "use": "@vercel/python",
            "config": {
                "maxLambdaSize": "15mb"
            }
        }
    ],
    "routes": [
        {
            "src": "/badge/stars/(.*)/(.*)/(.*)/(.*)",
            "dest": "/dynamicBadges/main.py"
        }
    ]
}

2. 完善main.py的兼容性与错误处理 #

• 修复颜色值缺失#的问题：将variant_1中的'3F6900'改为'#3F6900'
• 添加WSGI入口适配Vercel运行环境：在文件末尾添加

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

• 增加参数合法性校验避免索引越界：在index = int(style) - 1后添加

if index < 0 or index >= len(variant_1):
    return 'Invalid style parameter', 400

3. 补充依赖库 #

代码中使用了requests库但未在requirements.txt中声明，需添加：

Flask==2.3.2
requests==2.31.0

4. 测试访问路径 #

部署完成后，访问示例路径：/badge/stars/1/1/microsoft/vscode，验证是否能正常生成SVG徽章。

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