1. 后端新增/stickers路由静态文件服务,设置1天缓存 2. 排除/stickers前缀的SPA路由拦截 3. 优化评论区表情按钮样式与可访问性 4. 移除编辑器中未使用的标题工具与引用工具
3.2 KiB
3.2 KiB
修复生产环境表情图片无法显示 Implementation Plan
Repository Research
问题分析
表情图片在生产部署后无法加载,原因是 Go 后端缺少 /stickers/* 路由的静态文件服务注册。
当前架构:
- 前端 emoji 数据中的 URL 为
/stickers/{platform}/{file}.avif(在 emojiData.ts 中通过toLocalUrl()生成) - Vite 构建时将
frontend/public/stickers/原样复制到embed_static/static/spa/stickers/ - Go 的
//go:embed static/*会将embed_static/static/下所有文件(包括 stickers)打包进二进制 - 但 embed.go 的
SetupEmbed()只注册了/assets/*filepath路由(用于 JS/CSS chunk),没有注册/stickers/*filepath - 同时
IsSPARoute()函数也没有排除/stickers前缀,导致请求被 SPA NoRoute fallback 处理,返回 index.html 而非图片
开发模式之所以正常,是因为 Vite dev server 自动托管了 public/stickers/ 下的静态文件。
当前代码状态
embed.go第 13 行://go:embed static/*— 正确嵌入了所有静态资源(含 stickers)embed.go第 33-43 行:SetupEmbed()— 只处理了static/spa/assets,缺少 stickers 路由embed.go第 63-77 行:IsSPARoute()— 缺少/stickers前缀排除
Files and Modules
embed_static/embed.go: 新增/stickers/*filepath文件服务路由;在IsSPARoute中排除/stickers前缀
Implementation Steps
-
在
SetupEmbed中注册/stickers路由- 参照现有
/assets路由的模式,添加对static/spa/stickers子目录的文件服务 - 使用
fs.Sub(staticFS, "static/spa/stickers")获取 stickers 子文件系统 - 注册
GET /stickers/*filepath路由,直接透传,不设置长期缓存(表情可能更新)
- 参照现有
-
在
IsSPARoute中排除/stickers前缀- 在现有
strings.HasPrefix(path, "/assets")附近添加strings.HasPrefix(path, "/stickers") - 确保表情请求不会被 SPA fallback 拦截
- 在现有
Dependencies and Considerations
- stickers 目录下存储的是
.avif图片文件,不需要设置特殊 MIME type(http.FileServer 会根据扩展名自动识别) - stickers 资源不含哈希指纹,不应设置
immutable缓存头(与/assets不同),但可以设置短过期缓存 - 需确保
fs.Sub路径与实际构建输出路径一致:embed_static/static/spa/stickers/
Validation
- 重新构建前端:
cd frontend && npm run build - 重新构建 Go 二进制:
go build -o jiang13-linux-amd64 - 部署后访问
/stickers/tieba/tb_01.avif应能直接返回图片内容(HTTP 200) - 在评论框中打开表情选择器,所有平台的表情应正常显示
Risks
- 风险: 如果未来在
public/下新增其他静态资源目录(如avatars/、flags/等),需要同样在embed.go中注册对应路由 - 应对: 可考虑后续重构为自动扫描
public/下所有子目录并自动注册路由,或改为统一的 SPA 静态文件服务方案