❌

普通视图

发现新文章，点击刷新页面。
今天 — 2025年12月12日首页

一键部署！一款开源自托管的照片画廊神器！

✇掘金 前端
作者 Java陈序员
2025年12月12日 09:23

大家好，我是 Java陈序员。

在这个数字时代，我们的手机和相机里存满了无数珍贵的照片 —— 家人的笑脸、旅行的风景、生活的点滴瞬间。但这些回忆往往被淹没在杂乱的相册里，要么受制于云存储的隐私风险，要么因格式兼容问题难以完整呈现。

这时候，我们可以搭建一个完全属于自己、能按时间和地点梳理回忆的照片画廊。

今天，给大家推荐一款专注于流畅体验的自托管个人画廊神器，支持一键部署！

项目介绍

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

功能特色：

  • 强大的照片管理：支持通过网页界面轻松管理和浏览照片，并在地图上查看照片拍摄地点
  • 轻量部署体验：基于 Docker 一键部署，无需额外配置数据库（内置 SQLite），几分钟内即可完成私有化部署
  • 多存储后端适配：支持本地文件系统、S3 兼容存储多种存储方式，满足不同场景需求
  • 地图可视化浏览：自动提取照片 GPS 信息，使用 Mapbox 进行地理编码，在地图上展示照片拍摄位置
  • 响应式设计：完美适配桌面端和移动端，支持触摸操作和手势控制，提供原生应用般的体验
  • Live/Motion Photo 支持：完整支持 Apple LivePhoto 格式和 Google 标准的 Motion Photo，自动检测和处理 MOV 视频文件，保留动态照片效果

技术栈：Nuxt4 + TypeScript + TailwindCSS + Drizzle ORM

快速上手

配置信息

创建 .env 文件，下面是使用本地存储的最小示例。

# 管理员邮箱（必须）
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=

# 存储提供者（local 或 s3 或 openlist）
NUXT_STORAGE_PROVIDER=local
NUXT_PROVIDER_LOCAL_PATH=/app/data/storage

# 会话密码（必须，32 位随机字符串）
NUXT_SESSION_PASSWORD=

# 是否开启允许 IP 直接访问
NUXT_ALLOW_INSECURE_COOKIE=true

如选择使用 S3 存储，请将存储部分的配置替换为：

NUXT_STORAGE_PROVIDER=s3
NUXT_PROVIDER_S3_ENDPOINT=
NUXT_PROVIDER_S3_BUCKET=chronoframe
NUXT_PROVIDER_S3_REGION=auto
NUXT_PROVIDER_S3_ACCESS_KEY_ID=
NUXT_PROVIDER_S3_SECRET_ACCESS_KEY=
NUXT_PROVIDER_S3_PREFIX=photos/
NUXT_PROVIDER_S3_CDN_URL=

若选择使用 OPENLIST，请将存储部分的配置替换为：

NUXT_STORAGE_PROVIDER=openlist
NUXT_PROVIDER_OPENLIST_BASE_URL=https://openlist.example.com
NUXT_PROVIDER_OPENLIST_ROOT_PATH=/115pan/chronoframe
NUXT_PROVIDER_OPENLIST_TOKEN=your-static-token

如果需要集成 Github 登录，需配置 GitHub OAuth 变量：

NUXT_OAUTH_GITHUB_CLIENT_ID=
NUXT_OAUTH_GITHUB_CLIENT_SECRET=

Docker 部署

1、拉取镜像

docker pull ghcr.io/hoshinosuzumi/chronoframe:latest

2、创建挂载目录和配置文件

mkdir -p /data/software/chronoframe/data

cd /data/software/chronoframe

# 配置文件参考前文的配置文件信息
vim .env

3、运行容器

docker run -d \
--name chronoframe \
  -p 3000:3000 \
  -v /data/software/chronoframe/data:/app/data \
  --env-file .env \
  ghcr.io/hoshinosuzumi/chronoframe:latest

Docker Compose 部署

1、创建 docker-compose.yml 文件

services:
  chronoframe:
    image: ghcr.io/hoshinosuzumi/chronoframe:latest
    container_name: chronoframe
    restart: unless-stopped
    ports:
      - '3000:3000'
    volumes:
      - ./data:/app/data
    env_file:
      - .env

2、启动服务

# 启动服务
docker compose up -d

# 查看日志
docker compose logs -f chronoframe

# 停止服务
docker compose down

# 更新到最新版本
docker compose pull
docker compose up -d

反向代理

如需要使用反向代理服务器（如 Nginx 或 Caddy）来处理 HTTPS 和域名解析，可参考如下配置。

server {
    listen 80;
    server_name your-domain.com;
    
    # HTTPS 重定向
    return 301 https://$server_name$request_uri;
}

server {
    listen 443 ssl http2;
    server_name your-domain.com;
    
    # SSL 证书配置
    ssl_certificate /path/to/your/certificate.crt;
    ssl_certificate_key /path/to/your/private.key;
    
    # SSL 安全配置
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384;
    ssl_prefer_server_ciphers off;
    
    # 上传大小限制
    client_max_body_size 100M;
    
    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_cache_bypass $http_upgrade;
        
        # WebSocket 支持
        proxy_set_header Connection "upgrade";
        proxy_set_header Upgrade $http_upgrade;
        
        # 超时设置
        proxy_connect_timeout 60s;
        proxy_send_timeout 60s;
        proxy_read_timeout 60s;
    }
    
    # 静态资源缓存
    location ~* \.(jpg|jpeg|png|gif|webp|svg|css|js|ico|woff|woff2|ttf|eot)$ {
        proxy_pass http://localhost:3000;
        expires 1y;
        add_header Cache-Control "public, immutable";
        proxy_set_header Host $host;
    }
}

功能体验

首页

  • 明亮模式

  • 暗黑模式

  • 照片查看

  • 地球仪

  • 相簿

  • 筛选照片

控制台

  • 仪表盘

  • 照片库

  • 上传照片

  • 相簿

  • 队列管理

  • 系统日志

无论是摄影爱好者整理作品，还是个人珍藏生活片段，chronoframe 都能通过简单的部署方式，为你打造一个流畅、安全且充满温度的私人图片画廊。快去部署体验吧~

项目地址：https://github.com/HoshinoSuzumi/chronoframe

最后

推荐的开源项目已经收录到 GitHub 项目，欢迎 Star：

https://github.com/chenyl8848/great-open-source-project

或者访问网站，进行在线浏览：

https://chencoding.top:8090/#/

大家的点赞、收藏和评论都是对作者的支持，如文章对你有帮助还请点赞转发支持下，谢谢！

❌
❌