很多人平时喜欢拍照——旅行、聚会、节日、一些生活里转瞬即逝的画面。我们用相机或手机记录下无数瞬间，但这些照片一旦被系统相册自动分类、埋进几千几万张里，很快就失去了「被回味」的机会。
那些拍得不错的照片、一些特别有意义的瞬间，其实值得被单独拉出来放在一个地方—：一个能慢慢翻看、偶尔展示的地方。
本次分享一款适合做画廊、照片墙的应用：ChronoFrame。用起来确实相当丝滑，笔者过去也介绍过一些类似应用，这款好像更得我心～展示如下，截取自项目Demo页面。
应用特性
丝滑的照片展示和管理应用，支持多种图片格式和大尺寸图片渲染。
🖼 强大的图片管理
-
在线管理照片：通过 Web 界面轻松管理和浏览图片
-
探索地图：在地图上浏览照片拍摄位置
-
智能 EXIF 解析：自动提取拍摄时间、地理位置、相机参数等数据
-
地理位置识别：支持反向地理编码，能在地图上标注拍摄点
-
多格式支持：兼容 JPEG、PNG、HEIC/HEIF 等主流格式
-
智能缩略图：基于 ThumbHash 技术生成高效预览图
🔧 现代技术栈
-
基于 Nuxt 4 + TypeScript + TailwindCSS + Drizzle ORM
-
前端渲染流畅，界面轻量美观，同时支持 SSR/SSG，性能上非常优秀。
💾 灵活的存储方案
-
支持多存储端并行：本地文件系统 + S3 等云端存储
-
可配置 CDN 地址，实现图片加速访问
部署流程
本篇以威联通NAS为例，通过Docker Compose的方式进行部署。
准备工作
先申请一个地图（Maptiler）的 API KEY ，允许所有来源访问（直接留空创建），如下图。
作者先给出了一个最小化配置：
# 管理员邮箱（必须）
CFRAME_ADMIN_EMAIL=
# 管理员用户名（可选，默认 ChronoFrame）
CFRAME_ADMIN_NAME=
# 管理员密码（可选，默认 CF1234@!）
CFRAME_ADMIN_PASSWORD=
# 站点信息（均可选）
NUXT_PUBLIC_APP_TITLE=
NUXT_PUBLIC_APP_SLOGAN=
NUXT_PUBLIC_APP_AUTHOR=
NUXT_PUBLIC_APP_AVATAR_URL=
# 地图提供器 (maplibre/mapbox)
NUXT_PUBLIC_MAP_PROVIDER=maplibre
# 使用 MapLibre 需要 MapTiler 访问令牌
NUXT_PUBLIC_MAP_MAPLIBRE_TOKEN=
# 使用 Mapbox 需要 Mapbox 访问令牌
NUXT_PUBLIC_MAPBOX_ACCESS_TOKEN=
# Mapbox 无域名限制令牌（反向地理编码，可选）
NUXT_MAPBOX_ACCESS_TOKEN=
# 存储提供者（local、s3 或 openlist）
NUXT_STORAGE_PROVIDER=local
NUXT_PROVIDER_LOCAL_PATH=/app/data/storage
# 会话密码（必须，32 位随机字符串）
# SSH 发送 openssl rand -hex 16
NUXT_SESSION_PASSWORD=aN1Qx9FkYZ5u8WzPqM9cHn3oPsmVt7Qx
# 建议HTTPS访问，HTTP下的暂行办法，并非长久之计
NUXT_ALLOW_INSECURE_COOKIE=true
我们需要先将其必要项填写完整，然后放进一个名为.env的文件中保存。URL那项是头像的图片地址，可以是NAS的内部静态地址，也可以是网络图片～
保存位置建议为部署设备的常用docker目录，我的定为/share/Contaienr/chronoframe：
另外，还有很多的环境变量可以配置，详见文末。
正式部署
代码如下，端口和映射目录咱们根据自己实际情况进行改动，也要注意环境配置文件路径是否正确：
services:
chronoframe:
image: ghcr.io/hoshinosuzumi/chronoframe:latest
container_name: chronoframe
restart: always
ports:
- '3377:3000'
volumes:
- /share/Contaienr/chronoframe:/app/data
env_file:
- /share/Contaienr/chronoframe/.env
打开威联通Container Station创建新的应用程序。
使用相关
上文代码部署完毕后，浏览器输入NAS_IP:3377即可访问服务。
点击头像，即可进入登陆界面。
输入NAS_IP:3377/dashboard可进入管理面板，UI还是很漂亮的。如果上面环境变量最后一条不加，局域网HTTP大概率进不去！！！
然后点击照片，可进行上传管理等。这里大家应该都熟悉，不啰嗦啦。
最后
作者提供了Demo展示站点，以及使用指南。完整环境变量位于「指南」-「配置项说明」。大家可进行体验和配置。
图中自取，或公众号后台发送ChronoFrame可获得本文相关的配置相关内容。博客见文末。
感谢观看，本文完～
项目地址：https://github.com/HoshinoSuzumi/chronoframe
Demo：https://lens.bh8.ga/
官网：https://chronoframe.bh8.ga/
评论区