剪藏#剪藏#羊刀仙

用 NAS 搭建记忆回廊,这比相册浪漫多了!ChronoFrame 部署分享

2025 年 11 月 5 日1 分钟
分享Twitter / XTelegram微博

很多人平时喜欢拍照——旅行、聚会、节日、一些生活里转瞬即逝的画面。我们用相机或手机记录下无数瞬间,但这些照片一旦被相册的各类应用自动分类、埋进几千几万张里,很快就失去了「被回味」的机会。

那些拍得不错的照片、一些特别有意义的瞬间,其实值得被单独拉出来放在一个地方—:一个能慢慢翻看、偶尔展示的地方。

本次分享一款适合做画廊、照片墙的应用:ChronoFrame。用起来确实相当丝滑,笔者过去也介绍过一些类似应用,但是这款更得我心~展示如下,截取自项目Demo页面。

Notion image

Notion image

Notion image

应用特性

丝滑的照片展示和管理应用,支持多种图片格式和大尺寸图片渲染。

🖼 强大的图片管理

在线管理照片:通过 Web 界面轻松管理和浏览图片

探索地图:在地图上浏览照片拍摄位置

智能 EXIF 解析:自动提取拍摄时间、地理位置、相机参数等数据

地理位置识别:支持反向地理编码,能在地图上标注拍摄点

多格式支持:兼容 JPEG、PNG、HEIC/HEIF 等主流格式

智能缩略图:基于 ThumbHash 技术生成高效预览图

🔧 现代技术栈

基于 Nuxt 4 + TypeScript + TailwindCSS + Drizzle ORM

前端渲染流畅,界面轻量美观,同时支持 SSR/SSG,性能上非常优秀。

💾 灵活的存储方案

支持多存储端并行:本地文件系统 + S3 等云端存储

可配置 CDN 地址,实现图片加速访问

部署流程

本篇以威联通NAS为例,通过Docker Compose的方式进行部署。

✅ 准备工作

先申请一个地图(Maptiler)的 API KEY ,允许所有来源访问(直接留空创建),如下图。

Notion image

关于环境变量,有很多可以配置,这里仅放一个作者给的最小化配置。其余的详见文末。

如下:

JAVASCRIPT
# 管理员邮箱(必须)
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的内部静态地址,也可以是网络图片~

Notion image

保存位置建议为部署设备的常用docker目录,我的定为/share/Contaienr/chronoframe:

Notion image

✅ 正式部署

代码如下,端口和映射目录咱们根据自己实际情况进行改动,也要注意环境配置文件路径是否正确:

JAVASCRIPT
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创建新的应用程序。

Notion image

使用相关

上文代码部署完毕后,浏览器输入NAS_IP:3377即可访问服务。

Notion image

点击头像,即可进入登陆界面。

Notion image

输入NAS_IP:3377/dashboard可进入管理面板,UI还是很漂亮的。如果上面环境变量最后一条不加,局域网HTTP大概率进不去!!!

然后点击照片,可进行上传管理等。这里大家应该都熟悉,不啰嗦啦。

Notion image

Notion image

Notion image

Notion image

Notion image

最后

作者提供了Demo展示站点,以及使用指南。完整环境变量位于「指南」-「配置项说明」。大家可进行体验和配置。

公众号,后台发送ChronoFrame可获得本文相关的配置相关内容。不要输错!!!

Notion image

感谢观看,本文完~

原文地址: https://mp.weixin.qq.com/s?__biz=Mzk0MTgyMTgwOQ==&mid=2247486060&idx=1&sn=5f6765a98292a05b9bfff93200f1e594&chksm=c33fdf75cf9b5fa9917672da74020a8da0d1bd566f1b64a38740c317a3c8ae5cb82c97e38b03&mpshare=1&scene=1&srcid=1105FpRrJSLYWUspC4nPcvk7&sharer_shareinfo=eea63598ed9bcd39b10419be7e5deba0&sharer_shareinfo_first=eea63598ed9bcd39b10419be7e5deba0#rd

相关文章