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

大家好，我是 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:latestDocker 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; } }功能体验首页明亮模式