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

大家好,我是 Java陈序员

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

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

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

项目介绍

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

功能特色

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

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

快速上手

配置信息

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

bash 复制代码
# 管理员邮箱(必须)
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 存储,请将存储部分的配置替换为:

bash 复制代码
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,请将存储部分的配置替换为:

bash 复制代码
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 变量:

bash 复制代码
NUXT_OAUTH_GITHUB_CLIENT_ID=
NUXT_OAUTH_GITHUB_CLIENT_SECRET=

Docker 部署

1、拉取镜像

bash 复制代码
docker pull ghcr.io/hoshinosuzumi/chronoframe:latest

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

bash 复制代码
mkdir -p /data/software/chronoframe/data

cd /data/software/chronoframe

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

3、运行容器

bash 复制代码
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 文件

yaml 复制代码
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、启动服务

bash 复制代码
# 启动服务
docker compose up -d

# 查看日志
docker compose logs -f chronoframe

# 停止服务
docker compose down

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

反向代理

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

bash 复制代码
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 都能通过简单的部署方式,为你打造一个流畅、安全且充满温度的私人图片画廊。快去部署体验吧~

bash 复制代码
项目地址:https://github.com/HoshinoSuzumi/chronoframe

最后

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

bash 复制代码
https://github.com/chenyl8848/great-open-source-project

或者访问网站,进行在线浏览:

bash 复制代码
https://chencoding.top:8090/#/

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


相关推荐
AAA阿giao2 小时前
从“拼字符串”到“魔法响应”:一场数据驱动页面的奇幻进化之旅
前端·javascript·vue.js
小胖霞2 小时前
vite+ts+monorepo从0搭建vue3组件库(三):开发一个组件
vue.js·前端框架·前端工程化
JS_GGbond2 小时前
Vue3 组件入门:像搭乐高一样玩转前端!
前端·vue.js
小胖霞2 小时前
vite+ts+monorepo从0搭建vue3组件库(二):项目搭建
前端·vue.js·前端工程化
小胖霞2 小时前
vite+ts+monorepo从0搭建vue3组件库(四):button组件开发
vue.js·前端框架·前端工程化
JS_GGbond2 小时前
Vue中级冒险:3-4周成为组件沟通大师 🚀
前端·vue.js
AY呀2 小时前
《玩转Vue3响应式:手把手实现TodoList,掌握核心指令》
前端·javascript·vue.js
飞Link3 小时前
Docker基础知识
运维·docker·容器
回忆是昨天里的海3 小时前
docker存储-卷映射
运维·服务器·docker