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

大家好，我是 Java陈序员。
在这个数字时代，我们的手机和相机里存满了无数珍贵的照片 —— 家人的笑脸、旅行的风景、生活的点滴瞬间。但这些回忆往往被淹没在杂乱的相册里，要么受制于云存储的隐私风险，要么因格式兼容问题难以完整呈现。
这时候，我们可以搭建一个完全属于自己、能按时间和地点梳理回忆的照片画廊。
今天，给大家推荐一款专注于流畅体验的自托管个人画廊神器，支持一键部署！

关注微信公众号：【Java陈序员】，获取开源项目分享、AI副业分享、超200本经典计算机电子书籍等。

项目介绍

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

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

技术栈：Nuxt4 + TypeScript + TailwindCSS + Drizzle ORM
快速上手

配置信息

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

1. # 管理员邮箱（必须）
2. CFRAME_ADMIN_EMAIL=
3. # 管理员用户名（可选，默认 ChronoFrame）
4. CFRAME_ADMIN_NAME=
5. # 管理员密码（可选，默认 CF1234@!）
6. CFRAME_ADMIN_PASSWORD=
8. # 站点信息（均可选）
9. NUXT_PUBLIC_APP_TITLE=
10. NUXT_PUBLIC_APP_SLOGAN=
11. NUXT_PUBLIC_APP_AUTHOR=
12. NUXT_PUBLIC_APP_AVATAR_URL=
14. # 地图提供器 (maplibre/mapbox)
15. NUXT_PUBLIC_MAP_PROVIDER=maplibre
16. # 使用 MapLibre 需要 MapTiler 访问令牌
17. NUXT_PUBLIC_MAP_MAPLIBRE_TOKEN=
18. # 使用 Mapbox 需要 Mapbox 访问令牌
19. NUXT_PUBLIC_MAPBOX_ACCESS_TOKEN=
21. # 存储提供者（local 或 s3 或 openlist）
22. NUXT_STORAGE_PROVIDER=local
23. NUXT_PROVIDER_LOCAL_PATH=/app/data/storage
25. # 会话密码（必须，32 位随机字符串）
26. NUXT_SESSION_PASSWORD=
28. # 是否开启允许 IP 直接访问
29. NUXT_ALLOW_INSECURE_COOKIE=true

复制代码

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

1. NUXT_STORAGE_PROVIDER=s3
2. NUXT_PROVIDER_S3_ENDPOINT=
3. NUXT_PROVIDER_S3_BUCKET=chronoframe
4. NUXT_PROVIDER_S3_REGION=auto
5. NUXT_PROVIDER_S3_ACCESS_KEY_ID=
6. NUXT_PROVIDER_S3_SECRET_ACCESS_KEY=
7. NUXT_PROVIDER_S3_PREFIX=photos/
8. NUXT_PROVIDER_S3_CDN_URL=

复制代码

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

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

复制代码

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

1. NUXT_OAUTH_GITHUB_CLIENT_ID=
2. NUXT_OAUTH_GITHUB_CLIENT_SECRET=

复制代码

Docker 部署

1、拉取镜像

1. docker pull ghcr.io/hoshinosuzumi/chronoframe:latest

复制代码

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

1. mkdir -p /data/software/chronoframe/data
3. cd /data/software/chronoframe
5. # 配置文件参考前文的配置文件信息
6. vim .env

复制代码

3、运行容器

1. docker run -d \
2.         --name chronoframe \
3.   -p 3000:3000 \
4.   -v /data/software/chronoframe/data:/app/data \
5.   --env-file .env \
6.   ghcr.io/hoshinosuzumi/chronoframe:latest

复制代码

Docker Compose 部署

1、创建 docker-compose.yml 文件

1. services:
2.   chronoframe:
3.     image: ghcr.io/hoshinosuzumi/chronoframe:latest
4.     container_name: chronoframe
5.     restart: unless-stopped
6.     ports:
7.       - '3000:3000'
8.     volumes:
9.       - ./data:/app/data
10.     env_file:
11.       - .env

复制代码

2、启动服务

1. # 启动服务
2. docker compose up -d
4. # 查看日志
5. docker compose logs -f chronoframe
7. # 停止服务
8. docker compose down
10. # 更新到最新版本
11. docker compose pull
12. docker compose up -d

复制代码

反向代理

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

1. server {
2.     listen 80;
3.     server_name your-domain.com;
4.    
5.     # HTTPS 重定向
6.     return 301 https://$server_name$request_uri;
7. }
9. server {
10.     listen 443 ssl http2;
11.     server_name your-domain.com;
12.    
13.     # SSL 证书配置
14.     ssl_certificate /path/to/your/certificate.crt;
15.     ssl_certificate_key /path/to/your/private.key;
16.    
17.     # SSL 安全配置
18.     ssl_protocols TLSv1.2 TLSv1.3;
19.     ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384;
20.     ssl_prefer_server_ciphers off;
21.    
22.     # 上传大小限制
23.     client_max_body_size 100M;
24.    
25.     location / {
26.         proxy_pass http://localhost:3000;
27.         proxy_http_version 1.1;
28.         proxy_set_header Upgrade $http_upgrade;
29.         proxy_set_header Connection 'upgrade';
30.         proxy_set_header Host $host;
31.         proxy_set_header X-Real-IP $remote_addr;
32.         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
33.         proxy_set_header X-Forwarded-Proto $scheme;
34.         proxy_cache_bypass $http_upgrade;
35.         
36.         # WebSocket 支持
37.         proxy_set_header Connection "upgrade";
38.         proxy_set_header Upgrade $http_upgrade;
39.         
40.         # 超时设置
41.         proxy_connect_timeout 60s;
42.         proxy_send_timeout 60s;
43.         proxy_read_timeout 60s;
44.     }
45.    
46.     # 静态资源缓存
47.     location ~* \.(jpg|jpeg|png|gif|webp|svg|css|js|ico|woff|woff2|ttf|eot)$ {
48.         proxy_pass http://localhost:3000;
49.         expires 1y;
50.         add_header Cache-Control "public, immutable";
51.         proxy_set_header Host $host;
52.     }
53. }

复制代码

功能体验

首页

• 明亮模式
  

• 暗黑模式
  

• 照片查看
  

• 地球仪
  

• 相簿
  

• 筛选照片
  

控制台

• 仪表盘
  

• 照片库
  

• 上传照片
  

• 相簿
  

• 队列管理
  

• 系统日志
  

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

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

复制代码

最后

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

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

复制代码

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

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

复制代码

我创建了一个开源项目交流群，方便大家在群里交流、讨论开源项目。
但是任何人在群里打任何广告，都会被 T 掉。
如果你对这个交流群感兴趣或者在使用开源项目中遇到问题，可以通过如下方式进群：
关注微信公众号：【Java陈序员】，回复【开源项目交流群】进群，或者通过公众号下方的菜单添加个人微信，并备注【开源项目交流群】，通过后拉你进群。

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

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！